Author: | jhonatan-oliveiradev |
---|---|
Views Total: | 2,957 views |
Official Page: | Go to website |
Last Update: | April 18, 2022 |
License: | MIT |
Preview:

Description:
As more and more people start using their mobiles to browse the web, it is more important than ever to make sure that your website is mobile friendly.
This is a modern, mobile-friendly navigation system that enables a hamburger button to expand and collapse a dropdown menu with smooth slide animations. Have fun with it.
Written entirely in plain JavaScript, HTML, and CSS. No third-party frameworks or libraries are needed.
How to use it:
1. Code the HTML for the dropdown menu.
<div class="navigation"> <div class="userBx"> <div class="imgBx"> <img src="user.jpg" alt="user avatar" /> </div> <p class="username">CSSScript</p> </div> <div class="menuToggle"></div> <ul class="menu"> <li> <a href="#">Profile</a> </li> <li> <a href="#">Message</a > </li> <li> <a href="#">Notification</a > </li> <li> <a href="#">Settings</a> </li> <li> <a href="#">Help</a > </li> <li> <a href="#">Logout</a> </li> </ul> </div>
2. The necessary CSS styles for the dropdown menu.
.navigation { position: fixed; top: 20px; right: 20px; width: 120px; height: 60px; background: #fff; box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; transition: height 0.5s, width 0.5s; transition-delay: 0s, 0.75s; overflow: hidden; } .navigation.active { width: 300px; height: 400px; transition: width 0.5s, height 0.5s; transition-delay: 0s, 0.75s; } .navigation .userBx { position: relative; width: 60px; height: 60px; background: #fff; display: flex; align-items: center; overflow: hidden; transition: 0.5s; transition-delay: 0.5s; } .navigation.active .userBx { width: calc(100% - 60px); transition-delay: 0s; } .navigation .userBx .username { white-space: nowrap; color: #555; font-size: 1.1em; } .navigation .userBx .imgBx { position: relative; min-width: 60px; height: 60px; overflow: hidden; background: #000; border-radius: 50%; border: 10px solid #fff; } .navigation .userBx .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .menu { position: absolute; width: 100%; height: calc(100% - 60px); margin-top: 60px; padding: 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .menu li { list-style: none; } .menu li a { display: flex; align-items: center; gap: 10px; margin: 20px 0; font-size: 1em; text-decoration: none; color: #555; } .menu li a:hover { color: #4e65ff; } .menu li a ion-icon { font-size: 1.5em; }
3. Apply CSS styles to the hamburger toggle button.
.navigation .menuToggle { position: relative; width: 60px; height: 60px; background: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; } .navigation .menuToggle::before { content: ""; position: absolute; width: 32px; height: 2px; background: #555; transform: translateY(-10px); box-shadow: 0 10px #555; transition: 0.5s; } .navigation .menuToggle::after { content: ""; position: absolute; width: 32px; height: 2px; background: #555; transform: translateY(10px); transition: 0.5s; } .navigation.active .menuToggle::before { transform: translateY(0px) rotate(45deg); box-shadow: 0 0 #555; } .navigation.active .menuToggle::after { transform: translateY(0px) rotate(-45deg); }
4. The required JavaScript to toggle CSS classes based on the menu state.
let menuToggle = document.querySelector(".menuToggle"); let navigation = document.querySelector(".navigation"); menuToggle.onclick = function () { navigation.classList.toggle("active"); };