隐藏的侧边导航栏

usrname为username

已于 2022-09-06 13:58:03 修改

阅读量931

点赞数 1

分类专栏：前端文章标签： css3 html5 前端

于 2022-09-06 09:31:44 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126717052

版权

CSS 导航栏隐藏过渡效果标签响应

关键词由CSDN通过智能技术生成

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

【前端经典】隐藏的侧边导航栏，侧边导航条，css实现弹出导航栏，网页

ctrl+alt+方向键，同时控制多行内容更改

难点：

解决块状显示时，圆角也变成块状，形状改变：nav标签添加overflow: hidden;

当点击按钮时，右侧弹出，需要label与动作响应标签（此例中nav）是同级元素且为下一个元素

最终效果：

源代码如下：


<!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>Document</title>
    <style>
        /* 初始化样式 */
        *{
            margin: 0;;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .nav{
            width: 150px;
            height: 400px;
            background-color: orange;
            /* 固定定位 */
            position: fixed;
            /* 定位后的位置,先把导航栏隐藏起来*/
            right: -150px;
            border-radius: 12px 0 0 12px;
            /* 把导航栏隐藏起来 */
            overflow: hidden;
            /* 让点击有个过渡,效果是从右平滑进入*/
            transition: 0.5s;
        }
        /* 点击=*/
        #cb:checked ~ .nav{      
            right: 0px;
        }
        .nav li{
            width: 150px;
            height: 40px;
            /* 水平垂直居中 */
            text-align: center;
            line-height: 40px;
        }
        .nav a:hover{
            background-color: #fc0;
        }
        .nav a{
            color: #000;
            display: block;
        }
        #cb{
            display: none;
        }
        label{
            width: 40px;
            height: 40px;
            background-color: orange;
            border-radius: 12px;
            display: inline-block;
            color: #fff;
            font-size: 40px;
            text-align: center;
            line-height: 40px;
            /* 绝对定位 */
            position: fixed;
            right: 150px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 弹出的按钮要两个标签来配合实现 -->
    <input type="checkbox" id="cb">
    <label for="cb">≡</label>
    <div class="nav">
        <ul>
            <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>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
    <p>我是换行</p>
</body>
</html>