jquery学习笔记之JQ下拉菜单

来源:互联网 时间:1970-01-01

下拉菜单是企业网站开发中常用的到的东西,下面我介绍一个基于jquery实现的下拉菜单效果,这是我这个JS菜鸟最近才开始学习,以前一直要搞个下拉菜单,现在学了点JQ,发现也挺简单的

HTML代码

 代码如下 复制代码

<ul id="nav-categories">

    <li><a href="../">首页</a>

    </li>

    <li>

        <a href="#">链接</a>

        <ul>

            <li><a href="#">aaa</a></li>

            <li><a href="#">bbb</a></li>

            <li><a href="#">ccc</a></li>

            <li><a href="#">ddd</a></li>

        </ul>

    </li>     <li>
        <a href="#">相册</a>
        <ul>
            <li><a href="#">11</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">33</a></li>
            <li><a href="#">44</a></li>
        </ul>
    </li>
    <li>
        <a href="#">博客</a>
        <ul>
            <li><a href="#">AA</a></li>
            <li><a href="#">BB</a></li>
            <li><a href="#">CC</a></li>
            <li><a href="#">DD</a></li>
        </ul>
    </li>
    <li>
        <a href="#">关于</a>
    </li>
</ul>

JQuery代码

 代码如下 复制代码

//两个参数,一个导航ul标签的id,一个是下拉菜单的显示速度,越小越快
function zvMenu(ulElementId,speed){
    //JQ一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
    $("#"+ulElementId).children("li:has(ul)").hover(
        function(){
            $(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式,此处非必要
            $(this).children("ul").slideDown(speed);//JQ的slideDown方法,显示下拉菜单
        },
        function(){
            $(this).children("ul").hide();//隐藏下拉菜单
        }
    );
    //JQ动画,可选
    $("#"+ulElementId).find("li>ul>li>a").hover(
        function(){
            $(this).animate({paddingLeft:"30px"},speed);
        },
        function(){
            $(this).animate({paddingLeft:"20px"},speed);
        }
    );
 
}

CSS代码

 代码如下 复制代码

#nav-categories{float:left;font-size:18px;height:50px;line-height:50px;}
#nav-categories li{float:left;padding:0 20px 0 20px;background:#444;position:relative;}
#nav-categories li ul{display:none;background:#444;color:#fff;position:absolute;left:0;top:50px;width:120px;border:1px solid #990;border-top:none;}
#nav-categories li a{color:#FFF;}
#nav-categories li a:hover{color:#9C0;}
#nav-categories li ul li{height:40px;line-height:30px;background:#444;width:116px;padding:0;margin:0;border:2px solid #9C0;border-top:none;border-bottom:none;}
#nav-categories li ul li.li-last-s1{border-bottom:2px solid #9C0;}
#nav-categories li ul li a{display:block;padding:5px 5px 5px 20px;zoom:1;}
#nav-categories li ul li a:hover{background:#575855;}




相关阅读:
Top