使用css作出边栏导航

最新推荐文章于 2021-08-04 08:01:47 发布

懒得一批s

最新推荐文章于 2021-08-04 08:01:47 发布

阅读量202

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44797717/article/details/102878689

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

边栏导航很方便，我在不少网站里面见过，所以这次自己用css写出了一个，虽然有点丑，不过也就是样式的问题。懒得改了，不说废话了直接上代码了，注释我写的还算全。如果有不懂的可以私信我
css style中的内容
这个就是取消掉的框在这里插入图片描述

       /* 取消掉自带的框 */
    #pagerbutton{
        display: none;
    }

   /* 使用相邻选择器选到按钮被激活时的导航主体给他设置属性 */
    #pagerbutton:checked+aside{
        left:0px;
    }

    /*为被选中的 导航按钮的 按钮外围样式 设置属性（非紧邻）*/
    #pagerbutton:checked ~#link{
        margin-left: 150px;
    }


    
    /*为导航按钮设置外围样式*/
    #link {
            margin-left: 20px;
            padding: 12px;
            transition: 0.2s ease-out;
        }

    aside{
            position: absolute;
            top: 0;
            bottom: 0;
            /*将侧边栏初始位置隐藏*/
            left: -150px;
            width: 150px;
            background: papayawhip;
            transition: 0.2s ease-out;
            /*过渡效果的执行方式是ease-out，让侧边栏滑出现的时候变的更好看*/
        }


        /*为导航按钮设置文字样式*/
        label {
            background: cyan;
            border-radius: 70%;
            color: rgb(18, 49, 228);
            /* 在鼠标移动到按钮上时 鼠标样式变为小手 */
            cursor: pointer;
            display: block;
            font-size: 10px;
            height: 50px;
            width: 80px;
            line-height: 50px;
            text-align: center;
            display: inline-block;
        }
        /*为导航按钮设置鼠标悬停时的背景颜色*/
        label:hover {
            background:orchid;
        }

        #subject li {
            list-style: none;
            color: white;
            width: 100%;
            height: 1.8em;
            font-size: 1.5em;
            text-align: center;
        }


        
        /* 导航菜单栏中的大标题设置样式 */
        h2 {
            color: white;
            text-align: center;
            font-size: 2em;
        }

        a {
            text-decoration: none;
            color: springgreen;
        }

        #subject li:hover {
            color:red;
        }

body里的

<!-- 导航按钮 -->
<input type="checkbox" id="pagerbutton" >
<!-- 导航主题内容 -->
    <aside>
        <h2>
            导航菜单
        </h2>
        <br>
        <ul id="subject">
            <li>
                <a href="#">链接1</a>
            </li>
            <li>    
                <a href="#">链接2</a>
            </li>
        </ul>
    </aside>
<div  id="link" >
    <!-- 导航按钮 -->
    <label  for="pagerbutton" >
       导航菜单
    </label>
</div>

这是效果图
在这里插入图片描述
点击之后就会弹出