Skip to content

Instantly share code, notes, and snippets.

@koentjuh1

koentjuh1/Bootstrap 2-lvl dropdown menu .css

Last active August 29, 2015 14:25
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 koentjuh1/0737ceaec29f4300be05 to your computer and use it in GitHub Desktop.
Save koentjuh1/0737ceaec29f4300be05 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 2-lvl dropdown menu
Raw
Bootstrap 2-lvl dropdown menu .css
.header{
background-color:#1c1682;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border: 0px;
margin: 0px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #FFF;
background-color: #524ad1;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #FFF;
background-color: #524ad1;
}
.menu {
display: flex;
width: 100%;
}
.navbar-nav .menu-flex{
flex-grow: 1;
text-align:center;
float:none;
}
.navbar-collapse{
padding:0px;
}
.menu-comp .dropdown.dropdown-hover-1:hover .dropdown-menu-1{
display:block;
}
.menu-comp .dropdown-hover-2:hover .dropdown-menu-2{
display:block;
}
.menu.menu-comp .dropdown-menu .sub-menu{
top: 0px;
}
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
z-index: 11;
}
#collapse {
margin-top: 0px;
width: 100%;
}
.dropdown-menu>li>a{
color:#fff;
font-size: 13px;
padding: 10px 18px;
}
.menu .dropdown .dropdown-menu {
padding: 0px;
margin: 0px;
border: 0px;
border-radius: 0px;
border-top: 0px;
min-width: 220px;
background-color: #1c1682;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #524AD1;
}
@media only screen and (max-width: 767px) {
.menu{
margin:0px;
flex-direction:column
}
.navbar-nav .menu-flex{
text-align:left;
}
.menu .dropdown .dropdown-menu{
position:relative;
-webkit-box-shadow: 0px 0px 0px transparent;
box-shadow: 0px 0px 0px transparent;
}
.menu .dropdown .dropdown-menu-1{
padding-left:10px;
}
.menu .dropdown .dropdown-menu-2{
position:relative;
left: 0px;
padding-left: 15px;
}
.navbar-default .navbar-toggle {
border-color: #FFF;
margin-right: 0px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: rgb(82, 74, 209);
}
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
padding: 7px 15px;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #FFF;
background-color: #524AD1;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #FFF;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #FFF;
background-color: rgb(82, 74, 209);
}
}
Raw
Bootstrap 2-lvl dropdown menu.html
<nav class="navbar navbar-default navfix" role="navigation">
<div class="container">
<div class="row">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-sm-12 menu-bar">
<div class="row">
<div class="col-sm-12">
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav menu">
<li class="menu-flex active"><a href="#">Home</a></li>
<li class="dropdown dropdown-hover-1 menu-flex">
<a class="dropdown-toggle dropdown-toggle-1" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-1">
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover-1 menu-flex">
<a class="dropdown-toggle dropdown-toggle-1" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-1">
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li><a href="#">Dropdown item</a></li>
<li><a href="#">Dropdown item</a></li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-hover-2">
<a class="trigger right-caret">Dropdown item</a>
<ul class="dropdown-menu dropdown-menu-2 sub-menu">
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
<li><a href="/">Dropdown item</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-flex"><a href="#">Menu item</a></li>
<li class="menu-flex"><a href="#">Menu item</a></li>
<li class="menu-flex"><a href="#">Menu item</a></li>
<li class="menu-flex"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
Raw
Bootstrap 2-lvl dropdown menu.js
// set variable isMobile
var isMobile = {
//tag Android
Android: function() {
return navigator.userAgent.match(/Android/i);
},
//tag BlackBerry
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
//tag iOS
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
//tag Opera
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
//tag Windows
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
//tag Android, BlackBerry, iOS, Opera, Windows
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
// if operating system is Android, BlackBerry, iOS, Opera, Windows run this function:
if ( isMobile.any() ) {
$(".menu").addClass("menu-mob");
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
}
// else operating system is windows or mac run this function:
else
{
$(".menu").addClass("menu-comp");
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment