jquery下拉菜单效果（超简洁实用，兼容IE和firefox等主流浏览器）

最新推荐文章于 2022-05-18 00:41:49 发布

www-phpernote-com

最新推荐文章于 2022-05-18 00:41:49 发布

阅读量649

点赞数

分类专栏： javascript html css 文章标签： jquery下拉菜单

javascript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

分享一个利用jquery实现的下拉菜单效果，代码简洁易修改。这里使用jquery分别实现了两种下拉菜单的效果，其实原理是一样的，经测试是兼容IE，火狐等各大主流浏览器的。下面贴一下这个下拉菜单的效果图。

jquery下拉菜单效果一：

jquery下拉菜单效果二：

下面将效果一的代码贴一下，如果需要效果二的代码的话，可以自己修改或者在下面下载源码即可。

<html xmlns="http://www.phpernote.com/jquery-effects/114.html">
<head>
<title>JQUERY下拉菜单示例</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<style type="text/css">
body,html{font: normal 14px "宋体";}
#menu_yhm{width:100%; height:30px}
#menu_yhm ul{padding:0 0; list-style-type:none; margin:0 0;}
#menu_yhm li{position:relative; width:160px; background:#006666; float:left; height:30px; border-right:#fff 1px solid;}
#menu_yhm li a{text-align:center; line-height:30px; width:160px; display:block; height:30px; color:#fff; text-decoration:none;}
#menu_yhm li a:hover{background-color:#990000; color:#ff0;}
#menu_yhm ul ul{z-index:99; position:absolute; width:160px; display:none; background:#900; top:30px; left:0px;}
#menu_yhm ul ul li{position:relative; display:block; background-color:#900; border-top:#fff 1px solid;}
#menu_yhm ul ul ul{z-index:199; position:absolute; width:160px; background:#900; top:-1px; left:161px;}
#menu_yhm li.li01{background:#900;}
#menu_yhm li.li01 a{color:#ff0;}
#menu_yhm li.li01 li a{color:#fff;}
#menu_yhm li.li01 li a:hover{background-color:#000; color:#ff0;}
#menu_yhm li li.li01 a{background:#000; color:#ff0;}
#menu_yhm li li.li01 ul a{color:#fff;}
#menu_yhm li li.li01 ul a:hover{background:#333; color:#ff0;}
</style>
<script language="javascript" type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	$("#menu_yhm ul li").hover(
	function(){
		$(this).children("ul").show();
		$(this).addClass("li01");
		
	},
	function(){
		$(this).children("ul").hide();
		$(this).removeClass("li01");
	});
});
</script>
<body>
<div id="menu_yhm">
    <ul>
    	<li><a href="#">设计前沿</a> 
            <ul>
                <li><a href="#">网页设计</a></li>
                <li><a href="#">平面设计</a></li>
                <li><a href="#">ui设计</a></li>
            </ul>
    	</li>
        <li><a href="#">技术文档</a> 
        <ul>
            <li><a href="#">jquery</a></li>
            <li><a href="#">php+mysql</a></li>
            <li><a href="#">web前端</a>
                <ul>
                    <li><a href="#">div+css</a></li>
                    <li><a href="#">psd源文件</a></li>
                    <li><a href="#">html源码</a></li>
                </ul>
            </li>
            <li><a href="#">常用软件和工具</a></li>
        </ul>
    </li>
    <li><a href="#">电子商务</a> 
        <ul>
            <li><a href="#">b2c网站</a></li>
            <li><a href="#">国外优秀商务网站</a></li>
            <li><a href="#">服装外贸</a></li>
        </ul>
    </li>
    </ul>
</div>
<p style="margin-top:140px;">本示例由 <a target="_blank" href="http://www.phpernote.com/">php程序员教程网</a> 提供！</p>
</body>
</html>

源码下载请参考原网站：http://www.phpernote.com/jquery-effects/818.html

www-phpernote-com

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery下拉菜单效果（超简洁实用，兼容IE和firefox等主流浏览器）

分享一个利用jquery实现的下拉菜单效果，代码简洁易修改。这里使用jquery分别实现了两种下拉菜单的效果，其实原理是一样的，经测试是兼容IE，火狐等各大主流浏览器的。下面贴一下这个下拉菜单的效果图。jquery下拉菜单效果一：jquery下拉菜单效果二：下面将效果一的代码贴一下，如果需要效果二的代码的话，可以自己修改或者在下面下载源码即可。JQUERY下拉菜单示
复制链接

扫一扫