淘宝首页之导航条——弹出式悬浮菜单

最新推荐文章于 2024-04-21 15:49:32 发布

dasiy_j

最新推荐文章于 2024-04-21 15:49:32 发布

阅读量5.4k

点赞数 2

分类专栏： web前端文章标签：学习

本文链接：https://blog.csdn.net/dasiy_j/article/details/80295977

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

昨天学习了布局，今天要来实现弹出式导航条。布局选的flex布局。

关于弹出式悬浮菜单总结了下大概是以下几步：

1.鼠标放到一级菜单上时二级菜单显示，鼠标移开二级菜单隐藏。

2.打算为二级菜单设置一个div，不同的一级菜单显示不同的内容。（调试了好久，因为innerHTML）。

3.关于高亮，在一级和二级菜单的区域里一级菜单都要高亮显示

先贴代码(请无视效果图里那辣眼睛的颜色)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>

<style>
    *{
        margin:0;
        padding:0;
    }
    header{
        background:#777777;
    }
    footer{
        background: #777777;
    }
    html,body,.container,.middle,.left,.right,#subleft1{
        height: 300px;
    }
    .container{
        border: 1px solid #0a1015;
        display:flex;

    }
    .middle{
        background: #f0ad4e;
        flex-grow:1;
    }
    .left{
        background: #b21f2d;
        width: 200px;
        order:-1;
        text-align: center;
        position:relative;
    }
    .right{
        background: #0d47a1;
        width: 300px;
    }
    #subleft1{
        position:absolute;
        width:500px;
        background: #e0f2f1;
        text-align: left;
        padding-left:5px;
        left:200px;
        top:0;
        display:none;
    }
    ul,li{
        list-style:none;
    }
    .left ul li span{
        position:absolute;
        left:180px;
    }
    #hidden{
        display:none;
    }
</style>
</head>
<body>
<header>头部</header>
<div class="container">
    <div class="middle">中间</div>
    <div class="left">
        <ul>
            <li id="lid1" οnmοuseοver="mouse('lid1','id1',1)" οnmοuseοut="mouse('lid1','id1',0)">
                <a href="2.html">女装</a>/
                <a href="2.html">男装</a>/
                <a href="2.html">内衣</a>
                <span> > </span>
            </li>
            <li id="lid2" οnmοuseοver="mouse('lid2','id2',1)" οnmοuseοut="mouse('lid2','id2',0)">
                <a href="2.html">鞋靴</a>/
                <a href="2.html">箱包</a>/
                <a href="2.html">配件</a>
                <span> > </span>
            </li>
        </ul>
        <div id="subleft1" οnmοuseοver="mouse('','',1)" οnmοuseοut="mouse('','',0)">
        </div>
        <div id="hidden">
            <ul>
                <li id="id1">
                    <a href="2.html"><h3>女装</h3></a>
                    <a href="2.html">羽绒服</a>
                    <a href="2.html">毛呢外套</a>
                    <a href="2.html">毛衣</a>
                    <a href="2.html">针织衫</a>
                    <a href="2.html">气场外套</a>
                    <a href="2.html">卫衣</a>
                    <a href="2.html">衬衫</a>
                    <a href="2.html">皮衣</a>
                    <a href="2.html">皮草</a>
                </li>
                <li id="id2">
                    <a href="2.html"><h3>女装1</h3></a>
                    <a href="2.html">羽绒服1</a>
                    <a href="2.html">毛呢外套1</a>
                    <a href="2.html">毛衣1</a>
                    <a href="2.html">针织衫1</a>
                    <a href="2.html">气场外套1</a>
                    <a href="2.html">卫衣1</a>
                    <a href="2.html">衬衫1</a>
                    <a href="2.html">皮衣1</a>
                    <a href="2.html">皮草1</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="right">右边</div>
</div>
<footer>尾部</footer>
<script>
    var currentlidli =null;
    function mouse(lid,id,flag){
        var lidli =document.getElementById(lid);
        var subleft1 =document.getElementById('subleft1');
        var dis=document.getElementById(id);
        console.log(lidli);
        console.log(currentlidli);
        if(flag==1){
            subleft1.style.display="block";
            if(dis){
                subleft1.innerHTML=dis.innerHTML;
                lidli.style.backgroundColor ="#f0ad4e";
                currentlidli =lidli;
            }
            if(!lidli){
                currentlidli.style.backgroundColor ="#f0ad4e";
            }
        }else{
            subleft1.style.display="none";
            currentlidli.style.backgroundColor ="";
            if(lidli){
                lidli.style.backgroundColor ="";
            }
        }
    }
</script>
</body>
</html>

在实现的时候主要遇到三个问题：

1.因为二级菜单公用一个div，所以要通过innerHTML控制不同一级菜单时候二级菜单的不同内容，一开始我的二级菜单写在

subleft1这个div里面的，在一开始的innerHTML写进去之后，之后不管点哪个一次菜单，div始终是null，所以之后就把二级菜单挪到了一个隐藏的div里就可以了。

2.关于高亮，因为我是通过绑定mouse这个函数实现onmouseover和onmouseout的，在subleft1div绑定的事件我只传了flag，所以在对相应一级菜单设置背景颜色时拿不到目标一级菜单，所以我设置了一个currentlidli 全局变量，把一级菜单的lid赋值给它。

3.关于在绝对定位的div里设置文字距离边框的距离时，该div框的大小也会跟着变，最后是加了box-sizing: border-box;才好的，因为在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

dasiy_j

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
淘宝首页之导航条——弹出式悬浮菜单

昨天学习了布局，今天就要来做弹出式导航条。1.鼠标放到一级菜单上时二级菜单显示，鼠标移开二级菜单隐藏。2.打算为二级菜单设置一个div，不同的一级菜单显示不同的内容。（调试了好久，因为innerHTML）。3.本来打算用事件委托来实现上述需求，但是mouseout和mouseover4.关于高亮，在一级和二级菜单的区域里一级菜单都要高亮...
复制链接

扫一扫