Animated navigation bar with flex and clip-path is a great responsive navigation bar that switches to hamburger navigation when maximum screen width is reached: defaults are 800px. Clicking on the hamburger will turn the toggle button into a full screen navigation menu with the CSS clip-path.
morphing fullscreen hamburger menu, hamburger menu animation codepen, hamburger menu css responsive, css menu animation effects, morphing hamburger menu
Rotating Circular Hamburger Menu with jQuery and CSS3
How to make use of it:
1. Create the HTML for the responsive navbar.
<nav> <!-- Site Logo --> <div class="logo"> <img src="logo.svg" alt="Logo Image"> </div> <!-- Hamburger Button --> <div class="hamburger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <!-- Nav List --> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><button class="login-button" href="#">Login</button></li> <li><button class="register-button" href="#">Register</button></li> </ul> </nav>
2. The foremost styles for the navbar.
/* main */ nav{ height: 6rem; width: 100vw; background-color: #131418; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2); display: flex; position: fixed; z-index: 10; } / LOGO */ .logo{ padding:1vh 1vw; text-align: center; } .logo img { height: 5rem; width: 5rem; } /* nav links */ .nav-links{ display: flex; list-style: none; width: 88vw; padding: 0 0.7vw; justify-content: space-evenly; align-items: center; text-transform: uppercase; } .nav-links li a{ text-decoration: none; margin: 0 0.7vw; } .nav-links li a:hover { color: #61DAFB; } .nav-links li { position: relative; } .nav-links li a::before { content: ""; display: block; height: 3px; width: 0%; background-color: #61DAFB; position: absolute; transition: all ease-in-out 250ms; margin: 0 0 0 10%; } .nav-links li a:hover::before{ width: 80%; }
3. Stying for small screens.
@media screen and (max-width: 800px){ nav{ position: fixed; z-index: 3; } .hamburger{ display:block; position: absolute; cursor: pointer; right: 5%; top: 50%; transform: translate(-5%, -50%); z-index: 2; transition: all 0.7s ease; } .nav-links{ position: fixed; background: #131418; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(50px at 90% -20%); -webkit-clip-path: circle(50px at 90% -10%); transition: all 1s ease-out; pointer-events: none; } .nav-links.open{ clip-path: circle(1000px at 90% -10%); -webkit-clip-path: circle(1000px at 90% -10%); pointer-events: all; } .nav-links li{ opacity: 0; } .nav-links li:nth-child(1){ transition: all 0.5s ease 0.2s; } .nav-links li:nth-child(2){ transition: all 0.5s ease 0.4s; } .nav-links li:nth-child(3){ transition: all 0.5s ease 0.6s; } .nav-links li:nth-child(4){ transition: all 0.5s ease 0.7s; } .nav-links li:nth-child(5){ transition: all 0.5s ease 0.8s; } .nav-links li:nth-child(6){ transition: all 0.5s ease 0.9s; margin: 0; } .nav-links li:nth-child(7){ transition: all 0.5s ease 1s; margin: 0; } li.fade{ opacity: 1; } }
4. Style & animate the hamburger button.
.hamburger div{ width: 30px; height:3px; background: #f2f5f7; margin: 5px; transition: all 0.3s ease; } .hamburger{ display: none; } .toggle .line1{ transform: rotate(-45deg) translate(-5px,6px); } .toggle .line2{ transition: all 0.7s ease; width:0; } .toggle .line3{ transform: rotate(45deg) translate(-5px,-6px); }
5. The most important JavaScript to activate the morph effect.
const hamburger = document.querySelector(".hamburger"); const navLinks = document.querySelector(".nav-links"); const links = document.querySelectorAll(".nav-links li"); hamburger.addEventListener('click', ()=>{ //Animate Links navLinks.classList.toggle("open"); links.forEach(link => { link.classList.toggle("fade"); }); //Hamburger Animation hamburger.classList.toggle("toggle"); });
Responsive Navbar With Morph Effect, Animated Navbar using Flex Plugin/Github, hamburger menu css responsive codepen
See Demo And Download
Official Website(hitensharma): Click Here
This superior jQuery/javascript plugin is developed by hitensharma. For extra Advanced Usages, please go to the official website.
Be First to Comment