I am trying to insert this side menu in my website but even if I write it in a blank document doesn't visualize properly to me.
All the drop down links don't work and are shown me as open.
Therefore on mobile the menu keeps still open with no chance to be collapsed in the burger.
Please help and thanks!
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<head>
<link rel="stylesheet" href="prova.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
If you wanna do it with pure CSS and no JavaScript, I think you wanna do sth like this, that the menu only shows when you :hover over it, hope this is helpful.
Simple Pure CSS Drop Down Menu
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
Related
I'm new in website development. I have some problem that I cant's solve myself. for your information I'have used template from Zerotheme. Here the link you can download to view the full source code.
Q > How to hide the second level because I want to use "Hover" on the Submenu.
Screenshot
Can someone help me to solve this.
#menu {
border-radius: 0;
text-transform: uppercase;
background: #fff;
}
body.sub-page #menu {
padding: 10px 0;
}
#menu.navbar {
margin: 0;
min-height: auto
}
#menu #heading {
float: left;
padding-left: 15px;
font-size: 20px;
font-weight: 700;
line-height: 40px;
color: #fff;
margin-top: 10px;
text-transform: uppercase;
}
#menu .navbar-brand {
margin: 0;
height: auto;
padding: 0px 18px;
}
#menu .navbar-brand img {
max-width: 160px;
}
#menu .logo {}
#menu .dropdown-menu {
background-color: #EDD9C0;
border: none;
border-radius: 0;
}
#menu ul.nav .dropdown-menu li a {
color: #1a1c1e;
}
#menu ul.nav .dropdown-menu li a:hover {}
#menu .dropdown-inner {
display: table;
}
#menu .dropdown-inner ul {
display: table-cell;
}
#menu .dropdown-inner a {
min-width: 160px;
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #000;
margin: 0 5px;
}
#menu li.dropdown:hover>a,
#menu li.dropdown:focus>a,
#menu li.dropdown:active>a {
color: #3B3A36;
background: none;
}
#menu ul.nav li {
padding-right: 16px;
}
#menu ul.nav li a {
padding: 8px 10px;
color: #333;
font-size: 14px;
font-weight: bold;
}
#menu ul.nav li.dropdown a {}
#menu .nav>li>a:hover,
#menu .nav>li>a:focus {
color: #3B3A36;
background: none;
}
#menu .btn-navbar {
font-size: 20px;
color: #FFF;
padding: 5px 15px;
float: right;
border: 3px solid #fff;
}
#media (min-width: 768px) {
#menu ul.nav.navbar-nav {
margin-top: 5px;
display: inline-block;
float: none;
}
#menu .dropdown:hover .dropdown-menu {
display: block;
}
#menu .navbar-collapse {
text-align: center;
}
body.sub-page #menu ul.nav.navbar-nav {
margin-top: 5px;
display: block;
float: right;
}
}
#media(max-width:767px) {
#menu {
background: #1D2027;
padding: 10px 0;
}
#menu .navbar-brand {
display: block;
color: #fff;
margin-top: 10px;
}
#menu div.dropdown-inner>ul.list-unstyled {
display: block;
}
#menu .dropdown-inner a {
width: 100%;
color: #fff;
}
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
#menu ul.nav li a {
color: #fff;
}
#menu ul.nav li a:hover {
color: #EDD9C0;
}
#menu ul.nav li.dropdown a {
color: #fff;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<span id="heading" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i
class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown">Category <i class="fa fa-chevron-down"></i>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li>Text 301</li>
<li>Text 302</li>
<li>Text 303</li>
<li>Text 304</li>
<li>Text 305</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
<ul class="dropdown-menu">
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
First of all change css of
#menu .dropdown:hover .dropdown-menu {display: block;}
to
#menu .dropdown:hover>.dropdown-menu {display: block;}
because on hover of dropdown show both dropdown-menu and remove
#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}
because its override display:none without hover
#menu {border-radius: 0;text-transform: uppercase;background: #fff;}
body.sub-page #menu {padding: 10px 0;}
#menu.navbar{margin: 0;min-height:auto}
#menu #heading {float: left;padding-left: 15px;font-size: 20px;font-weight: 700;line-height: 40px;color: #fff;margin-top: 10px;text-transform: uppercase;}
#menu .navbar-brand{margin: 0;height: auto;padding: 0px 18px;}
#menu .navbar-brand img{max-width: 160px;}
#menu .logo {}
#menu .dropdown-menu {background-color: #EDD9C0;border:none;border-radius: 0;}
#menu ul.nav .dropdown-menu li a{color: #1a1c1e;}
#menu ul.nav .dropdown-menu li a:hover{}
#menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #000;margin: 0 5px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{color: #3B3A36;background: none;}
#menu ul.nav li{padding-right: 16px;}
#menu ul.nav li a{padding: 8px 10px;color: #333;font-size: 14px;font-weight: bold;}
#menu ul.nav li.dropdown a{}
#menu .nav > li > a:hover, #menu .nav > li > a:focus{color:#3B3A36;background: none;}
#menu .btn-navbar {font-size: 20px;color: #FFF;padding: 5px 15px;float: right;border: 3px solid #fff;}
#media (min-width: 768px) {
#menu ul.nav.navbar-nav {margin-top: 5px;display: inline-block;float: none;}
#menu .dropdown:hover>.dropdown-menu {display: block;}
#menu .navbar-collapse {text-align: center;}
body.sub-page #menu ul.nav.navbar-nav {margin-top: 5px;display: block;float: right;}
}
#media(max-width:767px) {
#menu{background: #1D2027;padding: 10px 0;}
#menu .navbar-brand {display: block;color: #fff;margin-top: 10px;}
#menu div.dropdown-inner > ul.list-unstyled {display: block;}
#menu .dropdown-inner a {width: 100%;color: #fff;}
#menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
#menu ul.nav li a{color: #fff;}
#menu ul.nav li a:hover{color: #EDD9C0;}
#menu ul.nav li.dropdown a{color: #fff;}
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<span id="heading" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown">Category <i class="fa fa-chevron-down"></i>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li>Text 301</li>
<li>Text 302</li>
<li>Text 303</li>
<li>Text 304</li>
<li>Text 305</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
<ul class="dropdown-menu">
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
i'm getting expended menu bar with subitems when i run my jsp file and even it is not collapsing on click mean no response from the menu bar i already tried different ways to resolve this issue but unable to resolve.
HTML
<link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li><a href="#"> <i class="fa fa-home fa-lg"></i>
Home
</a></li>
<li data-toggle="collapse" data-target="#products"
class="collapsed active"><a><i
class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="products">
<li>CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a><i class="fa fa-globe fa-lg"></i> Services <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a><i class="fa fa-bus fa-lg"></i> New <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li><a href="#"> <i class="fa fa-user fa-lg"></i> Profile
</a></li>
<li><a href="#"> <i class="fa fa-users fa-lg"></i> Users
</a></li>
</ul>
</div>
</div>
css for nav
CSS
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 24%;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul, .nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
{
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active, .nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
{
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
{
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media ( max-width : 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media ( min-width : 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
Does anybody know what the problem is and how I can fix it?
please leave your valuable answer and comments.
Not sure whether it's correct workaround for your issue, I have added jQuery function to enable the toggle. Let me know if this helps.
$(".collapsed").click(function(){
$($(this).data("target")).toggle('slow');
});
Please find the updated Fiddle for demo.
I have the following menu:
<ul id="nav-mobile" class="right">
<li><img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
and I use CSS to style it:
#nav-mobile{
margin-top: 0px;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #CCCCCC;
}
#nav-mobile li .dropdown-content li a {
display: none;}
#nav-mobile li:hover .dropdown-content li a {
display: block;
}
For the most part everything works as desired. Only when the user hovers over Home, Access, and Zone menu items, only the word itself gets highlighted, not the entire row. how can that be accomplished with CSS?
You can use the following solution (with many changes on the CSS code):
#nav-mobile{
margin-top: 0px;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: 0.4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{
display: block;
padding:0;
margin:0;
}
#nav-mobile li .dropdown-content li {
margin:0;
width:100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.75em 2.5em 0.75em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #CCCCCC;
}
<ul id="nav-mobile" class="right">
<li>
<img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li>
<img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
An improved example (reduced CSS code):
ul#nav-mobile, ul#nav-mobile ul {
color:#188ccc;
list-style-type:none;
margin:0;
padding:0;
}
ul#nav-mobile li {
display:inline-block;
margin:0;
}
ul#nav-mobile li a, ul#nav-mobile li a:link {
display:inline-block;
font-family:Roboto, Helvetica, Arial, sans-serif;
margin:0;
padding:0.75em 2.5em 0.75em 0.5em;
position:relative;
text-decoration:none;
}
ul#nav-mobile li ul.dropdown-content {
box-shadow:0px 8px 25px 0px rgba(28, 24, 28, 0.65);
display:none;
max-width:180px;
position:absolute;
z-index:1;
}
ul#nav-mobile li:hover ul.dropdown-content {
display:block;
}
ul#nav-mobile li:hover ul.dropdown-content li,
ul#nav-mobile li:hover ul.dropdown-content li a {
width:100%;
}
ul#nav-mobile li:hover ul.dropdown-content li:hover {
background:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="nav-mobile" class="right">
<li>
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li>
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
Give list items 100% width and no margin left, adjust padding of <a> tag accordingly:
#nav-mobile li .dropdown-content li {
width: 100%;
margin-left: 0;
}
#nav-mobile li:hover .dropdown-content li a {
padding-left: 10px;
}
http://jsfiddle.net/w6he4pgt/
#nav-mobile{
margin-top: 0px;
}
#nav-mobile > li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
width: 100%;
padding-left: 0px;
list-style: none;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile li:hover .dropdown-content li a{
display: block;
padding: 0.75em 2.5em 0.75em 1.5em;
}
#nav-mobile li .dropdown-content li:hover a{
background-color: #CCCCCC;
}
<ul id="nav-mobile" class="right">
<li><img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
Hope this will help you
How can I make other slide-down menus close when clicking on another menu item? Right now all menu items are opening one by one and they can only be closed by clicking on the item again.
Here's a demo: http://bootsnipp.com/snippets/33qKz
And here's the code
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
/* Adding gvnix styles css - NO COPIAR */
#import 'http://geo-gvnix.rhcloud.com/resources/styles/standard.css';
/* Custom fixed navs */
header.navbar+nav.navbar {
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top {
margin-top: 50px;
}
.sidebar.navbar-fixed-top {
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px) {
.navbar.navbar-default.navbar-fixed-top {
margin-top: 100px;
}
.sidebar.navbar-fixed-top {
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a {
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover {
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar,
.main {
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main {
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main {
position: absolute;
width: calc(100% - 40px);
/*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main {
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand,
nav.sidebar .navbar-header {
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a {
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav {
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child {
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li {
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover {
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last {
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse,
nav.sidebar .container-fluid {
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar {
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover {
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate {
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate {
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <i class="fa fa-gift fa-lg btn pull-right" style="margin-top:5px"></i>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation
</li>
<li>General
</li>
<li>Buttons
</li>
<li>Tabs & Accordions
</li>
<li>Typography
</li>
<li>FontAwesome
</li>
<li>Slider
</li>
<li>Panels
</li>
<li>Widgets
</li>
<li>Bootstrap Model
</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</nav>
</aside>
<div class="main">
</div>
Your HTML structure is not quite what Bootstrap expects and you won't be able to use the easy way of data-parent attribute on this structure (the items should be divs and have the class panel anyway). Please see documentation for more info if interested. But for your problem and something you can make work directly into your HTML. I added toggle-this class to all the parent menu items which are toggled and added the attribute data-parent="menu-content" to them also. Then I just use this jQuery function to see if there are any menus expanded on click and collapse all the other than the one just clicked like this:
$(document).on('click', '.toggle-this', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = $('#' + parent).find('[aria-expanded="true"]');
if (actives && actives.length) {
hasData = actives.data('collapse');
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
Here's a working JSFiddle: https://jsfiddle.net/thepio/x5j6v5fq/
Your html does not follow the documentation from bootstrap.
The right structure should be something like this:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
UI Elements <span class="caret"></span>
<ul class="dropdown-menu">
<li>CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
...
</ul>
</li>
...
</ul>
I relize that this would mean you have to re-style some parts of your navigation, but it gives you the functionality that you want.
For more information check bootstraps documentation about navbars
Alternative you can make a little script to change/remove classes on the opened menu items when you click a new one.
The link of this url is not working , I am using bootstrap for dropdown.
<a data-target="#" href="washington-record-sealing/" role="button" class="dropdown-toggle" data-toggle="dropdown">
Record Sealing <i class="fa fa-angle-down"></i>
</a>
I think you looking for these.
a {
text-decoration: none;
}
a:hover {
color: #ec4445;
text-decoration: none;
}
a:active, a:hover {
outline: 0 none;
}
ul {
list-style: outside none none;
margin: 0;
padding: 0
}
.main-menu ul li {
float: left;
position: relative;
}
.main-menu ul li a {
color: #444;
display: block;
font-size: 14px;
font-weight: 600;
padding: 15px 20px;
text-transform: uppercase;
}
.main-menu > ul > li:hover > a {
color: #83cbdc;
}
.main-menu ul li::before {
background: #ddd none repeat scroll 0 0;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 10px;
width: 1px;
}
.main-menu ul li ul {
background: #393939 none repeat scroll 0 0;
left: 0;
position: absolute;
width: 200px;
transition: 0.3s;
opacity: 0;
top: 160%;
visibility: hidden;
}
.main-menu ul li:hover ul {
opacity: 1;
visibility: visible;
top: 100%;
}
.main-menu ul li ul li:before {
display: none;
}
.main-menu ul li ul li {
float: none;
}
.main-menu ul li ul li a {
color: #9e9e9e;
font-weight: 400;
padding: 7px 20px;
text-transform: capitalize;
transition: 0.3s;
}
.main-menu ul li ul li:hover a {
color: #5eb4dc;
font-weight: 500;
padding-left: 30px;
}
.main-menu ul li .mega-menu {
background: #393939;
left: 0;
width: 700px;
position: absolute;
top: 160%;
transition: 0.3s;
opacity: 0;
visibility: hidden;
text-align: left;
}
.main-menu ul li:hover .mega-menu {
opacity: 1;
visibility: visible;
top: 100%;
}
.main-menu ul li .mega-menu span {
width: 33.33%;
float: left;
}
.main-menu ul li .mega-menu span a {
color: #9e9e9e;
font-weight: normal;
font-size: 13px;
margin: 0 25px;
padding: 8px 0;
text-transform: capitalize;
transition: 0.4s;
}
.main-menu ul li .mega-menu span a:hover {
color: #6cc6d6;
font-weight: 500;
padding-left: 15px;
}
.main-menu ul li .mega-menu span a.mega-title {
border-bottom: 1px solid #9e9e9e;
font-weight: 600;
margin-bottom: 10px;
margin-top: 15px;
text-transform: uppercase;
}
.main-menu ul li .mega-menu span a.mega-title:hover {
padding-left: 0;
}
<div class="main-menu-area">
<div class="container">
<div class="row">
<div class="col-md-11">
<div class="main-menu">
<nav>
<ul>
<li>home <i class="fa fa-caret-down"></i>
<ul>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
</ul>
</li>
<li>mega menu <i class="fa fa-caret-down"></i>
<div class="mega-menu">
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
</div>
</li>
<li>work <i class="fa fa-caret-down"></i></li>
<li>shop <i class="fa fa-caret-down"></i></li>
<li>blog <i class="fa fa-caret-down"></i>
<ul>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
</ul>
</li>
<li>contact <i class="fa fa-caret-down"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>