Showing posts with label jquery responsive multi-level menu example. Show all posts
Showing posts with label jquery responsive multi-level menu example. Show all posts

Jquery Responsive Multi-Level Menu Tutorial

Jquery Responsive Multi-Level Menu Tutorial

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..