123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <!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>
|