DEV Community

Cover image for Mega Navbar - HTML/CSS
Mysterio
Mysterio

Posted on

Mega Navbar - HTML/CSS

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>
Enter fullscreen mode Exit fullscreen mode
  • 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%;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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");
      }
    });
  });
}
Enter fullscreen mode Exit fullscreen mode
  • 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)

Collapse
 
ravavyr profile image
Ravavyr

This is not bad but it's missing some checks:

  • How this looks and scales from desktop down to tablet down to mobile. Would you use different images for desktop vs mobile [a figure perhaps instead of just img]
  • How does the text wrap for longer amounts of text, some clients like long links with multiple words in their mega menus
  • Image tags are missing ALT attributes
  • You hide images on mobile, some clients may want to keep them, would there be a solution for this, perhaps just fit them into the space above the links?
  • On mobile a scrollbar is added when you open the mega nav, this should be mitigated by having it always present, so it doesn't jump the page when you tap it
  • The markup and css can be simplified by relying on tags within the nav parent versus multiple levels of class names
  • For the JS "Array.from(meganav).forEach(" can just be "meganav.forEach("

just my 2cents

Collapse
 
shubhamtiwari909 profile image
Mysterio

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

Collapse
 
shubhamtiwari909 profile image
Mysterio

Also for Array.from() , querySelectorAll returns a NodeList, to convert it into Array for iteration,i used this array method

Collapse
 
ravavyr profile image
Ravavyr

but you don't have to, you can do forEach on the NodeList just the same. The Array.from() is an unnecessary step.

Thread Thread
 
shubhamtiwari909 profile image
Mysterio

Once I got an error that the NodeList is not iterable, there i started using Array.from() to avoid that error again