CSS + jQuery 实现的超性感的下拉菜单
发布时间：2018-08-19 04:10:40 所属栏目：传媒 来源：站长网
导读：早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery CSS，稍作修改实现了多级下拉，并实现了 ASP.NET 中通过输出 HTML 动态创建版本，有兴趣的同学可以包装成 Server Control。 HTML部分： Copy to Clipboard 引用的内容：[www.veryhuo.c
|
副标题[/!--empirenews.page--]
早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS，稍作修改实现了多级下拉，并实现了 ASP.NET 中通过输出 HTML 动态创建版本，有兴趣的同学可以包装成 Server Control。 HTML部分： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<ul class="topmenu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul class="submenu1"> <li><a href="#">Ch1</a></li> <li><a href="#">Ch2</a> <ul class="submenu11"> <li><a href="#">Ch21</a> <ul class="submenu11"> <li><a href="#">Ch211</a> <ul class="submenu11"> <li><a href="#">Ch2111</a> <ul class="submenu11"> <li><a href="#">Ch21111</a></li> <li><a href="#">Ch21112</a></li> <li><a href="#">Ch21113</a></li> <li><a href="#">Ch21114</a></li> <li><a href="#">Ch21115</a></li> <li><a href="#">Ch21116</a></li> </ul> </li> <li><a href="#">Ch2112</a></li> <li><a href="#">Ch2113</a></li> <li><a href="#">Ch2114</a></li> <li><a href="#">Ch2115</a></li> </ul> </li> <li><a href="#">Ch212</a></li> <li><a href="#">Ch213</a></li> <li><a href="#">Ch214</a></li> </ul> </li> <li><a href="#">Ch22</a> <ul class="submenu11"> <li><a href="#">Ch221</a></li> <li><a href="#">Ch222</a></li> <li><a href="#">Ch223</a></li> </ul> </li> <li><a href="#">Ch23</a></li> </ul> </li> <li><a href="#">Ch3</a> <ul class="submenu11"> <li><a href="#">Ch31</a></li> <li><a href="#">Ch32</a></li> </ul> </li> </ul> </li> <li><a href="#">Resources</a> <ul class="submenu1"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact Us</a></li> </ul> CSS部分： Copy to Clipboard引用的内容：[www.veryhuo.com]
<style type="text/css"> /* Header */ body { margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; background: #ddd url(images/sexydropdownmenu/body_bg.gif) repeat-x; } .container { width: 960px; margin: 0 auto; position: relative; } #header { background: url(images/sexydropdownmenu/header_bg.gif) no-repeat center top; padding-top: 120px; } #header .version { color: #111; font-size: 40px; padding: 38px 450px 7px 0; text-align: right; display: block; position: absolute; top: 0; right: 0; } #header .disclaimer { color: #999; padding: 100px 0 7px 0; text-align: right; display: block; position: absolute; top: 0; right: 0; } #header .disclaimer a { color: #ccc; } /* Sexy Drop Down Menu */ ul.topmenu { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(images/sexydropdownmenu/topnav_bg.gif) repeat-x; } ul.topmenu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topmenu li a, ul.topmenu li a.hover { padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topmenu li a.hover, ul.topmenu li a:hover { background: url(images/sexydropdownmenu/topnav_hover.gif) no-repeat center top; } ul.topmenu li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(images/sexydropdownmenu/subnav_btn.gif) no-repeat center top; } ul.topmenu li span.hover { background-position: center bottom; cursor: pointer; } ul.topmenu li ul.submenu1 { /*--Hover effect for trigger--*/ list-style: none; position: absolute; /*--Important - Keeps submenu1 from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; } ul.topmenu li ul.submenu1 li { margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } ul.topmenu li ul.submenu1 li a { float: left; width: 145px; background: #333 url(images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } ul.topmenu li ul.submenu1 li a:hover { /*--Hover effect for submenu1 links--*/ background: #222 url(images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px center; } ul.topmenu li ul.submenu1 li ul.submenu11 { list-style: none; position: absolute; /*--Important - Keeps submenu11 from affecting main navigation flow--*/ left: 170px; top: -2px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; } </style> （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
