Jquery Responsive Multi-Level Menu Example

Jquery , Html , Css

Nicesnippets

1133

02-09-2020


Jquery Responsive Multi-Level Menu Example

Hi Guys

In this blog, I will explain 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..


Recommended Posts