jQuery+CSS 实现的超Sexy下拉菜单


Posted in Javascript onJanuary 17, 2010

jQuery+CSS 实现的超Sexy下拉菜单 
如何实现
Step 1 HTML

<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>

Step 2 CSS
<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>

Step 3 jQuery
<script type="text/javascript"> 
$(document).ready(function() { 
// Top Menu 
$("ul.submenu1").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*) 
$("ul.topmenu li span").click(function() { //When trigger is clicked... 
//Following events are applied to the submenu1 itself (moving submenu1 up and down) 
$(this).parent().find("ul.submenu1").slideDown('fast').show(); //Drop down the submenu1 on click 
$(this).parent().hover(function() { 
}, function() { 
$(this).parent().find("ul.submenu1").slideUp('slow'); //When the mouse hovers out of the submenu1, move it back up 
}); 
//Following events are applied to the trigger (Hover events for the trigger) 
}).hover(function() { 
$(this).addClass("hover"); //On hover over, add class "hover" 
}, function() { //On Hover Out 
$(this).removeClass("hover"); //On hover out, remove class "hover" 
}); $("ul.topmenu li ul.submenu1 li").hover(function() { 
$(this).find("ul.submenu11:first").show("slow"); 
}, function() { 
$(this).find("ul.submenu11:first").hide("fast"); 
}); 
}); 
</script>

演示代码
https://3water.com/jiaoben/23955.html
Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
TypeScript入门-接口
Mar 30 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
JS与框架页的操作代码
Jan 17 #Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 #Javascript
JavaScript QueryString解析类代码
Jan 17 #Javascript
屏蔽Flash右键信息的js代码
Jan 17 #Javascript
JavaScript学习笔记(十)
Jan 17 #Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 #Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 #Javascript
You might like
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
PHP 微信支付类 demo
2015/11/30 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP7 windows支持
2021/03/09 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python list转矩阵的实例讲解
2018/08/04 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
如何通过python检查文件是否被占用
2020/12/18 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
如何清空Session
2015/02/23 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
python实现简单反弹球游戏
2021/04/12 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android