Hello Everyone today I will be showing how to create a Meganav with HTML, CSS, and JavaScript.
Let's get Started...
Demo -
HTML-
<header>
<nav>
<ul class="meganav">
<li class="meganav--item">
<a href="#" class="meganav--link">Home</a>
</li>
<li class="meganav--item">
<a href="#" class="meganav--link">Frontend</a>
<div class="meganav--content">
<img src="image-link" />
<ul class="meganav--content__items">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">REACT JS</a></li>
<li><a href="#">NEXT JS</a></li>
</ul>
</div>
</li>
<li class="meganav--item">
<a href="#" class="meganav--link">Backend</a>
<div class="meganav--content">
<img src="image-linkg" />
<ul class="meganav--content__items">
<li><a href="#">NODE JS</a></li>
<li><a href="#">EXPRESS JS</a></li>
<li><a href="#">MONGO DB</a></li>
<li><a href="#">FIREBASE</a></li>
<li><a href="#">MY SQL</a></li>
</ul>
</div>
</li>
<li class="meganav--item">
<a href="#" class="meganav--link">Home</a>
</li>
<li class="meganav--item">
<a href="#" class="meganav--link">Contact</a>
</li>
</ul>
</nav>
</header>
- I have created a Navbar with nav items
- There are 2 items where we will be showing meganav, frontend and backend links.
- Both Frontend and Backend links have a sibling div element which holds the meganav content.
- What we will do is to add a hover effect to the ".meganav--item" class and change the opacity of ".meganav--content" with it. You will get this part in CSS section
SCSS -
- I am using SASS just for nesting classes, all the code here is pure CSS.
header {
position: relative;
}
.meganav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
background-color: black;
&--link {
color: white;
}
&--item {
padding: 1rem 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
&--content {
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 90%;
height: 200px;
border-radius: 10px;
box-shadow: 2px 2px 50px 2px #000000;
padding: 1rem 1.5rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
background-color: white;
& > img {
width: 200px;
height: 100px;
}
&__items {
width: 50%;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
& > li > a {
color: black;
}
}
}
&--item:hover &--content {
opacity: 1;
visibility: visible;
top: 100%;
}
}
- The ".meganav--content" is made position absolute, relative to header which is positioned relative.
- "&" this symbol here is the parent selector in SASS, what it does is take the parent classname and append it to the text after it. For example "&--item:hover &--content" means ".meganav--item:hover .meganav--content"
- "&--item:hover &--content" for this part, what is happening here is that when the meganav item is hovered, we will change the opacity and visibility of ".meganav--content" to 1 and visible, making it visible on hover only."top:100%" is just for transition effect.
Responsive Part -
@media screen and (max-width: 600px) {
.meganav {
flex-direction: column;
&--content {
position: static;
display:none;
width: 100%;
height: 250px;
margin: 10px 0 0 0;
&__items {
width: 100%;
flex-direction: column;
align-items: center;
padding: 1.5rem;
}
& > img {
display: none;
}
}
}
.show {
display: flex;
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
- We are just making the "meganav--content" to position static and hiding it using "display:none".Also on mobile device we are hiding the meganav--content images, only showing the links
- ".show" class is used to toggle the meganav links using javascript.
JavaScript -
const meganav = document.querySelectorAll(".meganav--link");
if (window.innerWidth < 600) {
Array.from(meganav).forEach((item) => {
item.addEventListener("click", (e) => {
const target = e.target;
if (target.nextElementSibling !== null) {
target.nextElementSibling.classList.toggle("show");
}
});
});
}
- We are selecting all the links with ".meganav--link" class and attaching an click event listener to them.
- When any link is clicked, it will check whether it has a next sibling element or not, if it has, toggle the "show" class to that sibling element which is the meganav--content here
- Also using "window.innerWidth", we will apply this toggle effect only when the viewport is less than 600px.
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm
https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56
https://dev.to/shubhamtiwari909/swiperjs-3802
https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej
Top comments (5)
This is not bad but it's missing some checks:
just my 2cents
Actually I was just Trying to Get the logic of MegaNav thing Just the Hover effect for it and On mobile, it becomes a button toggle that's it
I hide the images because I am lazy to work that part, also the styling
Honestly for mobile Part i didn't make any effort, as you can see there is no toggle effect with Hamburger icon for Main Navbar on mobile
I was just trying to Show how it can be done, Rest of the stylings and content People can handle as they like
For class names , usually on Bigger projects,it is recommended to use class names and avoid Styling Tags directly in CSS
Also for Array.from() , querySelectorAll returns a NodeList, to convert it into Array for iteration,i used this array method
but you don't have to, you can do forEach on the NodeList just the same. The Array.from() is an unnecessary step.
Once I got an error that the NodeList is not iterable, there i started using Array.from() to avoid that error again