2022年 10月 13日- (星期四) / Published in css 设计, html 设计, javascript 设计, 前端设计

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;
}

在线演示

让链接同时具备两种打开方式