FORGOT YOUR DETAILS?

HTML CSS js实现可隐藏侧边导航条cid1123-扁平现代设计网页前端设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Menu Bar</title>
    <link rel="stylesheet" href="style.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    <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>
    <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: 100%;
    background: #042331;
    transition: all .5s ease;
}

.sidebar header{
    font-size: 22px;
    color: white;
    text-align: center;
    line-height: 70px;
    background: #063146;
    user-select: none;
}

.sidebar ul a{
    display: block;
    height: 100%;
    width: 100%;
    line-height: 65px;
    font-size: 20px;
    color: white;
    padding-left: 40px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid black;
    translation: .4s;
}

ul li:hover a{
    padding-left: 50px;
}

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


#check{
    display: none;
}

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

label #btn{
    left: 40px;
    top: 25px;
    font-size: 35px;
    color: white;
    padding: 6px 12px;
    transition: all .5s;
}

label #cancel{
    z-index: 1111;
    left: -195px;
    top: 17px;
    font-size:30px;
    color: #0a5275;
    padding: 4px 9px;
    transition: all .5s ease;
}

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

#check:checked ~ label #btn{
    left: 250px;
    opacity: 0;
    pointer-events: none;
}

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

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

section{
    background: url(bg.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    transition: all .5s;
}

在线演示


让链接同时具备两种打开方式
获取源码: slide_menu-master
下载数:300人次, 文件大小: 223.1 KB, 上传日期: 2021年-3月-23日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,761 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付





 

TOP

获取源码,用于学习交流。记得 B站/点赞 /投币/转发 非常谢谢!

一键获取本站点所有源码