Multi level dropdown menu css

Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS.

Hello Friends, Today in this post, we’ll learn How to Create a Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS. Recently I have shared a Responsive Footer Design Using Bootstrap 4. But our today’s topic is Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS.

If Are you Looking for creative ways to design your navigation menus? Then you Have Come to the Right Place because In this article I’ll like to share inspiration on Responsive Mega Menu With Dropdown Menu styles and effects with you. Use this Responsive Mega Menu With Dropdown Menu in your next project where you want to show a Responsive Mega Menu With Dropdown Menu

Responsive Mega Menu With Dropdown Menu is the most popular and interesting modern web design. A responsive menu that takes up the entire screen when expanded. The menu usually activated by clicking or touching the hamburger button. responsive Mega Menu With Dropdown Menu gives you the power to overlay and animate one screen on top of another.

It can simulate modal windows, dropdown navigation menus, and other on-screen prompts, all without leaving your current screen. So in this post, I will create a Responsive Mega Menu With Dropdown Menu Menu to find inspiration for your web design project. And now I’m going to create an attractive but easy Responsive Mega Menu With Dropdown Menu using Html5 CSS3.

As you all already know full-page navigation menu, that replaces the current content by pushing it off the screen. A website menu is a list of linked items that help in navigating between the different pages or sections of a website. Use this hamburger menu to Responsive Mega Menu With Dropdown Menu in your next web project.

In this Article firstly, on the webpage, there is only the menu button on the top right corner and when you click on that button then the background flow from that corner then shows the navigation links. There is also a background animation when you hover on a particular menu item. This design is fully created on only HTML, CSS.

Источник

Create multi-level drop down menu with HTML and CSS3

Learn to create ‘multilevel drop down menu using HTML and CSS3‘ in easy steps. The CSS3 is used for a bit animation as well. Though you can customize it as per your need.

Multilevel drop-down menu can be very handy when there are many important links and all needed to be in main navigation bar.
For example, If your website offers many services, then you may like to place all your services under ‘Services’ menu item ,

Like this:
Services
— Logo Designing
— Banner Designing
— 2D Graphic Designing
— 3D Graphic Designing
— . . .
— . . .
— . . .
— Web Designing
— and so on..

Though there is no such rule, for easy user-interface we should do this. First of all, create a ‘nav.html’ and ‘nav.css’ in a directory — myFirstMenu.

We will be using the list for creating the structure for the drop -down menu.

HTML Code for our drop-down menu.

As you have noticed there are icons in menu items. We have used ‘Font-awesome’ CDN for the icons. You may remove it if you don’t need the icons.

This is how it looks when we run it in the browser.

Styling drop-down menu with CSS

The basic CSS for the drop-down menu to arrange it horizontally.

/*HTML and CSS only multilevel drop down menu*/ *, html < margin: 0px; padding: 0px; font-family: sans-serif; >a < text-decoration: none; /*Remove underline on anchors*/ >ul < list-style: none; /* Rmove list styles*/ >/*-- parent nav--*/ .navContainer < background: #16acff; padding: 5px; >.navContainer nav < max-width: 920px; margin: auto; >.navContainer nav >ul >li

Before we proceed, we will design our anchors and icons first.

Now moving forward to design the first-level drop down menu

As we can see all our anchors in parent and dropdown child has been designed. Now we will simply hide all the drop-down menu. To do that we modify previously added CSS and do the same for second and third level drop down menu —

Adding display: none in the previous CSS

nav >ul >li >ul < position: absolute; border: 1px solid #16acff; display: none >nav >ul >li >ul >li >ul, nav >ul >li >ul >li >ul>li>ul

Now, we have set all the drop down level menus to display:none . Now we have to show them when we hover the particular menu item. To do so we write some more css

/*-- Display on hover--*/ nav >ul >li:hover >ul, nav >ul >li >ul >li:hover >ul, nav >ul >li >ul >li>ul>li:hover ul

So, we have got the desired behaviour of our multi-level drop-down menu. But we need to set little bit spacing and alignment from the top for our second and third level menu.

All set. We have successfully created our multi-level drop-down menu.

CSS3 and animation

Now it is time to add some CSS3 effects and animation to make it more good looking.

First, we will design our parent menu items on hover.

nav >ul >li:after < content: ''; height: 2px; width: 2px; background: #000; color: #fff; opacity: 0; bottom: 0px; left: 0px; position: absolute; >nav >ul >li:hover:after

Now, we will use CSS3 keyframe animation to add effects to the deep level menu.

/*-- Animation--*/ @keyframes threeD < 0% < transform: perspective( 400px) rotateY( 0deg); opacity: 0; left: 150%; top: 150%; >20% < transform: perspective( 400px) rotateY( -45deg); opacity: 0.2; left: 140%; top: 140%; >40% < transform: perspective( 400px) rotateY( -45deg); opacity: 0.4; left: 130%; top: 130%; >60% < transform: perspective( 400px) rotateY( -45deg); opacity: 0.6; left: 120%; top: 120%; >80% < transform: perspective( 400px) rotateY( -45deg); opacity: 0.8; left: 110%; top: 110%; >100% < transform: perspective( 400px) rotateY( -45deg); left: 100%; top: 100%; opacity: 1; >>

Now we will add the animation name to our deep level drop-down menu. Simply add the animation name where we have used display:none above.

nav >ul >li >ul >li >ul, nav >ul >li >ul >li >ul>li>ul < position: absolute; left: 100%; width: 140px; top: 0px; display: none; z-index: 2; border: 1px solid #16acff; /* animation name */ -webkit-animation: threeD .1s; /* Chrome, Safari, Opera */ animation: threeD .1s; >

It is not recommended to use the specificity to select the deep level of elements as used in above example. We can simply add the classes for selecting and designing that element. So, the classes are already added in HTML markup. Just use those classes to create the same menu and learn.

Gautam Kumar

Editor, Total Posts: 50 , Connect —

About : Front-end Developer, UI/X, Tech Enthusiast and a Keen Gardener know more

Источник

Multi-Level Responsive Dropdown Menu using css

Today we are going to see how to create multilevel responsive dropdown menu using pure css and html. We already seen how to create responsive one step dropdown menu and responsive menu without any dropdown menu. Now we are going to see how to create multilevel dropdown menu with the help of css.

Most of the websites wants this type of multilevel dropdown menu because lot of navigation having the lot of sub categories so we need this types of multi-level drop down menu to solve this issue. The below example shows responsive dropdown menu. You can view the live demo using the demo button and also download the full code here.

In this navigation bar is displayed as a accordion type menu in Mobile devices or small devices. The dropdown menu consist small down arrow button to indicate the dropdown menu. I hope this is very useful.

Html code for Multilevel responsive dropdown Menu

Css for Multilevel dropdown Navigationbar:

menu margin:0;
padding: 0;
background-color: #bc1e2d;
>

menu:after content:»»;
display:table;
clear:both;
>

menu ul float: right;
padding:0;
margin:0;
list-style: none;
position: relative;
>

menu ul li margin: 0px;
display:inline-block;
float: left;
>

menu a display:block;
padding:14px 20px;
color:#fff;
font-size:17px;
text-decoration:none;
>

menu a:hover background-color:none;
color:#fff;
>

menu ul ul display: none;
position: absolute;
top: 48px;

menu ul li:hover > ul display:inherit;
>

menu ul ul li width:170px;
float:none;
display:list-item;
position: relative;
border-bottom: 1px solid #EB8E96;
background-color: #B52F3C;
>

menu ul ul ul li position: relative;
top:-60px;
left:170px;
background-color: #B52F3C;
>

@media all and (max-width : 768px)

.toggle + a,
.menu display: none;
>

.toggle display: block;
background-color: #86151F;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
border:none;
>

.toggle:hover background-color: #DC4E5B;
>

[id^=drop]:checked + ul display: block;
>

menu ul li display: block;
width: 100%;
>

menu ul ul .toggle,
menu ul ul a padding: 0 40px;
>

menu ul ul ul a padding: 0 80px;
>

menu a:hover,
menu ul ul ul a background-color: #C34854;
>

menu ul li ul li .toggle,
menu ul ul a,
menu ul ul ul a padding:14px 20px;
color:#FFF;
font-size:17px;
>

menu ul li ul li .toggle,
menu ul ul a background-color: #BF3441;
>

menu ul ul float: none;
position:static;
color: #ffffff;
>

menu ul ul li:hover > ul,
menu ul li:hover > ul display: none;
>

menu ul ul li display: block;
width: 100%;
>

menu ul ul ul li position: static;

>

@media all and (max-width : 330px)

menu ul li display:block;
width: 94%;
>

Источник

Multi Level Dropdown Menu on Hover with CSS and jQuery

Create multi level dropdown menu on hover with CSS and jQuery to navigate site’s content more easily.

Plugin Preview

Plugin Overview

Plugin:	Multi-Level-Dropdown-Menu
Author:	saeedfouda
Licence:	MIT Licence
Published:	June 16, 2023
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	3 KB

How to Create Multi Level Dropdown Menu on Hover :

1. Load the jQuery and include all the necessary assets into your HTML page for creating multi level dropdown menu.

2. Create HTML structure for menu like below and add your links into it.

Related Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

Popular

• 65+ Login Page in HTML with CSS Code Sample Simple to Difficult — 642,361 views
• 25+ Best JavaScript Shopping Cart Examples with Demo — 130,326 views
• Bootstrap Multiselect Dropdown with Checkboxes — 116,975 views
• Bootstrap 5 Buttons with Icon and Text Tutorial & Demo — 89,611 views
• 19+ Bootstrap Select Dropdown with Search Box Tutorial & Examples — 80,554 views
• Bootstrap Vertical Menu with Submenu on Click — 64,199 views
• 99+ Social Media Buttons HTML Code Sample & Tutorial — 61,977 views
• Bootstrap 5 Sidebar Menu with Submenu Collapse/Hover Tutorial Demo — 61,204 views
• Bootstrap 4 Modal Popup Login Form Tutorial & Demo — 57,355 views
• 19+ Bootstrap 5 Mega Menu Responsive/Drop Down Examples — 49,972 views

Free Web Design Code & Scripts — CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners. find out more.

CodeHim

Top Categories

Get in Touch

Follow us on social media to be updated with latest web design code & scripts.

Источник