Home
Code Library
Templates
Contact Us
Hamburgers Nav Menu
Date
: February 9, 2024
Developed By:
Paul Baretto
Home
Burgerz
Hotdawgs
Pizzaz
Contact
View Source
HTML
CSS
HTML
Copy
<div class="nav-main"> <header class="nav-header "> <button class="hum-btn"> <div class="humber-img-holder"> <span class="top-bun"><img src="https://nuitwebtek.com/wp-content/uploads/2024/02/bread_top.svg" alt=""></span> <span class="veggie"><img src="assets/images/veggie.svg" alt=""></span> <span class="petty-01"><img src="assets/images/patty_1.svg" alt=""></span> <span class="cheese"><img src="assets/images/cheese.svg" alt=""></span> <span class="tomato"><img src="assets/images/tomato.svg" alt=""></span> <span class="petty-02"><img src="assets/images/patty_2.svg" alt=""></span> <span class="bottom-bun"><img src="assets/images/bread.svg" alt=""></span> </div> </button> <nav class="nav-links"> <ul> <li><a href="#" >Home</a></li> <li><a href="#" >Burgerz</a></li> <li><a href="#" >Hotdawgs</a></li> <li><a href="#" >Pizzaz</a></li> <li><a href="#" >Contact</a></li> </ul> </nav> </header> </div>
CSS
Copy
.nav-main { position: relative; height: 100vh; background-image: url(../images/nav-bg-lg.jpg); /* background-image: url(../images/bg-img-02.jpg); */ background-repeat: no-repeat; background-size: cover; background-position: center; --font-Lalezar: "Lalezar", sans-serif; } .nav-header { position: relative; overflow: hidden; height: 100vh; /* position: fixed; */ } .nav-header::before { position: absolute; content: ''; width: 100px; height: 100px; top: 16px; right: 16px; /* transform: scale(0); */ background-color: #00000094; border-radius: 50%; transition: 0.3s linear; transform-origin: center; /* transition-timing-function: linear; */ } .hum-btn-clicked.nav-header::before { transform: scale(40); } .hum-btn { position: absolute; /* position: fixed; */ right: 48px; top: 38px; cursor: pointer; z-index: 3; background-color: transparent; border: none; padding: 0; } .humber-img-holder { position: relative; display: grid; grid-template-columns: 100%; height: 50px; } .humber-img-holder span { position: absolute; display: inline-block; min-height: 13px; left: -44px; transition: 0.3s linear; } .humber-img-holder span:nth-child(1) { width: 50px; z-index: 5; } .humber-img-holder span:nth-child(2) { width: 51px; top: 14px; left: -45px; z-index: 4; } .humber-img-holder span:nth-child(3) { width: 51px; top: 18px; left: -44px; z-index: 3; } .humber-img-holder span:nth-child(4) { width: 44px; top: 24px; left: -43px; z-index: 2; } .humber-img-holder span:nth-child(5) { width: 50px; top: 22.3px; left: -43px; } .humber-img-holder span:nth-child(6) { width: 50px; top: 29px; left: -43px; } .humber-img-holder span:nth-child(7) { width: 51px; top: 37px; left: -43px; } /* onclick code */ .hum-btn-clicked .humber-img-holder span:nth-child(1) { transform: rotate(-10deg); } .hum-btn-clicked .humber-img-holder span:nth-child(2) { top: 17px; } .hum-btn-clicked .humber-img-holder span:nth-child(3) { top: 27px; transform: rotate(-12deg); } .hum-btn-clicked .humber-img-holder span:nth-child(4) { top: 38px; } .hum-btn-clicked .humber-img-holder span:nth-child(5) { top: 39px; transform: rotate(10deg); } .hum-btn-clicked .humber-img-holder span:nth-child(6) { top: 50px; transform: rotate(-3deg); } .hum-btn-clicked .humber-img-holder span:nth-child(7) { top: 60px; } .humber-img-holder span img { width: 100%; } .nav-links { display: flex; justify-content: center; align-items: center; height: 100%; visibility: hidden; overflow: hidden; transition: 0.4s ease-in; opacity: 0; } .hum-btn-clicked .nav-links{ visibility: visible; opacity: 1; } .nav-links ul { padding: 0; text-align: center; display: grid; row-gap: 18px; list-style: none; } .nav-links ul li a { position: relative; color: #fff; font-family: var(--font-Lalezar); font-weight: 400; font-size: 40px; text-decoration: none; text-align: center; /* z-index: 1; */ display: inline-block; overflow: hidden; /* margin:0; */ /* padding:0; */ } .nav-links ul li a::before { position: absolute; color: #F5A700; top: 0; left: 0; width: 0%; overflow: hidden; transition: all 0.5s; } .nav-links ul li:nth-child(1) a::before { content: 'Home'; } .nav-links ul li:nth-child(2) a::before { content: 'Burgerz'; } .nav-links ul li:nth-child(3) a::before { content: 'Hotdawgs'; } .nav-links ul li:nth-child(4) a::before { content: 'Pizzaz'; } .nav-links ul li:nth-child(5) a::before { content: 'Contact'; } .nav-links ul li a:hover::before { width: 100%; left: 0.0px; } @media only screen and (max-width:480px){ .nav-header::before{ width: 65px; height: 64px; top: 13px; right: 15px; } .hum-btn{ right: 22px; top: 26px; } .humber-img-holder span:nth-child(1){ width: 35px; } .humber-img-holder span:nth-child(2){ width: 37px; top: 7px; } .humber-img-holder span:nth-child(3){ width: 38px; top: 11px; } .humber-img-holder span:nth-child(4){ width: 31px; top: 16px; } .humber-img-holder span:nth-child(5){ width: 35px; top: 14.3px; } .humber-img-holder span:nth-child(6){ width: 37px; top: 19px; } .humber-img-holder span:nth-child(7){ width: 37px; top: 25px; } /* onclick code */ .hum-btn-clicked .humber-img-holder span:nth-child(2){ top: 9px; } .hum-btn-clicked .humber-img-holder span:nth-child(3){ top: 17px; } .hum-btn-clicked .humber-img-holder span:nth-child(4){ top: 25px; } .hum-btn-clicked .humber-img-holder span:nth-child(5){ top: 25px; } .hum-btn-clicked .humber-img-holder span:nth-child(6){ top: 33px; } .hum-btn-clicked .humber-img-holder span:nth-child(7){ top: 39px; } }
New
×