美文网首页基础前端
jQuery 实现水平菜单下拉功能

jQuery 实现水平菜单下拉功能

作者: CondorHero | 来源:发表于2019-03-10 01:00 被阅读47次
    横向菜单栏下拉菜单.gif
    实现思路
    • 写一个横向导航条
    • 在导航条的每个块里面添加下拉文本
    • 下拉内容display:none;
    • slideDown/slideUp实现下拉功能

    直接上源代码:

     <!DOCTYPE html>
     <html lang="en">
     <head>
        <meta charset="UTF-8">
        <title>dropdown menu</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                color: #f9f9f9;
            }
            .nav {
                margin: 100px auto;
                height: 43px;
                background-color: #7995cc;
            }
            .inner {
                width: 1030px;
                margin: 0 auto;
    
            }
            .nav .inner ul {
                list-style: none;
            }
            .nav .inner ul li {
                float: left;
                height: 43px;
                width: 116px;
                text-align: center;
                line-height: 43px;
                 position: relative;
            }
            .nav .inner ul li.first {
                width: 86px;
            }   
            
            .nav .inner ul li>a {
                font-size: 15px;
                text-decoration: none;
                color: #fff;
                
            }
            .nav .inner ul li>a:hover {
                color: #333;
            } 
    
            .nav .inner ul li .dropdown {
                display: none;
                background-color: #858aab;
                position: absolute;
                top: 55px;
                left: 0;
                width: 116px;
            }
            .nav .inner ul li .dropdown a {
                font-size: 12px;
                text-decoration: none;
                color: #fff;
                display:block;
            }
            .nav .inner ul li .dropdown a:hover {
                background-color: blue;
            }
            .box {
                height: 12px;
            }
        </style>
     </head>
     <body>
        <div class="nav">
            <div class="inner">
                <ul>
                    <li class = 'first'><a href="">首页</a></li>
                    <li>
                        <a href="">学校概况</a>
                        <div class="box"></div>
                        <div class="dropdown">
                            <p><a href="">学校简介</a></p>
                            <p><a href="">概况一览</a></p>
                            <p><a href="">学校历史</a></p>
                            <p><a href="">历任领导</a></p>
                            <p><a href="">现任领导</a></p>
                            <p><a href="">校长寄语</a></p>
                            <p><a href="">学校标志</a></p>
                            <p><a href="">老照片</a></p>
                            <p><a href="">校园导游</a></p>
                            <p><a href="">校园地图</a></p>
                        </div>
                    </li>
                    <li>
                        <a href="">国际合作</a>
                        <div class="box"></div>
                        <div class="dropdown">
                            <p><a href="">交流概况</a></p>
                            <p><a href="">国际合作</a></p>
                            <p><a href="">国际学生</a></p>
                        </div>
                    </li>
                    <li><a href="">院系部门</a></li>
                    <li><a href="">科学研究</a></li>
                    <li><a href="">教师队伍</a></li>
                    <li><a href="">人才培养</a></li>
                    <li><a href="">人才招聘</a></li>
                    <li><a href="">招生就业</a></li>
                </ul>
            </div>
        </div>
        <script src="js/jquery-1.12.3.min.js"></script>
        <script>
            $("li").mouseenter(function(){
                if($(this).children(".dropdown").is(":animated")){
                    return;
                }
                $(this).children(".dropdown").slideDown();
            });
    
    
            $("li").mouseleave(function(){
                $(".dropdown").slideUp();
            });
        </script>
     </body>
     </html>
    

    需要注意的几点:

    1. 下拉菜单和导航条之间有间隔。dropdown绝对定位。
    2. 因为导航条和下拉菜单之间有空隙。当鼠标移动去下拉菜单,下拉菜单已经消失。解决办法,中间加个盒子,实现过度。

    相关文章

      网友评论

        本文标题:jQuery 实现水平菜单下拉功能

        本文链接:https://www.haomeiwen.com/subject/mucepqtx.html