checkout my YT channel for more videos.
Here is all the code used in the video.
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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="stylesheet.css" /> <title>Navigation | Web Component</title> </head> <body> <header> <nav> <h2 class="logo">BRAND</h2> <div class="burger"> <div class="top-bar"></div> <div class="middle-bar"></div> <div class="bottom-bar"></div> </div> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Services</a> <i class="fas fa-chevron-down"></i> <ul class="sub-menu"> <li><a href="#">React</a></li> <li><a href="#">Vue</a></li> <li><a href="#">Angular</a></li> <li><a href="#">Ember</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="cta-btn"><a href="#">Download</a></li> </ul> </nav> </header> <script src="app.js" defer></script> </body> </html> stylesheet.css:
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: rgb(27, 23, 37); --secondary-color: rgb(144, 136, 156); --bg-color: rgb(164, 153, 179); --text-color: rgb(241, 235, 235); } body { background: var(--bg-color); color: var(--primary-color); width: 100%; height: 100%; overflow-x: hidden; } a { text-decoration: none; font-size: 1.2rem; color: var(--primary-color); letter-spacing: 0.3px; } a:hover { color: var(--text-color); } header { width: 100%; height: 100%; } /* Desktop Nav */ header nav { display: flex; justify-content: space-between; align-items: center; width: 90%; margin: 20px auto; position: sticky; top: 20px; } header nav ul { display: flex; justify-content: space-between; align-items: center; width: 500px; list-style: none; position: relative; } header nav ul .sub-menu { position: absolute; top: 40px; left: 50px; max-width: 120px; display: flex; flex-direction: column; justify-content: center; align-items: start; background: var(--secondary-color); border-radius: 10px; display: none; } header nav ul .sub-menu:before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: var(--secondary-color); transform: rotate(45deg); } header nav ul .sub-menu li { padding: 10px; } .fa-chevron-down { cursor: pointer; } .cta-btn a { padding: 8px 20px; border-radius: 10px; color: var(--primary-color); background: var(--text-color); } .cta-btn a:hover { color: var(--text-color); background: var(--primary-color); } /* Mobile Navigation */ .burger { cursor: pointer; display: none; } .burger div { margin: 4px; } .burger .top-bar { background: var(--primary-color); width: 40px; height: 3px; border-radius: 5px; } .burger .middle-bar { background: var(--primary-color); width: 40px; height: 3px; border-radius: 5px; } .burger .bottom-bar { background: var(--primary-color); width: 40px; height: 3px; border-radius: 5px; } @media (max-width: 850px) { .burger { display: block; } header nav ul:not(.sub-menu) { position: absolute; top: 50px; right: 0px; flex-direction: column; width: 200px; height: 50vh; background: var(--secondary-color); } header nav ul { transition: transform 0.3s ease-in-out; border-radius: 10px; transform: translateX(150%); } header nav ul .sub-menu { position: absolute; top: 20%; left: -270px; background: rgb(118, 112, 128); } header nav ul .sub-menu:before { left: 115px; top: 20px; background: rgb(118, 112, 128); } .cta-btn { margin-bottom: 20px; } } .open { transform: translateX(0%); } app.js:
const openSubMenu = document.querySelector(".fa-chevron-down"); const subMenu = document.querySelector(".sub-menu"); openSubMenu.addEventListener("click", function () { if (subMenu.style.display !== "block") { subMenu.style.display = "block"; } else { subMenu.style.display = "none"; } }); // mobile nav const burger = document.querySelector(".burger"); const menu = document.querySelector("header nav ul"); burger.addEventListener("click", function () { menu.classList.toggle("open"); }); 
Top comments (1)
Great tips!