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>