使用 HTML & CSS 制作左侧滑动导航条

最新推荐文章于 2024-05-18 20:42:18 发布

啵雨的博客

最新推荐文章于 2024-05-18 20:42:18 发布

阅读量4.3k

点赞数 10

分类专栏： HTML+CSS 小demo效果练习

原文链接：https://www.bilibili.com/video/BV19a4y1t7BG/?spm_id_from=333.788.videocard.0

版权

HTML+CSS 小demo效果练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用 HTML & CSS 制作左侧滑动导航条

原视频连接

在这里插入图片描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Menu Bar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">
</head>
<body>
    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    //用label和input的原因，在文章底部会说，也是此案例的关键
    <div class="sidebar">
        <header>My App</header>
        <ul>
            <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
            <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
            <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
            <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
            <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
            <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
            <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
        </ul>
    </div>
    <section></section>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
}

.sidebar {
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100vh;
    background-color: #042331;
    transition: all 0.5s ease;
    //ease 开始和结束慢，中间快
}

.sidebar header {
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 22px;
    background: #063146;
    user-select: none;
    //用户不能选取
}

.sidebar ul a {
    display: block;
    padding-left: 50px;
    line-height: 70px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid black;
    color: white;
    transition: 0.3s linear;
}

.sidebar ul i {
    padding-right: 16px;
}

.sidebar ul a:hover {
    padding-left: 40px;
}

#check {
    display: none;
}

label #btn,
label #cancel {
    position: absolute;
    cursor: pointer;
    background-color: #042331;
    border-radius: 3px;
}

label #btn {
    left: 40px;
    top: 25px;
    color: white;
    font-size: 35px;
    padding: 6px 10px;
    transition: 0.3s;
}

label #cancel {
    z-index: 999;
    left: -197px;
    top: 17px;
    font-size: 30px;
    color: #0a5275;
    padding: 4px 9px;
    transition: 0.3s;
}

#check:checked~.sidebar {
    left: 0px;
}

#check:checked~label #btn {
    left: 250px;
    opacity: 0;
}

#check:checked~label #cancel {
    left: 197px;
}

section {
    background: url(bg.png) no-repeat;
    background-position: center;
    //定位背景图片在中间
    height: 100vh;
    background-size: cover;
    transition: all 0.5s;
}

#check:checked~section {
    margin-left: 250px;
}

--------------------------------------------------------------------------------------------------

#check:checked~label #btn{}

有人肯定这个地方不太明白是什么
我在这说一下：
1.了解一下 ‘~’这个符号，它其实是一个css选择器
具体内容转载一片文章，写的很详细
https://www.cnblogs.com/nyw1983/p/11628364.html

2.接下来说一下input和label两个标签之间的关系！！！！两个像亲兄弟一样
在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。

<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

我们这回再看一下

#check:checked~label #btn{}

这个代码的原意是，点击复选框，选中状态下，兄弟标签label的 #btn 会执行xxx操作

但是从实际效果看，我们把复选款隐藏了，#check { display: none; }单击label标签的#btn #cancel
也可以达到效果，因为某种意义上，单击label标签的#btn #cancel就相当于单击复选框了！！！！

这就是input和label标签经常一起用的原因

    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>

使用的时候，一定要把label和input连接，此处就是label for 连接了 input的id

啵雨的博客

关注

10
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
使用 HTML & CSS 制作左侧滑动导航条

使用 HTML & CSS 制作左侧滑动导航条原视频连接HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Slide Menu Bar</title> <link rel="stylesheet" href="style.css"> <link rel="styleshe
复制链接

扫一扫

专栏目录