Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Advanced CSS Multi Level Dropdown Menu

Ashfaq Ahmed by Ashfaq Ahmed
December 18, 2019
in CSS Navigation
2
Advanced CSS Multi Level Dropdown Menu
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

I’ve been playing with a design that required an attractive seeking advanced multi level dropdown menu using CSS. So today, I decided to write a tutorial and show you such menu.

I also want to remind you that, I’ve created a similar kind of menu before which has the multi-level navigation bar with a dropdown that based on CSS only.

But now, I will build the menus that are more specific to advance level mega dropdown menus. If you are planning to develop an e-commerce website then this tutorial surely helps you. I will show you how to develop the long-lasting mega menu.

We will make 4 level submenus using CSS and bit of javascript. But, you will not be limited to level 4 and can easily create unlimited level by just copy and past few lines of code.

I will also explain your process of doing so. The process will be easier than you may think and you don’t need to write any more code.

Our excellent drop-down menu works well on all major browsers and mobile devices. This menu is straightforward and easy to implement on your website.

All you need to copy a few lines of CSS and JavaScript and then add HTML unordered list. The unordered list will look like any other simple CSS menu or navigation. We define it as ul, li, and anchor link. The other thing, We will use CSS3 animations on hover that gives a nice look and feel.

How to Create CSS Multi Level Dropdown Menu

Let’s start with the HTML Structure for our dropdown menu. We are going to use a cleanly nested list for this purpose. The list of links is always a great option to choose.

You should avoid using any generator because they are not SEO friendly and doesn’t work well in browsers that have JavaScript disabled.

You can see the markup below have a series of nested ul and li. It’s simple hierarchical navigation which consists of multiple levels. To get identified, we will use the nav HTML5 element with an ID dm_multiLevel

<nav class="dm_multiLevel fixed">
<ul>

<li><a href="#">Shop <i class="fa fa-angle-down"></i></a>
  
  <ul class="subMenu">
     <li><a href="#">Electronic</a></li>
     <li><a href="#">Fashion &nbsp;<i class="fa fa-angle-right"></i></a>
      <ul class="subMenu">
        <li><a href="#">Men &nbsp;<i class="fa fa-angle-right"></i></a>
            
            <ul class="subMenu">
                <li><a href="#">Shirts</a></li>
                <li><a href="#">Jeans</a></li>
            </ul>
            
        </li>
        <li><a href="#">Women &nbsp;<i class="fa fa-angle-right"></i></a>
          <ul class="subMenu">
            <li><a href="#">Shoes</a></li>
            <li><a href="#">Accessories &nbsp;<i class="fa fa-angle-right"></i></a>
              
              <ul class="subMenu">
                <li><a href="#">Jewellery</a></li>
                <li><a href="#">Watches</a></li>
                <li><a href="#">Sunglasses</a></li>
              </ul>
              
            </li>
          </ul>
        </li>
        
      </ul>
    </li>
    <li><a href="#">Furniture</a></li>
  </ul>
  
</li>

</ul>
</nav>

The above HTML Structure base on 4 levels of the drop-down menu. If you want to fix the menus at the top so they come accord while the user scrolls the page then you can simply add the class fixed. If you want to add a dropdown to any hyperlink, you simply just need to add the HTML code like this way and forget about any changes in CSS or JavaScript.

<li><a href="#">Men &nbsp;<i class="fa fa-angle-right"></i></a>
    <ul class="subMenu">
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Jeans</a></li>
    </ul>
</li>

The CSS Style for Dropdown Menu

Let’s get started with styling and first of all, we need to style the nav HTML5 element that has class dm_multiLevel. We will do add font size, height, and background color as per our need. The width should be 100%;

.dm_multiLevel {
	width: 100%;
	font-size: 1.1rem;
	height: 3.6rem;
	background: #763568;
}

If you want to add a sticky menu bar then you need to set the position to fixed and the value of top and left will be zero. Also, make sure to add z-index: 1000;

.dm_multiLevel.fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

Now we start with unordered list ul and we will do zero the default padding and margin. To align the menu centered, we will do use box-sizing and vertical alignment.

.dm_multiLevel ul{
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	border: none;
	font: inherit;
	vertical-align: baseline;	
}

Here’s we do some basic CSS for unordered list li and hyperlink. It only contains the color, background, and transition. We will continue to work on drop-down menu styles.

.dm_multiLevel ul li{
  position: relative;
  display: inline-block;
}
.dm_multiLevel>ul>li {
  float: left;
}
.dm_multiLevel a {
  display: inline-block;
  padding: 1.2rem 1.8rem;
  line-height: 1.2rem;
  color: #FFF;
  transition: .2s ease-out;
}
.dm_multiLevel a:hover, li.active{
  background: #5B3256;
}

Finally, we need to style the submit and we added the class submenu to ul. We set the position absolute and the value of top will be 100% whereas the left will be zero. The absolute position is necessary because it positioned the elements according to their containing blocks.

.dm_multiLevel ul.subMenu {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 0;
  width: 170%;
}
.dm_multiLevel ul.subMenu ul.subMenu{
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
}

The li and hyperlink of subMenu need some background and border so they look nicer.

.dm_multiLevel ul.subMenu li {
  width: 100%;
  background: #5B3256;
}
.dm_multiLevel ul.subMenu li a {
  width: 100%;
  padding: 1rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  border-top: 1px solid rgba(255,255,255,.1);
}

In the end, We need to see some background color for hover and active state of the multi-level menu.

.dm_multiLevel ul.subMenu li a:hover, 
.dm_multiLevel ul.subMenu li.active>a {
  background: #763568;
  padding-left: 1.1rem;
}

The JavaScript for Menu

We are not going to add tons of javascript. We need to add a few lines of code to hide and show the menu. First, we simply need to hide the submenu by using the hide(); javascript function. Make sure you should define the document ready function and place all the code inside it.

$( document ).ready(function() {
    // Hide SubMenus.
    $(".subMenu").hide();
});

When hovered the menu, we need to show the sub menu and we do it by using of hover function. The slide down function will be used to show the sub menu and the toggle class allows to activate the dropdown menu.

// Shows SubMenu when it's parent is hovered.
$(".subMenu").parent("li").hover(function () {
  $(this).find(">.subMenu").not(':animated').slideDown(300);
  $(this).toggleClass("active ");
});

Let’s hide and slide up the menu when the user leaves the mouse, and we do it by using simple mouse leave function.

// Hides SubMenu when mouse leaves the zone.
$(".subMenu").parent("li").mouseleave(function () {
  $(this).find(">.subMenu").slideUp(150);
});

The final line of code to prevent scroll to top when clicking at anchor.

// Prevents scroll to top when clicking on achor 
$("a[href=\"#\"]").click(function () {
  return false;
});

We have done with the building excellent advanced CSS based multi level dropdown menu, but if you can’t get this work for any reason, you can find the demo link or download the source code.

The demo included the three different variations such as sticky, regular and footer. If you still have the issue, you can leave comments and let us know. If you got work this pretty well then also leave comments about your thoughts. We appreciate if you share this with your friends on social accounts.

Tags: Dropdown Menu
Demo Download
Previous Post

Animated CSS Slide Up and Slide Down Menu

Next Post

Pure CSS Animated Dropdown Menu

Next Post
Pure CSS Animated Dropdown Menu

Pure CSS Animated Dropdown Menu

Comments 2

  1. John says:
    6 months ago

    Once my at my selection on the “Advanced CSS Multi Level Dropdown Menu” what code is used to direct it a Document or PDF or .JPG” for view the end result of the menu selections.
    Thank you for the menu and info

    Reply
    • Muhammad Asif says:
      6 months ago

      Hi John!
      You can link the Document, PDF or .JPG file in the navigation hyperlinks as follow:

      <ul class="subMenu">
         <li><a href="path/to/file.pdf">Your PDF file </a></li>
      </ul>
      

      The href is the hyperlink reference where you can link your pdf files, images, or any other document to make them accessible from the navigation menu.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
3D Cube Image Rotator using CSS3 Animation

3D Cube Image Rotator using CSS3 Animation

August 21, 2020
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.