Hướng dẫn tạo responsive menu

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo responsive menu. Các bạn có thể xem hình minh họa dưới đây responsive menu mà chúng ta sẽ tạo.

Một số thành phần

HTML5 + CSS3
jQuery (phiên bản mình sử dụng trong bài viết này là 3.3.1)

Lưu ý

Cài đặt một số thành phần:

Để có thể tạo responsive menu, các bạn thêm dòng sau vào head:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

Đối với jQuery các bạn thêm vào cuối phần body, trước phần custom script của bạn:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    //Custom script ở đây
</script>

Đầu tiên các bạn sẽ tạo một menu theo chiều ngang như mình thường. Đối với menu khi thu gọn lại, các bạn sử dụng đoạn code sau trong phần CSS:

@media (max-width: 768px){
    /* CSS cho phần menu khi thu gọn tại đây */
}

trong đó phần max-width chính là chiều dài tối thiểu để hiển thị menu theo chiều ngang, dưới mức đó sẽ hiển thị menu theo dạng thu gọn.

Chi tiết

Về cơ bản trên đây là một số điều cần lưu ý. Dưới đây là đoạn code đầy đủ:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Responsive Sliding Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <div class="menu">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="menu-bar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.menu').click(function(){
            $('.menu').toggleClass('active')
            $('.menu-bar').toggleClass('active')
        })
    })
    </script>
</body>
</html>

main.css

body{
    margin: 0;
    padding: 0;
    background: #000;
}

.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: #ffffff;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.menu span{
    position: absolute;
    width: 30px;
    height: 2px;
    background: #262626;
    display: block;
    top: calc(50% - 1px);
    left: calc(50% - 15px);
    transition: 0.5s;
}

.menu span:nth-child(1){
    transform: translateY(-10px);
}

.menu span:nth-child(3){
    transform: translateY(10px);
}

.menu.active span:nth-child(1){
    transform: translateY(0px) rotate(-45deg);
}

.menu.active span:nth-child(3){
    transform: translateY(0px) rotate(45deg);
}

.menu.active span:nth-child(2){
    transform: translateX(-30px);
    opacity: 0;
}

.menu-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    transition: 0.5s;
    transform: translateX(-100%);
}

.menu-bar.active{
    transform: translateX(0);
}

.menu-bar ul{
    display: flex;
    margin: 0;
    padding: 0;
    float: right;
}

.menu-bar ul li{
    list-style: none;
}

.menu-bar ul li a{
    line-height: 60px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: #262626;
    text-decoration: none;
    padding: 0 20px;
    display: block;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-bar ul li:last-child a{
    border-right: none;
}

.menu-bar ul li a:last-child{
    border-right: none;
}

.menu-bar ul li a:hover{
    background: #262626;
    color:#fff;
}

@media (max-width: 768px){
    .menu-bar{
        height: auto;
        overflow-y: auto;
    }

    .menu-bar ul{
        display: inherit;
        float: none;
        text-align: center;
        width: 100%;
        height: 100vh;
    }

    .menu-bar ul a{
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}