UNPKG

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