jQuery+css实现简单的导航下拉菜单效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

如何使用jQuery+css实现简单的导航下拉菜单效果呢？ 一个网站导航功能是必不可少的,‌‌网站导航可以为网页的访问者提供一种捷径，使其可以方便的访问到所需的内容页面， 网站导航同时可以提高网页的浏览效率。

如何实现

该项目使用无序列表实现网页的导航功能,设置li的position值为relative,这样二级菜单就可以根据这个li来定位.二级菜单的position值为absolute，top：100%；left：0；right：0；width：100%； 这样二级菜单就会紧跟着一级菜单li定位，并且宽度等于一级菜单li的宽度。书写好html和css以后只需调用下列js就可以实现.

js部分

js部分主要涉及到的知识点为：mouseover和mouseleave事件，“mouseover”事件：当鼠标指针移入一个元素时触发。可以通过添加“mouseover”事件侦听器来执行相应的操作，例如改变元素的样式、显示隐藏的内容等。 “mouseleave”事件：当鼠标指针移出一个元素时触发。可以通过添加“mouseleave”事件侦听器来执行相应的操作，例如恢复元素的样式、隐藏内容等。

关键js代码与解析

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script>
    //下拉菜单鼠标移入移出控制显示隐藏
    $(function () {
        //鼠标移入
        $(".dropdown").mouseover(function () {
            $(this).addClass("open");
        });
        //鼠标移出
        $(".dropdown").mouseleave(function () {
            $(this).removeClass("open");
        })
    })

</script>