Skip to content

Instantly share code, notes, and snippets.

@AminulBD

AminulBD/app.css

Created September 11, 2016 05:31
Show Gist options
  • Save AminulBD/638041f59c8b2b62db5fa8abc1aba7e7 to your computer and use it in GitHub Desktop.
Save AminulBD/638041f59c8b2b62db5fa8abc1aba7e7 to your computer and use it in GitHub Desktop.
Download ZIP
Multi dropdown menu
Raw
app.css
ul {
padding: 0;
margin: 0;
}
ul > li {
list-style: none;
background-color: #DDD;
margin-bottom: 10px;
position: relative;
}
.menu-item-has-children > .sub-menu {
display: none;
}
.menu-item-has-children.children-menu-visible > .sub-menu {
display: block;
}
Raw
app.js
(function($){
var $hasSub = $('.menu-item-has-children'),
$children = $hasSub.children('.sub-menu');
$hasSub.each(function() {
var $this = $(this),
$sub = $this.children('.sub-menu');
$this.on('click', '> a', function(event) {
if ($(this).parent('.menu-item-has-children').hasClass('children-menu-visible')) {
$this.removeClass('children-menu-visible');
} else {
$hasSub.not($this.parents()).removeClass('children-menu-visible');
$this.addClass('children-menu-visible');
}
// disable click event
event.preventDefault();
event.stopPropagation();
});
});
})(jQuery);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown jQuery Fix</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<ul id="menu-si">
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 3</a></li>
<li class="menu-item-has-children">
<a href="">Menu Item 4</a>
<ul class="sub-menu">
<li><a href="">Sub Menu Item 1</a></li>
<li><a href="">Sub Menu Item 2</a></li>
<li><a href="">Sub Menu Item 3</a></li>
<li class="menu-item-has-children">
<a href="">Sub Menu Item 4</a>
<ul class="sub-menu">
<li><a href="">Grand Sub Menu Item 1</a></li>
<li><a href="">Grand Sub Menu Item 2</a></li>
<li><a href="">Grand Sub Menu Item 3</a></li>
<li><a href="">Grand Sub Menu Item 4</a></li>
<li><a href="">Grand Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="">Menu Item 5</a></li>
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 3</a></li>
<li class="menu-item-has-children">
<a href="">Menu Item 4</a>
<ul class="sub-menu">
<li><a href="">Sub Menu Item 1</a></li>
<li><a href="">Sub Menu Item 2</a></li>
<li><a href="">Sub Menu Item 3</a></li>
<li class="menu-item-has-children">
<a href="">Sub Menu Item 4</a>
<ul class="sub-menu">
<li><a href="">Grand Sub Menu Item 1</a></li>
<li><a href="">Grand Sub Menu Item 2</a></li>
<li><a href="">Grand Sub Menu Item 3</a></li>
<li><a href="">Grand Sub Menu Item 4</a></li>
<li><a href="">Grand Sub Menu Item 5</a></li>
<li class="menu-item-has-children">
<a href="">Sub Menu Item 4</a>
<ul class="sub-menu">
<li><a href="">Grand Sub Menu Item 1</a></li>
<li><a href="">Grand Sub Menu Item 2</a></li>
<li><a href="">Grand Sub Menu Item 3</a></li>
<li><a href="">Grand Sub Menu Item 4</a></li>
<li><a href="">Grand Sub Menu Item 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="">Menu Item 5</a></li>
</ul>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment