Skip to content

Instantly share code, notes, and snippets.

@developer-tests

developer-tests/How to make vertical menu with plus minus toggle

Created October 20, 2018 07:44
Show Gist options
  • Save developer-tests/9df290cd82f39aa8e2c890a6455f3374 to your computer and use it in GitHub Desktop.
Save developer-tests/9df290cd82f39aa8e2c890a6455f3374 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
How to make vertical menu with plus minus toggle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>How to make vertical menu with plus minus toggle</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style type="text/css">
.navbar .dropdown-toggle, .navbar .dropdown-menu a {
cursor: pointer;
}ul.my_drop {
left: 14.7em;
top: -3px;
}.navbar.navbar-expand-md.navbar-dark.bg-dark.mb-4 {
background: none !important;
}.dropdown-menu {
padding: 0px;
}.dropdown-menu li.dropdown-item {
padding: 7px 26px;
}.dropdown-menu li.dropdown-item:hover, .dropdown-menu li.dropdown-item:focus {
background: #616161;
}a.job_title:before {
content: "\f0f2";
font-family: FontAwesome;
white-space: unset !important;
position: absolute;
left: 25px;
font-size: 21px;
}a.degree:before {
content: "\f19d";
font-family: FontAwesome;
white-space: unset !important;
position: absolute;
left: 25px;
font-size: 21px;
}.dropdown-toggle:after {
display: inline-block !important;
width: 0;
height: 0;
content: "\f067" !important;
font-family: FontAwesome !important;
float: right !important; border: none !important;
position:absolute;!important;
}a.degree:after, a.job_title:after {
right: 21px !important;
}.show > a.dropdown-toggle:after {
content: "\f068" !important;
}
a.job_title,a.degree{
text-align:center;}
ul.navbar-nav.mr-auto {
display: block;
width: 14.7em;
}ul.navbar-nav.mr-auto li a {
color: #fff !important;
text-transform: uppercase;font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing: 1px;
}
ul.navbar-nav.mr-auto li {
border-bottom: 1px solid #ccc;
background: #333;
}
.navbar .dropdown-item.active, .navbar .dropdown-item:active {
color: inherit;
text-decoration: none;
background-color: inherit;
}
.navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
color: #16181b;
text-decoration: none;
background-color: #f8f9fa;
}
@media (min-width: 767px) {
.navbar .dropdown-toggle:not(.nav-link)::after {
display: inline-block;
width: 0;
height: 0;
margin-left: .5em;
vertical-align: 0;
border-bottom: .3em solid transparent;
border-top: .3em solid transparent;
border-left: .3em solid;
}
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
</script>
</head>
<body>
<div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="degree nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DEGREES</a>
<ul class="dropdown-menu my_drop" aria-labelledby="dropdown1">
<li class="dropdown-item" href="#"><a>Business</a></li>
<li class="dropdown-item" href="#"><a>Law</a></li>
<li class="dropdown-item" href="#"><a>Arts</a></li>
<li class="dropdown-item" href="#"><a>Engineering</a></li>
<li class="dropdown-item" href="#"><a>Education</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Science and Mathematics</a>
<ul class="dropdown-menu" aria-labelledby="dropdown1-1">
<li class="dropdown-item" href="#"><a>Science</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Environment</a>
<ul class="dropdown-menu" aria-labelledby="dropdown1-1-1">
<li class="dropdown-item" href="#"><a>Agriculture</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="job_title nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Job Titles</a>
<ul class="dropdown-menu my_drop" aria-labelledby="dropdown2">
<li class="dropdown-item" href="#"><a>Journalism</a></li>
<li class="dropdown-item" href="#"><a>Fashion</a></li>
<li class="dropdown-item" href="#"><a>Private Banking</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Finance</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1">
<li class="dropdown-item" href="#"><a>Action 2.1 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1 C</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.1</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1-1">
<li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li>
</ul>
</li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.2</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1-2">
<li class="dropdown-item" href="#"><a>Action 2.1.2 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.2 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.2 C</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment