1 <!doctype html>
2 <html lang="zh">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="description" content="">
7 <meta name="author" content="">
8
9 <title>Template Index</title>
10 <style>
11 body {
12 font-size: 100%;
13 background: #32373d;
14 }
15 a {
16 text-decoration: none;
17 }
18 ul,
19 ul ul {
20 margin: 0;
21 padding: 0;
22 list-style: none;
23 }
24 #wrapper {
25 width: 220px;
26 margin: 100px auto;
27 font-size: 0.8125em;
28 }
29 .menu {
30 width: auto;
31 height: auto;
32 -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .73), 0 0 18px 0 rgba(0, 0, 0, .13);
33 -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .73), 0 0 18px 0 rgba(0, 0, 0, .13);
34 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .73), 0 0 18px 0 rgba(0, 0, 0, .13);
35 }
36 .menu > li > a {
37 background-color: #616975;
38 background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
39 background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
40 background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
41 background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
42 background-image: linear-gradient(to bottom, rgb(114, 122, 134), rgb(80, 88, 100));
43 border-bottom: 1px solid #33373d;
44 -webkit-box-shadow: inset 0 1px 0 0 #878e98;
45 -moz-box-shadow: inset 0 1px 0 0 #878e98;
46 box-shadow: inset 0 1px 0 0 #878e98;
47 width: 100%;
48 height: 2.75em;
49 line-height: 2.75em;
50 text-indent: 2.75em;
51 display: block;
52 position: relative;
53 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
54 font-weight: 600;
55 color: #fff;
56 text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
57 }
58 .menu ul li a {
59 background: #fff;
60 border-bottom: 1px solid #efeff0;
61 width: 100%;
62 height: 2.75em;
63 line-height: 2.75em;
64 text-indent: 2.75em;
65 display: block;
66 position: relative;
67 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
68 font-size: 0.923em;
69 font-weight: 400;
70 color: #878d95;
71 }
72 .menu ul li:last-child a {
73 border-bottom: 1px solid #33373d;
74 }
75 .menu > li > a:hover,
76 .menu > li > a.active {
77 background-color: #35afe3;
78 background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
79 background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
80 background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
81 background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
82 background-image: linear-gradient(to bottom, rgb(69, 199, 235), rgb(38, 152, 219));
83 border-bottom: 1px solid #103c56;
84 -webkit-box-shadow: inset 0 1px 0 0 #6ad2ef;
85 -moz-box-shadow: inset 0 1px 0 0 #6ad2ef;
86 box-shadow: inset 0 1px 0 0 #6ad2ef;
87 }
88 .menu > li > a.active {
89 border-bottom: 1px solid #1a638f;
90 }
91 .menu > li > a span {
92 font-size: 0.857em;
93 display: inline-block;
94 position: absolute;
95 right: 1em;
96 top: 50%;
97 background: #48515c;
98 line-height: 1em;
99 height: 1em;
100 padding: .4em .6em;
101 margin: -.8em 0 0 0;
102 color: #fff;
103 text-indent: 0;
104 text-align: center;
105 -webkit-border-radius: .769em;
106 -moz-border-radius: .769em;
107 border-radius: .769em;
108 -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 0 0 rgba(255, 255, 255, .15);
109 -moz-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 0 0 rgba(255, 255, 255, .15);
110 box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 0 0 rgba(255, 255, 255, .15);
111 text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
112 font-weight: 500px;
113 }
114 .menu > li > a:hover span,
115 .menu > li a.active span {
116 background: #2173a1;
117 }
118 .menu ul > li > a span {
119 font-size: 0.857em;
120 display: inline-block;
121 position: absolute;
122 right: 1em;
123 top: 50%;
124 background: #fff;
125 border: 1px solid #d0d0d3;
126 line-height: 1em;
127 height: 1em;
128 padding: .4em .7em;
129 margin: -.9em 0 0 0;
130 color: #878d95;
131 text-indent: 0;
132 text-align: center;
133 -webkit-border-radius: .769em;
134 -moz-border-radius: .769em;
135 border-radius: .769em;
136 text-shadow: 0 0 0 rgba(255, 255, 255, .1);
137 }
138 .menu > li > ul li a:before {
139 content: "▶";
140 font-size: 8px;
141 color: #bcbcbf;
142 position: absolute;
143 width: 1em;
144 height: 1em;
145 top: 0;
146 left: -2.7em;
147 }
148 .menu > li > ul li:hover a,
149 .menu > li > ul li:hover a span,
150 .menu > li > ul li:hover a:before {
151 color: #32373d;
152 }
153 </style>
154
155 </head>
156 <body>
157
158 <div id="wrapper">
159 <ul class="menu">
160 <li class="item1"><a href="#">Friends <span>340</span></a>
161 <ul>
162 <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
163 <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
164 <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
165 </ul>
166 </li>
167 <li class="item2"><a href="#">Videos <span>147</span></a>
168 <ul>
169 <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
170 <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
171 <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
172 </ul>
173 </li>
174 <li class="item3"><a href="#">Galleries <span>340</span></a>
175 <ul>
176 <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
177 <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
178 <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
179 </ul>
180 </li>
181 <li class="item4"><a href="#">Podcasts <span>222</span></a>
182 <ul>
183 <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
184 <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
185 <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
186 </ul>
187 </li>
188 <li class="item5"><a href="#">Robots <span>16</span></a>
189 <ul>
190 <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
191 <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
192 <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
193 </ul>
194 </li>
195 </ul>
196 </div>
197 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
198 <script>
199 $(function () {
200 var menu_ul = $(".menu > li > ul"),
201 menu_a = $(".menu > li > a");
202 menu_ul.hide();
203 menu_a.click(function (event) {
204 event.preventDefault();
205 if (!$(this).hasClass("active"))
206 {
207 menu_a.removeClass("active");
208 menu_ul.filter(":visible").slideUp("normal");
209 $(this).addClass("active").next().stop(true, true).slideDown("normal");
210 } // end if
211 else
212 {
213 $(this).removeClass("active");
214 $(this).next().stop(true, true).slideUp("normal");
215 } // end else
216
217
218 });
219 });
220 </script>
221 </body>
222 </html>
