小米商城侧导航栏的实现（导航栏的制作）

侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？

下面看一看我制作的小米商城的侧导航栏。

看下列代码：

<body>
    <div class="box3-1">
        <ul>
            <li>
                <a href="#">手机</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">电脑</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">笔记本 平板</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">出行 穿戴</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">耳机 音箱</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">家电</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">智能 路由器</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">电源 配件</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">健康 儿童</a>
                <div class="Sidebar">
                </div>
            </li>
            <li>
                <a href="#">生活 箱包</a>
                <div class="Sidebar">
                </div>
            </li>
        </ul>
    </div>
</body>

我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。

所涉及到的知识点有定位和格式化文档。

下面看一下css代码：

<style>
    .box3-1 {
        width: 234px;
        height: 460px;
        background-color: rgba(128, 128, 128, .5);
    }
    /* 制作列表大小和样式 */
    .box3-1 ul {
        height: 418px;
        padding: 20px 0px;
        position: relative;
        border-right: 1px solid #6e6a6a;
    }

    .box3-1 li {
        list-style: none;
        padding: 0px 23px 0px 30px;
        height: 42px;
        line-height: 42px;
    }
     
    .box3-1 li>a {
        text-decoration: none;
        color: #ffffff;
        font-size: 14px;
    }
    /* 鼠标移入是背景颜色改变 */
    .box3-1 li:hover {
        background-color: rgb(255, 103, 0);
    }
    /* 下拉框部分 */
    .Sidebar {
        position: absolute;
        left: 236px;
        top: 0px;
        width: 994px;
        height: 460px;
        background-color: rgb(162, 79, 79);
        box-shadow: 0px 0px 5px #b0b0b0;
        /* 将元素隐藏 */
        display: none;
    }
        /* 鼠标移入列表元素出现 */
    .box3-1 li:hover .Sidebar {
        display: block;
    }
</style>

css代码段如上所示

我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。

这里需要注意的知识点是position定位属性。在position:absolute绝对定位。产生top，left等四个属性。通过这四个属性调节位置，在之前的文章中有详细介绍，大家可以看看哦

具体看以上代码

页面元素隐藏

页面元素隐藏的方法：
1.display:none;
2. visibility: hidden;visibility 属性规定元素是否可见。默认可见可继承
3. opacity:0;
4. position:absolute;left:-10000px;

看一下运行效果：

这是一个很简单的练习，但是里面的小知识点也不少，大家可以试一试哦。

小米商城侧导航栏的实现（导航栏的制作）

猜你喜欢