Skip to content

Instantly share code, notes, and snippets.

@jerinisready

jerinisready/mdb-nested-menu.html

Last active July 16, 2019 15:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jerinisready/504c656927a075895575bf3cb2a2657e to your computer and use it in GitHub Desktop.
Save jerinisready/504c656927a075895575bf3cb2a2657e to your computer and use it in GitHub Desktop.
Download ZIP
This is how we made a nested menu within default mdb jquery admin template. available over : https://mdbootstrap.com/snippets/jquery/jerin_john_kachirackal/936124
Raw
mdb-nested-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Home | Administration </title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="/assets/css/material-dashboard.css" rel="stylesheet" />
<style>
/* To make Scroll bar Danger-color (work only in Chrome) Mozilla is not supporting scrol bar css*/
.scrollbar {float: left;height: 300px;width: 65px;background: rgba(255,255,255,0.5);overflow-y: scroll;margin-bottom: 25px;}.force-overflow {min-height: 450px;}
.scrollbar-danger::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px; }
.scrollbar-danger::-webkit-scrollbar {width: 6px;background-color: #F5F5F5; }.scrollbar-danger::-webkit-scrollbar-thumb { border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #ff3547; }
.sidebar .nav li:first-child > a{margin: auto 10px}
</style>
<style>
/* This is the Only Manidatory Style other than MDB Dashboard. */
ul li.nav-item:not(.active) > a.nav-link:hover, .nav-item.has-submenu> a[aria-expanded="true"]{box-shadow: 2px 2px 5px #c0c0c0; background-color: white}
.nav-item.has-submenu {}
.nav-item.has-submenu>a {position: relative;}
.nav-item.has-submenu>a span {position: absolute;right: 8px;top: 0;bottom: 0;width: 10px;height: 10px;text-align: center;line-height: 15px;margin: auto 0;font-size: 14px;}
.nav-item.has-submenu>a[aria-expanded="true"] span{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);right: 3px;top: 5px;}
.nav-item-submenu {padding: 0;display: none;margin: 0 16px;list-style: none;list-style-type: none;border-left:2px solid #F44336}
.nav-item.has-submenu>a[aria-expanded="true"]{box-shadow: 2px 2px 5px #c0c0c0}
.nav-item.has-submenu>a[aria-expanded="true"]+.nav-item-submenu {}
.nav-item-submenu li {padding: 1px 8px;}
.nav-item-submenu li a {display: block;}
.nav-item-submenu li:first-child{padding-top: 10px}
</style>
<script src="/assets/js/core/jquery.min.js"></script>
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="danger" data-background-color="purple" data-image="/assets/img/sidebar-3.jpg">
<!-- data-color="purple | azure | green | orange | danger" -->
<div>
<div class="logo viewable_container">
<a href="#" class="simple-text logo-normal">
<img src="/assets/img/logo.png" alt="" class="logo-image">
</a>
</div>
</div>
<div class="sidebar-wrapper scrollbar scrollbar-danger">
<ul class="nav" onload="bringforward(event)">
<li class="nav-item {% if request.resolver_match.view_name == '#' %}active{% endif %}">
<a class="nav-link" href="{% url '#' %}" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="" aria-owns="table-list" aria-expanded="false">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> Group 01 </p>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="nav-item-submenu">
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> 01. Submenu item 01</p>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> 01. Submenu item 02</p>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> 01. Submenu item 03</p>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> 01. Submenu item 04</p>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">meeting_room</i>
<p> 01. Submenu item 05</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="" aria-owns="table-list" aria-expanded="false">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> Group 02 </p>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="nav-item-submenu">
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 01 </p>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 01 </p>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 02 </p>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 03 </p>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 04 </p>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p> 02. Submenu item 05 </p>
</a>
</li>
</ul>
</li>
<li class="nav-item {% if request.resolver_match.view_name == 'account:create-company' or request.resolver_match.view_name in 'account:create-company' %}active{% endif %}">
<a class="nav-link" href="{% url 'account:create-company' %}" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p>Item 3 Without Menu </p>
</a>
</li>
<li class="nav-item {% if request.resolver_match.view_name == 'account:create-company' or request.resolver_match.view_name in 'account:create-company' %}active{% endif %}">
<a class="nav-link" href="{% url 'account:create-company' %}" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p>Item 4 Without Menu </p>
</a>
</li>
<li class="nav-item {% if request.resolver_match.view_name == 'account:create-company' or request.resolver_match.view_name in 'account:create-company' %}active{% endif %}">
<a class="nav-link" href="{% url 'account:create-company' %}" data-toggle="tooltip" data-placement="bottom" title="">
<i class="material-icons" aria-hidden="true">supervisor_account</i>
<p>Item 5 Without Menu </p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand text-capitalize" href="#pablo"><b> Administration Panel</b></a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">1</span>
<p class="d-lg-none d-md-block">Some Actions</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">No New Notifications</p>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javascript:void" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Change Password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
{% content %}
<!----------------- CONTENT -------------------->
{% endblock %}
</div>
<footer class="footer">
<div class="container-fluid">
<div class="copyright float-center">
<b>&copy;</b>
<script>document.write(new Date().getFullYear())</script>, made with <i class="material-icons" style="color: #f44336; ">favorite</i> for a better web.
</div>
</div>
</footer>
</div>
</div>
<!-- Core JS Files -->
<script type="text/javascript">
$(document).ready( e => {
$(".nav a.nav-link[title]").each((index, el,) => {$(el).attr('title', $(el).find("p").text())});
})
</script>
<script>
<!-- To Scroll Active Menu into Screen -->
let el = document.querySelector('.scrollbar li.active');
if (el){
let elementTop = $(el).offset().top;
let elementBottom = elementTop + $(el).outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + $(window).height() - 80;
if(!(elementBottom > viewportTop && elementTop < viewportBottom)){el.scrollIntoView()}
}
</script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="/assets/js/core/core.js"></script>
<script src="/assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
<script>
$(document).ready((e) => {
/* This is the Only Manidatory Script Fot Nested Style Sheet in MDB Dashboard. */
$(".nav-item.has-submenu")
.find("a[href='#']")
.bind("click", function (e) {e.preventDefault();
let isExpanded = $(this).attr("aria-expanded") == "true";
let submenu = $(this).parent("li").find(".nav-item-submenu").eq(0);
$(".nav-item-submenu").slideUp();
$(".nav-item-submenu").parent().find('a').attr("aria-expanded", false);
if (!isExpanded) {submenu.slideDown();$(this).attr("aria-expanded", "true")
} else {submenu.slideUp();$(this).attr("aria-expanded", "false")}
})
})
</script>
</body>
</html>
Raw
script.js
$(document).ready((e) => {
/* This is the Only Manidatory Script Fot Nested Style Sheet in MDB Dashboard. */
$(".nav-item.has-submenu")
.find("a[href='#']")
.bind("click", function (e) {e.preventDefault();
let isExpanded = $(this).attr("aria-expanded") == "true";
let submenu = $(this).parent("li").find(".nav-item-submenu").eq(0);
$(".nav-item-submenu").slideUp();
$(".nav-item-submenu").parent().find('a').attr("aria-expanded", false);
if (!isExpanded) {submenu.slideDown();$(this).attr("aria-expanded", "true")
} else {submenu.slideUp();$(this).attr("aria-expanded", "false")}
})
})
Raw
style.css
/* This is the Only Manidatory Style other than MDB Dashboard. */
ul li.nav-item:not(.active) > a.nav-link:hover, .nav-item.has-submenu> a[aria-expanded="true"]{box-shadow: 2px 2px 5px #c0c0c0; background-color: white}
.nav-item.has-submenu {}
.nav-item.has-submenu>a {position: relative;}
.nav-item.has-submenu>a span {position: absolute;right: 8px;top: 0;bottom: 0;width: 10px;height: 10px;text-align: center;line-height: 15px;margin: auto 0;font-size: 14px;}
.nav-item.has-submenu>a[aria-expanded="true"] span{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);right: 3px;top: 5px;}
.nav-item-submenu {padding: 0;display: none;margin: 0 16px;list-style: none;list-style-type: none;border-left:2px solid #F44336}
.nav-item.has-submenu>a[aria-expanded="true"]{box-shadow: 2px 2px 5px #c0c0c0}
.nav-item.has-submenu>a[aria-expanded="true"]+.nav-item-submenu {}
.nav-item-submenu li {padding: 1px 8px;}
.nav-item-submenu li a {display: block;}
.nav-item-submenu li:first-child{padding-top: 10px}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment