Multi Level Menu

Developer
KimLaRocca
Size
4,376 Kb
Views
12,144
  1. Multi Level Menu Previews
  2. Multi Level Menu HTML Codes
  3. Multi Level Menu CSS Codes
  4. Multi Level Menu JS Codes

How do I make an multi level menu?

What is a multi level menu? How do you make a multi level menu? This script and codes were developed by KimLaRocca on 27 November 2022, Sunday.

Multi Level Menu Previews
IQ Test

Multi Level Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi Level Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mobileOpen">OPEN MENU</div>
<div class="mobileMenu"> <div class="mobileLogo"> <div id="mobileClose">X</div> </div> <ul class="main-nav"> <li><a href="#">Healthcare Professionals</a> <ul class="main-nav_level-1 subnav"> <li> <a href="#">Surgeons</a> <ul class="main-nav_level-2 subnav"> <li><a href="#">Surgeons Overview</a></li> <li><a href="#">Gynecology</a></li> <li><a href="#">Urology</a></li> <li><a href="#">General surgery</a></li> <li><a href="#">colorectal</a></li> <li><a href="#">thoracic</a></li> <li><a href="#">head &amp; neck</a></li> <li><a href="#">cardiac</a></li> </ul> </li> <li><a href="#">or staff</a></li> <li><a href="#">hospital</a></li> <li><a href="#">professional education</a></li> <li><a href="#">clinical evidence &amp; grants</a></li> <li><a href="#">events &amp; community</a></li> </ul> </li> <li><a href="#">patients</a></li> <li><a href="#">products</a></li> <li><a href="#">about us</a></li> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multi Level Menu - Script Codes CSS Codes

.mobileMenu { display: block; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; right: -600px; bottom: 0; height: 100%; width: 600px; background: #dcdcdc; z-index: 1000; text-transform: uppercase; -webkit-transition: .3s all ease-in; -moz-transition: .3s all ease-in; -o-transition: .3s all ease-in; transition: .3s all ease-in;
}
.mobileMenu ul { list-style: none; margin: 0; padding: 0; width: 600px;
}
.mobileMenu p { color: #43474c; margin: 25px 60px; letter-spacing: 3.5px; font-size: 16px; font-family: "Arial";
}
.mobileMenu input { font-family: "Arial"; font-size: 18px; color: #43474c; height: 60px; width: calc(100% - 60px*2 - 20px); margin: 0 60px; padding: 0 10px; border: none; outline: none; background: #fff url(../images/icon-search-darkGray.png) no-repeat right 30px center;
}
.mobileMenu.open { right: 0;
}
.mobileLogo { background: #43474c url(http://placekitten.com/171/46) no-repeat left 60px center; width: 100%; height: 28px; padding: 25px 60px; cursor: pointer;
}
.mobileLogo #mobileClose { color: #fff; position: absolute; right: 25px; top: 36px; height: 28px; width: 26px;
}
.main-nav { position: relative; background: #43474c;
}
.main-nav li { background: #43474c; height: 85px;
}
.main-nav li.has-subnav > a { position: relative;
}
.main-nav li.has-subnav > a:before { width: 100%; position: absolute; display: block; color: #fff; content: ">"; text-align: right; width: calc(100% - 60px*2); height: 85px;
}
.main-nav a { display: block; text-decoration: none; color: #fff; letter-spacing: 3.5px; font-size: 16px; padding: 0 60px; line-height: 85px;
}
.main-nav a:after { content: ""; background: #97999d; position: absolute; margin-top: 85px; left: 60px; right: 60px; height: 1px; width: calc(100% - 60px*2);
}
.main-nav a.back-track:before { position: absolute; display: block; color: #fff; content: "<"; width: calc(100% - 60px*2); height: 85px; left: 30px;
}
.subnav { position: absolute; top: 0; bottom: 0; background: #43474c; z-index: 40; transform: translate3d(600px, 0, 0); transition: transform 0.5s;
}
.subnav.active { transform: translate3d(0, 0, 0);
}
.subnav.active li:first-child { background: #007398;
}
.main-nav_level-2 { z-index: 80;
}
@media all and (max-width: 599px) { .mobileMenu { right: -320px; width: 320px; } .mobileMenu ul { width: 320px; } .mobileMenu p { letter-spacing: 1.5px; font-size: 14px; margin: 25px 30px; } .mobileMenu input { font-size: 14px; height: 50px; width: calc(100% - 30px*2 - 20px); margin: 0 30px; background: #fff url(../images/icon-search-darkGray.png) no-repeat right 15px center; } .mobileLogo { background: #43474c url(../images/logo.png) no-repeat left 30px center; padding: 25px 30px; } .mobileLogo #mobileClose { right: 30px; } .main-nav li.has-subnav > a:before { width: calc(100% - 30px*2); } .main-nav a { letter-spacing: 1.5px; font-size: 14px; padding: 0 30px; } .main-nav a:after { left: 30px; right: 30px; width: calc(100% - 30px*2); } .main-nav a.back-track:before { width: calc(100% - 30px*2); left: 15px; left: 7.5px; }
}

Multi Level Menu - Script Codes JS Codes

	/*	mobile menu	*/	//open menu	$('#mobileOpen').click(function () {	$('.mobileMenu').addClass('open');	});	//close menu	$('#mobileClose').click(function () {	$('.mobileMenu').removeClass('open');	});	//multi level menu	$('.main-nav li > .subnav').parent().addClass('has-subnav');	$('.main-nav li.has-subnav > a').each(function () {	var $this = $(this);	var myClone = $this.clone();	var myCloneParent = $this.next('.subnav');	myClone.prependTo(myCloneParent).addClass('back-track').wrap('<li></li>');	});	$('.main-nav li.has-subnav > a').click(function () {	var $this = $(this);	$this.next('.subnav').addClass('active');	});	$('.main-nav a.back-track').click(function () {	var $this = $(this);	$this.parent().parent().removeClass('active');	});
Multi Level Menu - Script Codes
Multi Level Menu - Script Codes
Home Page Home
Developer KimLaRocca
Username kimlarocca
Uploaded November 27, 2022
Rating 3
Size 4,376 Kb
Views 12,144
Do you need developer help for Multi Level Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KimLaRocca (kimlarocca) Script Codes
Name
Highbrow Basic HTML Lesson 6
Highbrow Basic HTML Lesson 1
Responsive Tabs To Accordions
Curved Section Seperator
Highbrow Basic HTML Lesson 8
Highbrow Basic HTML Lesson 7
Highbrow Basic HTML Lesson 2
Highbrow Basic HTML Lesson 3
Text Ripple Effect
Crop Image
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!