<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>
<body>
<div class="container mt-5">
<div class="title">
<h3>Dropdown</h3>
</div>
<div class="row">
<div class="col-lg-3 col-md-8 col-sm-3">
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary btn-round btn-block" type="button" id="multiDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Multilevel Dropdown
<div class="ripple-container"></div></button>
<div class="dropdown-menu" aria-labelledby="multiDropdownMenu">
<a class="dropdown-item" href="#pablo">Action</a>
<a class="dropdown-item" href="#pablo">Another action</a>
<a class="dropdown-item dropdown-toggle" href="#pablo">Submenu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Submenu action</a>
<a class="dropdown-item" href="#pablo">Submenu action</a>
<a class="dropdown-item dropdown-toggle" href="#pablo">Subsubmenu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
<a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
</div>
<a class="dropdown-item dropdown-toggle" href="#pablo">Subsubmenu 2</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
<a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-8 col-sm-12">
<div class="dropdown">
<button href="#pablo" class="dropdown-toggle btn btn-primary btn-round btn-block" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#pablo" class="dropdown-item">Action</a>
<a href="#pablo" class="dropdown-item">Another action</a>
<a href="#pablo" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">One more separated link</a>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.4em !important;
font-weight: 300;
}
/* buttons */
.container .btn {
position: relative;
padding: 12px 30px;
margin: .3125rem 1px;
font-size: .75rem;
font-weight: 400;
line-height: 1.428571;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: .2rem;
outline: 0;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
will-change: box-shadow,transform;
}
.btn-block {
display: block;
width: 100%;
}
.btn.btn-round {
border-radius: 30px;
}
.container .btn.btn-primary {
color: #fff;
background-color: #9c27b0;
border-color: #9c27b0;
box-shadow: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
}
.container .btn.btn-primary:hover,
.container .btn.btn-primary:hover:active,
.container .btn.btn-primary:focus{
color: #fff;
background-color: #9124a3;
border-color: #701c7e;
box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}
.container .show .dropdown-toggle.btn{
background-color: #9124a3;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.dropdown-toggle:after {
will-change: transform;
transition: transform .15s linear;
}
.show .dropdown-toggle:after {
transform: rotate(180deg);
}
.dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu a:active, .dropdown-menu a:focus, .dropdown-menu a:hover, .dropdown-menu a:hover:active {
box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
background-color: #9c27b0;
color: #fff;
}
.dropdown-menu .dropdown-item, .dropdown-menu li>a {
position: relative;
width: auto;
display: flex;
flex-flow: nowrap;
align-items: center;
color: #333;
font-weight: 400;
text-decoration: none;
font-size: .8125rem;
border-radius: .125rem;
margin: 0 .3125rem;
transition: all .15s linear;
min-width: 7rem;
padding: 0.625rem 1.25rem;
min-height: 1rem !important;
overflow: hidden;
line-height: 1.428571;
text-overflow: ellipsis;
word-wrap: break-word;
}
.dropdown .dropdown-menu.show .dropdown-item.dropdown-toggle + .dropdown-menu.show {
left: 101% !important;
-webkit-transform: scale(1);
transform: scale(1);
}
.dropdown .dropdown-menu.show .dropdown-toggle.open:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.show .dropdown-toggle:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown .dropdown-header {
font-size: .75rem;
font-weight: 300 !important;
padding-top: .1875rem;
padding-bottom: .1875rem;
margin-top: 10px;
text-transform: none;
color: #777;
line-height: 1.428571;
font-weight: inherit;
}
footer{
margin-top:250px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
margin: 0 0 10px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).closest("a").toggleClass('open');
$(this).parents('a.dropdown-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-menu .show').removeClass("show");
});
if (!$parent.parent().hasClass('navbar-nav')) {
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
return false;
});
});
