+3

Làm sidebar với hamburger chỉ bằng HTML và CSS đơn giản

Giới thiệu

Hôm nay xin giới thiệu với Anh Em cách làm 1 cái sidebar menu đơn giản với hamburger đóng mở chỉ với HTML vs CSS thôi. Bình thường khi chúng ta code sidebar đóng mở chúng ta sẽ thường dùng JS để thực hiện việc này tuy nhiên với mẹo này sẽ giúp các bạn tiết kiệm được thời gian đấy. Cùng xem ví dụ dưới đây nhé.

Cách làm

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link rel="stylesheet" href="style.css">
    <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>Side Navbar</title>
</head>
<body>
    <nav>
        <input type="checkbox" name="open" id="open">
        <label for="open" class="open">
            <i class="fas fa-bars"></i>
        </label>
        <div class="menu">
            <div class="logo">
                <a href="#">
                    <img src="logo.png" alt="">
                </a>
            </div>
          <ul>
              <li>
                  <a href="#">
                      <span><i class="fas fa-home"></i></span>
                      Home
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span><i class="fas fa-address-card"></i></span>
                      About
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span><i class="fas fa-cog"></i></span>
                      Settings
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span><i class="fas fa-address-book"></i></span>
                      Contact
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span><i class="fas fa-comments-alt-dollar"></i></span>
                      Feedback
                  </a>
              </li>
          </ul>
        </div>
    </nav>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body{
    overflow: hidden;
    font-family: sans-serif; 
    background-color: #387b6a;
    height: 100vh;  
}

.menu{
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    padding-top: 60px;
    background-color: #212121; 
    transition: 0.5s;
    transform: translateX(-250px);
}
.logo a{
    padding: 15px 25px;
    font-size: 40px;
    text-transform: uppercase;
    color: white;
    /*margin-left: 5px*/
}
.logo a img{
    max-width:140px;
    border-radius: 50%;
    margin-bottom: 10px;
}
ul li{
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transition: 0.3s;
    /*text-align: center;*/
    padding-left: 25px;
}
ul li:hover{
    padding-left: 35px;
    background-color: #445665;
}
ul li a{
    display: block;
    color: #fff;
    padding: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

#open{
    display: none;
}
.open{
    height: 80px
    width: 80px;
    /*position: absolute;*/
    /*background-color: #000;*/
}
.open i{
    font-size: 25px;
    cursor: pointer;
    margin-left: 25px;
    margin-top: 25px;
    background-color: #000;
    padding: 15px 15px;
    color: white;
    z-index: 99;
}
#open:checked ~ .menu{
    transition: 0.5s;
    transform: translateX(0);
}
#open:checked ~ .open i{
    transition: 0.5s;
    margin-left: 190px;
    position: absolute;
}

Demo

Ví dụ các bạn có thể xem ở đây nhé
https://codepen.io/Truelove/pen/oNwMJzd

Lời kết

Như vậy chỉ 1 mẹo nhỏ CSS thôi là chúng ta có thể làm được sidebar menu với mỗi HTML vs CSS mà không cần động chạm gì tới JS rất là đơn giản. Hi vọng bài viết sẽ có ích cho các bạn Frontend mới nhé. Cảm ơn các bạn đã đọc bài!


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí