I designed some CSS rules for a responsive navigation menu which allows me to add sub-menus, but each sub-menu requires the creation of new CSS selectors. I want to style the menu and submenus once so that a beginner user does not need to add any new CSS selectors in order to create nested submenus.
I want the submenus to open as shown in this link (watch the first 34 seconds of the video).
const MenuButton = document.querySelector(".nav-menu-button");
const Navigation = document.querySelector(".nav");
let MenuOpen = false;
MenuButton.addEventListener("click", () => {
switch (!MenuOpen) {
case true:
MenuButton.classList.add("open");
Navigation.setAttribute("data-visible", "true")
MenuOpen = true;
break;
default:
MenuButton.classList.remove("open");
Navigation.setAttribute("data-visible", "false")
MenuOpen = false;
break;
}
});@font-face {
font-family: "Roboto";
font-style: normal;
src: url("../Fonts/Roboto.ttf") format("truetype");
}
* {
font-family: "Roboto";
font-size: 20px;
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl;
}
.logo {
z-index: 10;
position: relative;
}
.header {
float: center;
background: linear-gradient(to top, #9472ff 2%, #3d00ff 98%) center/100%;
border-radius: 10px;
box-shadow: 1px 2px 4px #000000;
color: white;
width: 100%;
height: 100px;
padding-left: 0px;
padding-right: 10px;
padding-top: 40px;
text-align: right;
text-shadow: 0px 2px 2px #000000;
}
.nav {
list-style: none;
display: flex;
gap: 24px;
}
.nav li a {
text-decoration: none;
font-size: 28px;
color: #f3b238;
display: inline-block;
width: 100%;
position: relative;
}
.nav li a:hover {
color: #fff;
}
.nav li a::after {
content: "";
width: 0%;
height: 4px;
background-color: #fff;
position: absolute;
left: 0px;
bottom: -5px;
border-radius: 5px;
transition: all 0.7s ease;
}
.nav li a:hover::after {
width: 100%;
}
@media (max-width: 769px) {
.nav {
position: fixed;
inset: 0;
background: linear-gradient(to top, #9472ff 2%, #3d00ff 98%) center/100%;
flex-direction: column;
align-items: center;
/*padding-top: 150px;*/
padding-top: 70px;
transform: translateX(100%);
transition: all 0.7s ease;
}
.nav[data-visible=true] {
transform: translateX(0%);
}
.nav-menu-button {
position: absolute;
display: flex;
z-index: 10;
justify-content: center;
align-items: center;
height: 80px;
width: 80px;
right: -10px;
top: -10px;
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.nav-menu-line {
width: 50px;
height: 6px;
background-color: #d0fd66;
border-radius: 5px;
transition: all 0.7s ease-in-out;
}
.nav-menu-line::before,
.nav-menu-line::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #d0fd66;
border-radius: 5px;
transition: all 0.7s ease-in-out;
}
.nav-menu-line::before {
transform: translateY(-16px);
}
.nav-menu-line::after {
transform: translateY(16px);
}
.nav-menu-button.open .nav-menu-line {
transform: translateX(-50px);
background: transparent;
}
.nav-menu-button.open .nav-menu-line::before {
transform: rotate(45deg) translate(35px, -35px);
}
.nav-menu-button.open .nav-menu-line::after {
transform: rotate(-45deg) translate(35px, 35px);
}
}<div class="logo" role="img">
<img src="Images/Logo.png" height="100" style="width:auto; float:left;" />
</div>
<header class="header">
<div class="nav-menu-button">
<div class="nav-menu-line"></div>
</div>
<nav class="nav" data-visible="false" role="navigation">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Goods</a>
</li>
</nav>
</header>
