Chia sẻ Code Menu Responsive

Thông báo:

Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!


 Xin chào các bạn vậy là một năm nữa lại sắp trôi qua rồi đúng không, mình xin chúc mọi người một năm mới an khang thịnh vượng và hạnh phúc bên gia đình nhé.

ok bây giờ chúng ta bắt đầu vào chủ đề của ngày hôm nay nhé.

Demo giao diện trên PC


Demo giao diện trên Mobile


Demo Online:

Code

Code HTML:
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Document</title>
    <link href="style.css" rel="stylesheet"></link>
    <!-- Copyright QuangNinhBay.Com -->
</head>
<body>
    <div class="container">
        <header>
            <div class="top-head">
                <h2>Responsive</h2>
            </div>
            <nav>
                <div class="line-menu">
                   <div class="line"></div>
                   <div class="line"></div>
                   <div class="line"></div>
                </div>
                <ul class="menu">
                    <li><a href="">Home</a></li>
                    <li><a href="">Information</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Picture</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <article>
                <h2>Blog</h2>
                <img alt="" src="https://jefde.csb.app/img/circles.svg" />
            </article>
        </main>

        <footer>
            <p>Copyright 2021</p>
        </footer>
    </div>

    <script src="./app.js"></script>
</body>
</html>

Code CSS:
/* <!--Copyright QuangNinhBay.Com--> */
@import url('https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    font-family: 'Roboto', sans-serif;
    display: grid;
    grid-template-rows: 120px 1fr 58px;
}

header{
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.top-head{
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: rgb(206, 144, 144); */
}

.top-head h2{
    color: #fff;
    text-shadow: 1px 1px 10px #1037a0;
}

header nav{
    height: 100%;
    background: rgb(84, 116, 204);
    display: flex;
    align-items: center;
    
}
.menu{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

article{
    display: flex;
    justify-content: space-around;
}

article h2{
    top: 48%;
    position: absolute;
    font-size: 25px;
    color: #fff;
    opacity: .5;
}

nav ul li{
    display: inline;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}

main{
    background: linear-gradient(to right top, rgb(61, 176, 221), rgb(65, 27, 201));
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px){
    .container{
        grid-template-rows: 60px 1fr 58px;
    }
    main{
        height: 83vh;
    }
    header{
        grid-template-rows: 1fr;
    }
    .top-head{
        position: absolute;
        left: 2%;
        top: 2%;
        z-index: 2;
    }
    .line{
        background: #fff;
        height: 3px;
        width: 30px;
        margin: 5px;
        transition: all .8s ease-out;
    }
    .line.active{
        background: #fff;
        height: 3px;
        width: 25px;
        margin: 5px;
    }
    nav{
        position: relative;
    }

    .line-menu{
        position: absolute;
        right: 2%;
        top: 23%;
        z-index: 2;
        cursor: pointer;
    }

    .menu{
        position: fixed;
        background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
        top: 0;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(100px at 50% -30%);
        -webkit-clip-path: circle(100px at 50% -30%);
        transition: all .8s ease-out;
        z-index: 1;
    }
    .menu.active{
        font-size: 25px;
        clip-path: circle(1200px at 50% -30%);
        -webkit-clip-path: circle(1200px at 29% -30%);
    }

    nav ul li{
        opacity: 0;
    }

    nav ul li:nth-child(1){
        transition: all .9s ease-out;
    }
    nav ul li:nth-child(2){
        transition: all 1.1s ease-out;
    }
    nav ul li:nth-child(3){
        transition: all 1.3s ease-out;
    }
    nav ul li:nth-child(4){
        transition: all 1.5s ease-out;
    }
    nav ul li:nth-child(5){
        transition: all 1.8s ease-out;
    }
    nav ul li.active{
        opacity: 1;
    }

}
Code JavaScript:
const line_menu = document.querySelector('.line-menu');
const menu = document.querySelector('.menu');
const line = document.querySelectorAll('.line');

const li = document.querySelectorAll('.menu li');

line_menu.addEventListener('click', () => {
    menu.classList.toggle('active');
    line.forEach(e => {
        e.classList.toggle('active');
    });
    li.forEach(e => {
        e.classList.toggle('active');
    });
});


Chúc các bạn thành công! không hiểu chỗ nào bình luận ở dưới mình giải đáp nha.
CÓ THỂ BẠN ĐANG TÌM