Simple menus are always smaller in size and retain their beauty. In this code we have a menu with the help of Bootstrap. This menu has a dark and black theme and the menu items are white. On the other side is an icon that you can replace with your website icon. Menus that have a submenu will open under the menu by placing the mouse cursor over them. The submenu has a white background and the submenus title is black. The menu items themselves turn yellow in hover mode.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="all">
<div class="body-h">
<div class="wrapper">
<header class="header_wrapper">
<div class="container">
<h3 class="title" style="color: #fff; text-align: center;">
This menu is made with Bootstrap and is compatible with all screens.
</h3>
<div class="menu-logo row">
<div class="col-md-12 clearfix">
<div class="logo_wrapper">
<h1 id="logo">
<a href="">
<img class="logo" src="http://www.devanswer.com/img/logo_bottom.png" alt="">
</a>
</h1>
</div><!-- logo -->
<div class="nav-bar-outer">
<div class="nav-bar-wrap toggled">
<div class="main-nav-wrap" id="sidebar-wrapper">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
</div><!-- navbar-header -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
<ul class="main-nav-inner sidebar-nav clearfix">
<li class="menu-item">
<a href="#">
Home
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">
Projects
</a>
<div class="sub-menu-wrap is-sub-menu">
<ul class="sub-menu-inner">
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
</ul>
</div><!-- sub menu wrap -->
</li>
<li class="menu-item menu-item-has-children">
<a href="#">
Contact
</a>
<div class="sub-menu-wrap is-sub-menu">
<ul class="sub-menu-inner">
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
</ul>
</div><!-- sub menu wrap -->
</li>
<li class="menu-item menu-item-has-children">
<a href="#">
About
</a>
<div class="sub-menu-wrap is-sub-menu">
<ul class="sub-menu-inner">
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
<li class="menu-item">
<a href="#">
Submenu
</a>
</li>
</ul>
</div><!-- sub menu wrap -->
</li>
</ul>
</div><!-- collapse -->
</div><!-- container-fluid -->
</nav>
</div><!-- main-nav-wrap -->
</div>
</div><!-- nav-bar-outer -->
</div><!-- col -->
</div><!-- menu-logo -->
</div><!-- container -->
</header><!-- header_wrapper -->
</div>
</div>
</div>
<li<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html, body {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
background: #E3DFD2;
}
header.header_wrapper {
position: fixed;
z-index: 99;
width: 100%;
background-color: black;
}
a:hover {
text-decoration: none;
}
.sub-menu-wrap.is-sub-menu ul li:hover a, .line-color, .small-border, .date-box .day {
background-color: #ffd200;
color: #111 !important;
}
.transition {
transition: 0.3s all linear;
-moz-transition: 0.3s all linear;
-webkit-transition: 0.3s all linear;
}
.main-nav-inner > li:hover > a, .top-nav-left .social a:hover {
color: #ffd200 !important;
}
.menu-logo {
margin-top: 30px;
}
.row {
margin-right: 0 !important;
margin-left: 0 !important;
}
.logo_wrapper {
float: right;
}
.nav-bar-outer {
float: left;
}
.main-nav-wrap, .nav-bar-outer {
display: block;
position: relative;
}
.nav-bar-outer {
z-index: 999;
}
.nav-bar-wrap {
display: block;
z-index: 999;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
transition: opacity .3s linear;
}
.main-nav-wrap {
text-align: right;
line-height: 0;
color: #fff;
}
element.style {
}
.main-nav-wrap nav.navbar {
min-height: 40px;
margin-bottom: 0;
}
.container-fluid {
padding: 0 !important;
}
.navbar-toggle {
margin-top: 0;
color: #fff;
float: right;
z-index: 9999;
margin-right: 10px;
}
.is-sub-menu li, .main-nav-inner > li.menu-item-has-children {
position: relative;
}
.main-nav-inner > li {
display: block;
float: left;
line-height: 40px;
}
.main-nav-inner .is-sub-menu {
display: block;
visibility: hidden;
text-align: right;
opacity: 0;
position: absolute;
top: 120%;
padding-top: 5px;
padding-bottom: 5px;
background-color: #fff;
border-top: 2px solid #ffd200;
min-width: 185px;
z-index: 9999;
-webkit-box-shadow: 2px 2px 1px rgba(24,24,24,.05);
-moz-box-shadow: 2px 2px 1px rgba(24,24,24,.05);
box-shadow: 2px 2px 1px rgba(24,24,24,.05);
border-left: 1px solid rgba(24,24,24,.05);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.main-nav-inner > li > a {
display: inline-block;
padding: 0 10px;
line-height: inherit;
color: #FFF;
font-size: 14px;
font-family: revert;
font-weight: bold;
}
.main-nav-inner .is-sub-menu:not(.mega-menu-wrap) a {
display: block;
line-height: 1;
position: relative;
left: -5px;
padding: 10px 25px 10px 10px;
white-space: nowrap;
font-size: 13px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
text-align: left;
color: rgb(0 0 0);
}
.sub-menu-wrap.is-sub-menu > ul {
padding: 0 0 0 7px;
}
img.logo {
width: 100px;
height: 75px;
}
li{
list-style: none;
}
@media (min-width: 768px){
.navbar {
border-radius: 4px;
}
.main-nav-inner li:hover > .is-sub-menu {
visibility: visible;
opacity: 1;
top: 100%;
left: auto;
right: auto;
bottom: auto;
pointer-events: auto;
}
i.explain-menu.fa.fa-angle-down {
font-size: 16px;
transition: 0.4s;
}
li:hover > a .explain-menu {
transform: rotate(-180deg);
}
}
@media (max-width: 768px){
.main-nav-inner > li {
float: none;
display: block;
border-bottom: 1px solid;
text-align: left;
border-color: #5e788d;
}
div#bs-example-navbar-collapse-1 {
width: 100% !important;
}
.main-nav-inner > li > a {
font-size: 14px;
width: 100%;
}
.main-nav-inner .is-sub-menu {
display: none;
visibility: visible;
text-align: right;
opacity: 1;
position: relative;
border-top: none;
top: 0;
width: 100%;
}
ul.main-nav-inner.sidebar-nav.clearfix {
float: none;
width: 100%;
padding-left: 0;
display: block;
}
.nav-bar-outer {
float: none;
}
.container-fluid {
width: 100%;
}
.navbar-header {
float: none;
text-align: left !important;
}
button.navbar-toggle {
display: inline-block;
font-size: 17px;
float: none !important;
top: 18px;
margin: 0;
}
.explain-menu {
display: block;
font-size: 32px;
float: right
}
.active .explain-menu {
transform: rotate(-180deg);
}
}Javascript
var mobile_menu=$('.collapse');
var sub_mobile_menu=mobile_menu.find('li.menu-item-has-children');
var sub_mobile_a=mobile_menu.find('li.menu-item-has-children > a');
sub_mobile_a.append('<i class="explain-menu fa fa-angle-down"></i>');
$('.explain-menu').click(function(e){
e.preventDefault();
$(this).parent('a').toggleClass('active').siblings('.sub-menu-wrap').slideToggle();
});
