An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Slashdot
- Mashable
- Web Designer Wall
- Just Creative
- TutsPlus - Design
- Crazy Leaf Design
- Reencoded
- Line 25
- Freelance Switch
- The Verge
Help Webnuz
Referal links:
October 27, 2021 10:13 am GMT
Original Link: https://dev.to/adwait12345/responsive-navbar-toggle-menu-htmlcss-javascript-1mfp
Responsive Navbar & Toggle menu |HTML,CSS & JavaScript only in few minutes
Hi folks, this is the complete tutorial for how to built you own responsive web design according to the size of devices , I have done here with navigation bar and simply understanding my tutorial you will able to built complete responsive websites, and here I also built toggle menu with help of javascript, I included it for mobile size devices. Please do checkout my video. And don't forget to give remark if it was helpful or not or what improvements should I do.
Thank-you
I Recommend you to watch above tutorial rather than just copying code below ! Happy coding </>
Resource Code:
1)index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Menu</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="screen and (max-width:1080px)" href="phone.css" > <link rel="stylesheet" media="screen and (max-width:875px)" href="small.css" > </head><body id="buddy"> <section> <nav class="nav-main"> <div class="logo"><img src="./Bocadmium-logos_black2.png" alt=""></div> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">About Us</a></li> <li> <a href="#">Gallery</a></li> <li> <a href="#">Contact</a></li> </ul> </nav><div class="toggle"> <button id="hit"> <svg viewBox="0 -2 100 80" width="40" height="30"style=" overflow: visible; "> > <rect id="change0"width="75" height="10" fill="#2666C1"></rect> <rect id="change" y="30" width="75" height="10"fill="#2666C1"></rect> <rect id="change1" y="60" width="75" height="10"fill="#2666C1"></rect> </svg> </button></div></section><section> <div id="mapid"></div></section></body><script src="main.js"></script></html>2)style.css
body{ background-color: #f1f1f1;}.nav-main{ position: fixed; top: 0; left: 0; width: 100%; height:14vh; background-color: #fff; display: flex; flex-wrap: wrap; z-index: 1; justify-content: center; align-items: center;}.logo img { width: 349px; height: 110px; position: relative; left: -1px; /* border-radius: 100%; */ top: -5px;}.nav-main ul{ position: relative; display: flex; flex-wrap: wrap; padding: 15px; top: -5px;}.nav-main ul li{list-style: none;line-height: 0px;padding: 10px 55px 0 0;}.nav-main ul li a{ display: block; height: 200%; padding: 0 10px; text-transform: uppercase; text-decoration: none; color: #111; font-family: arial; font-size: 16px;}3)phone.css
body{ background-color: #f1f1f1;}.logo img { width: 289px; height: 96px; position: relative; top: -16px; left: -129px; }.logo { width: 100px; height: 100px; position: absolute; } .nav-main ul { display: flex; position: absolute; flex-wrap: wrap; padding: 15px; justify-content: center; align-items: baseline; top: 70px;}.nav-main{ position: fixed; top: 0; left: 0; width: 100%; height:20vh; background-color: #fff; display: flex; flex-wrap: wrap; z-index: 1; justify-content: center; align-items: center;}4)small.css
.logo { width: 100%; height: 70px; position: absolute; display: flex; justify-content: start; align-self: center; } .logo img { display: block; width: 223px; height: 65px; position: absolute; left: -9px; top: 2px; } .nav-main ul { height: 40vh; width: 200px; position: fixed; top: -1px; right: 10px; background-color: whitesmoke; border-radius: 10px; visibility: hidden; box-shadow: none; } .nav-main ul li { position: relative; left: 30px; top: 10px; } .nav-main{ position: fixed; top: 0; left: 0; width: 100%; height:8vh; background-color: #fff; display: flex; flex-wrap: wrap; z-index: 1; justify-content: center; align-items: center;}.toggle button { position: absolute; right: 10px; z-index: 1; top: 17px; background: transparent; border: none;}5)main.js
console.log("hi there");let togglestatus = false;let toggle = document.getElementById('hit');let element = document.querySelector('.nav-main ul')toggle.addEventListener('click',()=>{ if(togglestatus === false) { document.getElementById('change').setAttribute('transform','rotate(45),translate(0)') document.getElementById('change').setAttribute('y','0') document.getElementById('change1').setAttribute('transform','rotate(-45),translate(-45)') document.getElementById('change1').setAttribute('y','30') document.getElementById('change0').setAttribute('transform','rotate(-45),translate(-40)') document.getElementById('change0').setAttribute('y','30') } else if (togglestatus === true){ document.getElementById('change').setAttribute('transform','rotate(0),translate(0)') document.getElementById('change').setAttribute('y','30') document.getElementById('change1').setAttribute('transform','rotate(0),translate(0)') document.getElementById('change1').setAttribute('y','60') document.getElementById('change0').setAttribute('transform','rotate(0),translate(0)') document.getElementById('change0').setAttribute('y','0') } if(togglestatus === false){ element.style.visibility="visible"; element.style.boxShadow= "0 10px 25px rgba(92, 99, 105, .2)"; togglestatus = true; } else if(togglestatus === true){ element.style.visibility="hidden"; togglestatus = false; }});Original Link: https://dev.to/adwait12345/responsive-navbar-toggle-menu-htmlcss-javascript-1mfp
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To