«

jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)

时间:2024-1-30 09:46     作者:韩俊     分类: Html+Css


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

jquery下拉菜单效果一:

jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)

jquery下拉菜单效果二:

jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)

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

<html xmlns="http://www.maopiaopiao.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.maopiaopiao.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.maopiaopiao.com/">php程序员教程网</a> 提供!</p>
</body>
</html>

jquery下拉菜单源码下载

标签: javascript html css

热门推荐