You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

208 lines
5.9 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  7. <title>Theming - Semantic</title>
  8. <!--- Site CSS -->
  9. <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
  10. <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
  11. <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
  12. <!--- Component CSS -->
  13. <link rel="stylesheet" type="text/css" href="../../dist/components/menu.css">
  14. <link rel="stylesheet" type="text/css" href="../../dist/components/input.css">
  15. <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
  16. <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
  17. <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
  18. <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
  19. <!--- Example Libs -->
  20. <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
  21. <script src="../assets/library/jquery.min.js"></script>
  22. <script src="../assets/library/iframe-content.js"></script>
  23. <script src="../assets/show-examples.js"></script>
  24. <script type="text/javascript" src="../../dist/components/popup.js"></script>
  25. <!--- Component JS -->
  26. <script type="text/javascript" src="../../dist/components/transition.js"></script>
  27. <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
  28. <!--- Example CSS -->
  29. <style>
  30. body {
  31. padding: 1em;
  32. }
  33. .ui.menu {
  34. margin: 3em 0em;
  35. }
  36. .ui.menu:last-child {
  37. margin-bottom: 110px;
  38. }
  39. </style>
  40. <!--- Example Javascript -->
  41. <script>
  42. $(document)
  43. .ready(function() {
  44. $('.ui.menu .ui.dropdown').dropdown({
  45. on: 'hover'
  46. });
  47. $('.ui.menu a.item')
  48. .on('click', function() {
  49. $(this)
  50. .addClass('active')
  51. .siblings()
  52. .removeClass('active')
  53. ;
  54. })
  55. ;
  56. })
  57. ;
  58. </script>
  59. </head>
  60. <body>
  61. <div class="ui menu">
  62. <div class="header item">Brand</div>
  63. <a class="active item">Link</a>
  64. <a class="item">Link</a>
  65. <div class="ui dropdown item">
  66. Dropdown
  67. <i class="dropdown icon"></i>
  68. <div class="menu">
  69. <div class="item">Action</div>
  70. <div class="item">Another Action</div>
  71. <div class="item">Something else here</div>
  72. <div class="divider"></div>
  73. <div class="item">Separated Link</div>
  74. <div class="divider"></div>
  75. <div class="item">One more separated link</div>
  76. </div>
  77. </div>
  78. <div class="right menu">
  79. <div class="item">
  80. <div class="ui action left icon input">
  81. <i class="search icon"></i>
  82. <input type="text" placeholder="Search">
  83. <button class="ui button">Submit</button>
  84. </div>
  85. </div>
  86. <a class="item">Link</a>
  87. </div>
  88. </div>
  89. <div class="ui inverted menu">
  90. <div class="header item">Brand</div>
  91. <div class="active item">Link</div>
  92. <a class="item">Link</a>
  93. <div class="ui dropdown item">
  94. Dropdown
  95. <i class="dropdown icon"></i>
  96. <div class="menu">
  97. <div class="item">Action</div>
  98. <div class="item">Another Action</div>
  99. <div class="item">Something else here</div>
  100. <div class="divider"></div>
  101. <div class="item">Separated Link</div>
  102. <div class="divider"></div>
  103. <div class="item">One more separated link</div>
  104. </div>
  105. </div>
  106. <div class="right menu">
  107. <div class="item">
  108. <div class="ui transparent inverted icon input">
  109. <i class="search icon"></i>
  110. <input type="text" placeholder="Search">
  111. </div>
  112. </div>
  113. <a class="item">Link</a>
  114. </div>
  115. </div>
  116. <div class="ui secondary menu">
  117. <div class="active item">Link</div>
  118. <a class="item">Link</a>
  119. <div class="ui dropdown item">
  120. Dropdown
  121. <i class="dropdown icon"></i>
  122. <div class="menu">
  123. <div class="item">Action</div>
  124. <div class="item">Another Action</div>
  125. <div class="item">Something else here</div>
  126. <div class="divider"></div>
  127. <div class="item">Separated Link</div>
  128. <div class="divider"></div>
  129. <div class="item">One more separated link</div>
  130. </div>
  131. </div>
  132. <div class="right menu">
  133. <div class="item">
  134. <div class="ui action left icon input">
  135. <i class="search icon"></i>
  136. <input type="text" placeholder="Search">
  137. <button class="ui button">Submit</button>
  138. </div>
  139. </div>
  140. <div class="ui dropdown item">
  141. Dropdown Left<i class="dropdown icon"></i>
  142. <div class="menu">
  143. <a class="item">Link</a>
  144. <a class="item">Link</a>
  145. <div class="divider"></div>
  146. <div class="header">Header</div>
  147. <div class="item">
  148. <i class="dropdown icon"></i>
  149. Sub Menu
  150. <div class="menu">
  151. <a class="item">Link</a>
  152. <div class="item">
  153. <i class="dropdown icon"></i>
  154. Sub Sub Menu
  155. <div class="menu">
  156. <a class="item">Link</a>
  157. <a class="item">Link</a>
  158. </div>
  159. </div>
  160. <a class="item">Link</a>
  161. </div>
  162. </div>
  163. <a class="item">Link</a>
  164. </div>
  165. </div>
  166. <a class="item">Link</a>
  167. </div>
  168. </div>
  169. <div class="ui three column doubling grid">
  170. <div class="column">
  171. <div class="ui secondary pointing menu">
  172. <div class="active item">Link</div>
  173. <a class="item">Link</a>
  174. <a class="item">Link</a>
  175. </div>
  176. </div>
  177. <div class="column">
  178. <div class="ui tabular menu">
  179. <div class="active item">Link</div>
  180. <a class="item">Link</a>
  181. <a class="item">Link</a>
  182. </div>
  183. </div>
  184. <div class="column">
  185. <div class="ui pointing menu">
  186. <div class="active item">Link</div>
  187. <a class="item">Link</a>
  188. <div class="right item">
  189. Right Text
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </body>
  195. </html>