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!