导航

文章
学生问:我在爱快官网临摹导航,这个导航鼠标经过时,如何下拉展示和回收?

老师答:那就按照这个课程进行讲解吧。


基本HTML代码


VSCODE编辑器创建HTML以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mune</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <div class="menu">
            <div class="container">
                <h1 class="logo">LOGO</h1>
                <ul class="menu_left">
                    <li><a href="javascript:void(0)">产品</a></li>
                    <li><a href="javascript:void(0)">方案</a></li>
                    <li><a href="javascript:void(0)">服务</a></li>
                    <li><a href="javascript:void(0)">SD-WAN</a></li>
                    <li><a href="javascript:void(0)">合作</a></li>
                </ul>
                <ul class="menu_right">
                    <li><a href="javascript:void(0)">支持</a></li>
                    <li>
                        <a href="javascript:void(0)">EN</a>
                        <span>/</span>
                        <a href="javascript:void(0)">中文</a>
                    </li>
                    <li><a href="javascript:void(0)">爱快云</a></li>
                    <li class="no"><a href="javascript:void(0)">论坛</a></li>
                </ul>
            </div>
        </div>
        <div class="menu_content">
            <div class="container">
                <ul class="menu_hide">
                    <li>
                        <a href="javascript:void(0)">硬件产品</a>
                        <ul>
                            <li><a href="javascript:void(0)">交换机</a></li>
                            <li><a href="javascript:void(0)">网关</a></li>
                            <li><a href="javascript:void(0)">路由</a></li>
                            <li><a href="javascript:void(0)">室内AP</a></li>
                            <li><a href="javascript:void(0)">室外AP</a></li>
                            <li><a href="javascript:void(0)">网桥</a></li>
                            <li><a href="javascript:void(0)">其他</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)">软件产品</a>
                        <ul>
                            <li><a href="javascript:void(0)">路由系统</a></li>
                            <li><a href="javascript:void(0)">固件下载</a></li>
                            <li><a href="javascript:void(0)">SD-WAN</a></li>
                            <li><a href="javascript:void(0)">技术云盘</a></li>
                            <li><a href="javascript:void(0)">爱快云</a></li>
                            <li><a href="javascript:void(0)">云展板</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu_hide">
                    <li><a href="javascript:void(0)" class="a_no">爱快酒店无线网络</a></li>
                    <li><a href="javascript:void(0)" class="a_no">爱快智慧校园网络</a></li>
                    <li><a href="javascript:void(0)" class="a_no">爱快中小企业网络</a></li>
                    <li><a href="javascript:void(0)" class="a_no">爱快连锁餐娱网络</a></li>
                    <li><a href="javascript:void(0)" class="a_no">爱快连锁培训学校网络</a></li>
                </ul>
                <ul class="menu_hide">
                    <li><a href="javascript:void(0)" class="a_no">组网解决方案</a></li>
                    <li><a href="javascript:void(0)" class="a_no">有余增值服务</a></li>
                    <li><a href="javascript:void(0)" class="a_no">售后维修服务</a></li>
                </ul>
                <ul class="menu_hide">
                    <li><a href="javascript:void(0)" class="a_no">远程视频监控</a></li>
                    <li><a href="javascript:void(0)" class="a_no">企业协同办公</a></li>
                    <li><a href="javascript:void(0)" class="a_no">连锁领域</a></li>
                </ul>
                <ul class="menu_hide">
                    <li><a href="javascript:void(0)" class="a_no">OEM合作</a></li>
                    <li><a href="javascript:void(0)" class="a_no">加盟合作</a></li>
                    <li><a href="javascript:void(0)" class="a_no">渠道联系</a></li>
                </ul>
            </div>
        </div>
    </header>
</body>
</html>

导航下拉都是属于header块级里的,先创建menu导航内容,包含左右宽度居中、LOGO和左侧和右侧导航:

 <div class="menu">
     <div class="container">
                <h1 class="logo">文字LOGO</h1>
                <ul class="menu_left">
                    <li><a href="javascript:void(0)">左侧导航内容</a></li>
                </ul>
                <ul class="menu_right">
                    <li><a href="javascript:void(0)">右侧导航内容</a></li></li>
                </ul>
      </div>
</div>
LESS语法:
    .container {
        max-width: 1200px;
        width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }
    .menu{
        min-height: 60px;
        background: #2C3D4F;

        ul {
            height: auto;
    
            &>li {
                float: left;
                position: inherit;
    
                &>a {
                    color: #fff;
                    display: block;
                    padding: 22px 15px 20px 15px;
                    position: relative;
    
                    &::before {
                        content: '';
                        position: absolute;
                        transition: width .4s;
                        width: 0;
                        height: 3px;
                        background: #327DF1;
                        left: 0;
                        bottom: 0;
                    }
    
                    &:hover {
                        color: #327DF1;
                        &::before {
                            width: 100%;
                        }
                    }
                }
            }
        }
         /* logo */
        .logo{
            
                 color: #fff;
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 1.7em;
                 line-height: 1.5em;
                 margin-right: 20px;
           
        }
        
        /* 左侧导航 */
        .menu_left,.logo{
            float: left;
        }
    
        /* 右侧导航 */
        .menu_right {
            float: right;
            // 获取倒数第一和倒数第二元素
            li:nth-last-child(1),li:nth-last-child(2){
                border: 1px solid #FFFFFF;
                border-radius: 2px;
                margin: 12px 0px 0 22px;
                a{
                    padding: 7px 25px;
                    // 取消伪类
                    &::before {
                        content: none;
                    }
                    &:hover {
                        color: #fff;
                        background: #327DF1;
                    }
                }
                &:hover {
                    border-color: #327DF1;
                }
            }
            // 获取倒数第三元素
            li:nth-last-child(3){
                margin: 22px 0 0 0;
                a{
                    padding: 0;
                    float: left;
                    // 取消伪类
                    &::before {
                        content: none;
                    }
                   
                }
                span{
                    margin: 0px 2px;
                    float: left;
                    color: #fff;
                }
            }
        }
    }
container是参考bootstrap标准宽度。
二级导航内容:
<div class="menu_content">
    <div class="container">
        <ul class="menu_hide">
            <li>
                <a href="javascript:void(0)">硬件产品</a>
                <ul>
                    <li><a href="javascript:void(0)">交换机</a></li>
                    <li><a href="javascript:void(0)">网关</a></li>
                    <li><a href="javascript:void(0)">路由</a></li>
                    <li><a href="javascript:void(0)">室内AP</a></li>
                    <li><a href="javascript:void(0)">室外AP</a></li>
                    <li><a href="javascript:void(0)">网桥</a></li>
                    <li><a href="javascript:void(0)">其他</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">软件产品</a>
                <ul>
                    <li><a href="javascript:void(0)">路由系统</a></li>
                    <li><a href="javascript:void(0)">固件下载</a></li>
                    <li><a href="javascript:void(0)">SD-WAN</a></li>
                    <li><a href="javascript:void(0)">技术云盘</a></li>
                    <li><a href="javascript:void(0)">爱快云</a></li>
                    <li><a href="javascript:void(0)">云展板</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu_hide">
            <li><a href="javascript:void(0)" class="a_no">爱快酒店无线网络</a></li>
            <li><a href="javascript:void(0)" class="a_no">爱快智慧校园网络</a></li>
            <li><a href="javascript:void(0)" class="a_no">爱快中小企业网络</a></li>
            <li><a href="javascript:void(0)" class="a_no">爱快连锁餐娱网络</a></li>
            <li><a href="javascript:void(0)" class="a_no">爱快连锁培训学校网络</a></li>
        </ul>
        <ul class="menu_hide">
            <li><a href="javascript:void(0)" class="a_no">组网解决方案</a></li>
            <li><a href="javascript:void(0)" class="a_no">有余增值服务</a></li>
            <li><a href="javascript:void(0)" class="a_no">售后维修服务</a></li>
        </ul>
        <ul class="menu_hide">
            <li><a href="javascript:void(0)" class="a_no">远程视频监控</a></li>
            <li><a href="javascript:void(0)" class="a_no">企业协同办公</a></li>
            <li><a href="javascript:void(0)" class="a_no">连锁领域</a></li>
        </ul>
        <ul class="menu_hide">
            <li><a href="javascript:void(0)" class="a_no">OEM合作</a></li>
            <li><a href="javascript:void(0)" class="a_no">加盟合作</a></li>
            <li><a href="javascript:void(0)" class="a_no">渠道联系</a></li>
        </ul>
    </div>
</div>
LESS语法:
 .menu_content{
       width: 100%;
       background:#E4E4E4;
       box-shadow: 0 2px 5px rgba(0,0,0,0.2);
       ul{
        padding: 30px 0 25px 15px;
            li{
                display: inline-block; 
                vertical-align: top; 
                margin-right: 60px;
                a{
                    color:#666666; 
                    font-weight: 600;
                }
                ul{
                    position: relative;
                    padding: 8px 0; left: 0;
                    li{
                        display: block;  
                        padding: 6px 0;
                        a{
                            font-weight: normal;
                        }
                    }
                }
            }
            // 文字不加粗
            .a_no{
                font-weight: normal;
            }
       }
   }
}  

//隐藏
.menu_hide{
    display: none;
}
//显示
.menu_show{
    display: block;
}
jQuery语法
$(function(){
    $(".menu_left li").mouseover(function(){
                let index = $(this).index();
                $(".menu_hide").eq(index).addClass("menu_show").siblings().removeClass("menu_show");
    });
    $(".menu_hide").mouseleave(function(){
        $(this).removeClass("menu_show");
    });
});
是不是非常简单?

注意jQuery要加载jQuery库插件才能运行。

效果:

关注公众号,输入二级导航下载源文件。

TAG: