209 lines
5.9 KiB
HTML
209 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
<title>Theming - Semantic</title>
|
||
|
|
|
||
|
|
<!--- Site CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
||
|
|
|
||
|
|
<!--- Component CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/menu.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/input.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
|
||
|
|
|
||
|
|
<!--- Example Libs -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
|
||
|
|
<script src="../assets/library/jquery.min.js"></script>
|
||
|
|
<script src="../assets/library/iframe-content.js"></script>
|
||
|
|
<script src="../assets/show-examples.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/popup.js"></script>
|
||
|
|
|
||
|
|
<!--- Component JS -->
|
||
|
|
<script type="text/javascript" src="../../dist/components/transition.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/dropdown.js"></script>
|
||
|
|
|
||
|
|
<!--- Example CSS -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
.ui.menu {
|
||
|
|
margin: 3em 0em;
|
||
|
|
}
|
||
|
|
.ui.menu:last-child {
|
||
|
|
margin-bottom: 110px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!--- Example Javascript -->
|
||
|
|
<script>
|
||
|
|
$(document)
|
||
|
|
.ready(function() {
|
||
|
|
$('.ui.menu .ui.dropdown').dropdown({
|
||
|
|
on: 'hover'
|
||
|
|
});
|
||
|
|
$('.ui.menu a.item')
|
||
|
|
.on('click', function() {
|
||
|
|
$(this)
|
||
|
|
.addClass('active')
|
||
|
|
.siblings()
|
||
|
|
.removeClass('active')
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="ui menu">
|
||
|
|
<div class="header item">Brand</div>
|
||
|
|
<a class="active item">Link</a>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="ui dropdown item">
|
||
|
|
Dropdown
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="item">Action</div>
|
||
|
|
<div class="item">Another Action</div>
|
||
|
|
<div class="item">Something else here</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">Separated Link</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">One more separated link</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right menu">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui action left icon input">
|
||
|
|
<i class="search icon"></i>
|
||
|
|
<input type="text" placeholder="Search">
|
||
|
|
<button class="ui button">Submit</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui inverted menu">
|
||
|
|
<div class="header item">Brand</div>
|
||
|
|
<div class="active item">Link</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="ui dropdown item">
|
||
|
|
Dropdown
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="item">Action</div>
|
||
|
|
<div class="item">Another Action</div>
|
||
|
|
<div class="item">Something else here</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">Separated Link</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">One more separated link</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right menu">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui transparent inverted icon input">
|
||
|
|
<i class="search icon"></i>
|
||
|
|
<input type="text" placeholder="Search">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui secondary menu">
|
||
|
|
<div class="active item">Link</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="ui dropdown item">
|
||
|
|
Dropdown
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="item">Action</div>
|
||
|
|
<div class="item">Another Action</div>
|
||
|
|
<div class="item">Something else here</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">Separated Link</div>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="item">One more separated link</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right menu">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui action left icon input">
|
||
|
|
<i class="search icon"></i>
|
||
|
|
<input type="text" placeholder="Search">
|
||
|
|
<button class="ui button">Submit</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui dropdown item">
|
||
|
|
Dropdown Left<i class="dropdown icon"></i>
|
||
|
|
<div class="menu">
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="divider"></div>
|
||
|
|
<div class="header">Header</div>
|
||
|
|
<div class="item">
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
Sub Menu
|
||
|
|
<div class="menu">
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="item">
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
Sub Sub Menu
|
||
|
|
<div class="menu">
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui three column doubling grid">
|
||
|
|
<div class="column">
|
||
|
|
<div class="ui secondary pointing menu">
|
||
|
|
<div class="active item">Link</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column">
|
||
|
|
<div class="ui tabular menu">
|
||
|
|
<div class="active item">Link</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column">
|
||
|
|
<div class="ui pointing menu">
|
||
|
|
<div class="active item">Link</div>
|
||
|
|
<a class="item">Link</a>
|
||
|
|
<div class="right item">
|
||
|
|
Right Text
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|