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 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
vuex管理状态仓库使用详解
Jul 29 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
Terran兵种介绍
2020/03/14 星际争霸
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP合并静态文件详解
2014/11/14 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
详解Python Socket网络编程
2016/01/05 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python如何查看安装了的模块
2020/06/23 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
PHP面试题大全
2015/10/16 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
我的求职计划书
2014/01/10 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
政风行风评议工作总结
2014/10/21 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android