Hi Dev
Today, I will learn you how to create jquery responsive multi-level menu example. I will make of responsive multi-level menu using jquery example. We will create jquery responsive multi-level menu using dlmenu.you can click menu list on to open submenu list.
Here, I will give you full example for simply display responsive multi-level menu using jquery example. as bellow.
Example
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Multi-Level Menu Using Jquery Example</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu/css/default.css" />
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu/css/component.css"/>
<script src="https://www.jqueryscript.net/demo/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu/js/modernizr.custom.js"></script>
</head>
<style type="text/css">
.main-section ,.main,.column{
margin:0px !important;
}
</style>
<body>
<div class="container demo-1 main-section">
<div class="main clearfix">
<div class="column">
<div id="dl-menu" class="dl-menuwrapper">
<button>Open Menu</button>
<ul class="dl-menu">
<li> <a href="#">Fashion</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#"> back</a></li>
<li> <a href="#">Men</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Chinos & Trousers</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Underwear</a></li>
</ul>
</li>
<li> <a href="#">Women</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Knits</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Blouses</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Underwear</a></li>
</ul>
</li>
<li> <a href="#">Children</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Electronics</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Camera & Photo</a></li>
<li><a href="#">TV & Home Cinema</a></li>
<li><a href="#">Phones</a></li>
<li><a href="#">PC & Video Games</a></li>
</ul>
</li>
<li> <a href="#">Furniture</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li> <a href="#">Living Room</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Sofas & Loveseats</a></li>
<li><a href="#">Coffee & Accent Tables</a></li>
<li><a href="#">Chairs & Recliners</a></li>
<li><a href="#">Bookshelves</a></li>
</ul>
</li>
<li> <a href="#">Bedroom</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li> <a href="#">Beds</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Upholstered Beds</a></li>
<li><a href="#">Divans</a></li>
<li><a href="#">Metal Beds</a></li>
<li><a href="#">Storage Beds</a></li>
<li><a href="#">Wooden Beds</a></li>
<li><a href="#">Children's Beds</a></li>
</ul>
</li>
<li><a href="#">Bedroom Sets</a></li>
<li><a href="#">Chests & Dressers</a></li>
</ul>
</li>
<li><a href="#">Home Office</a></li>
<li><a href="#">Dining & Bar</a></li>
<li><a href="#">Patio</a></li>
</ul>
</li>
<li> <a href="#">Jewelry & Watches</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Fine Jewelry</a></li>
<li><a href="#">Fashion Jewelry</a></li>
<li><a href="#">Watches</a></li>
<li> <a href="#">Wedding Jewelry</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Engagement Rings</a></li>
<li><a href="#">Bridal Sets</a></li>
<li><a href="#">Women's Wedding Bands</a></li>
<li><a href="#">Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu/js/jquery.dlmenu.js"></script>
<script>
$(function() {
$('#dl-menu').dlmenu();
});
</script>
</html>
It Will help you..
No comments:
Post a Comment