I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.
The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.
http://geedmo.github.io/yamm3/#navbar-collapse-grid
Something similar to this http://www.bentleymotors.com/en.html but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.
This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.
HTML
<nav class="navbar yamm navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="grid">
<div class="row">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown yamm-fw">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</li>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
CSS
img { width: 100%; }
.carousel {
height: 700px;
overflow: hidden;
}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
color: #fff;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
margin-top: -100px;
}
h2, h2 a, h2 a:hover {
color: #0a7a3f;
margin-top: 20%;
}
h2 a:hover {
text-decoration: none;
}
.navbar{
margin-bottom: 0;
}
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
.navbar-default {
background: #0a7a3f;
border: none;
}
.grid { padding: 10px; }
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
background-color: #fff;
color: #000;
}
.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
EDIT: JSFiddle - http://jsfiddle.net/kr1j2gbu/
I have found your question because I was also interested in similar functionality, but such that would be more responsive (for mobile devices to do it on click).
Here below is the solution, in case someone else needs it, too:
For Bootstrap 3.1.1
Run it with JSfiddle: http://jsfiddle.net/chirayu45/Khh4C/1/
Look for this similar question, too.
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
CSS:
.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;
}
.right-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.left-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
JS:
$(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();
});
});
Related
I want to implement a dropdown menu where hovering over a particular option from the menu opens another set of options, something like this (hovering over Option 3 opens up menu containing Option 4 and 5) -
I have been trying similar thing using carbon classes (taken reference from - https://the-carbon-components.netlify.app/?nav=dropdown and https://codepen.io/team/carbon/pen/wEGEoz) but I am not able to achieve it.
This is what my code looks like -
HTML -
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Choose an option</li>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="Option 1" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a></li>
<li data-option data-value="Option 2" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a></li>
<li data-option data-value="Option 3" class="bx--dropdown-item" id="openMenu"><a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
<ul class="bx--dropdown-list" id="customMenu" style="display:none;margin-left:75px;">
<li data-option data-value="Option 4" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a></li>
<li data-option data-value="Option 5" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS -
.bx--dropdown {
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
list-style: none;
display: block;
background-color: white;
border: none;
border-bottom: 1px solid #8C8c8c;
width: 100%;
height: 2.5rem;
cursor: pointer;
color: #171717;
outline: 2px solid transparent;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--dropdown-text {
display: block;
padding-left: 1rem;
padding-right: 2.625rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
}
.bx--dropdown-list {
background-color: white;
display: flex;
flex-direction: column;
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
width: 100%;
list-style: none;
position: absolute;
z-index: 1000;
max-height: 0;
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
overflow-x: auto;
overflow-y: auto;
}
.bx--dropdown-item {
transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity
70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms
cubic-bezier(0.2, 0, 0.38, 0.9);
opacity: 0;
visibility: inherit;
position: relative;
}
.bx--dropdown-link {
display: block;
outline: 2px solid transparent;
outline-offset: -2px;
height: 2.5rem;
color: #393939;
text-decoration: none;
font-weight: normal;
line-height: 1rem;
padding: 0.6875rem 0;
margin: 0 1rem;
border: 1px solid transparent;
border-top-color: #e0e0e0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bx--dropdown--open .bx--dropdown-list {
max-height: 15rem;
transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
.bx--dropdown--open .bx--dropdown-item {
opacity: 1;
}
Here .bx--dropdown--open class gets added to ul containing class bx--dropdwon after clicking on 'Choose an option' box, like -
<ul data-dropdown="" data-value="" class="bx--dropdown bx--dropdown--open" tabindex="0">
JS -
$("#openMenu").on("mouseover",function() {showNew();});
$("#openMenu").on("mouseout",function() {showOld();});
function showNew(evt) {
$("#customMenu").attr("style", "display:block;margin-left:75px;");
}
function showOld() {
$("#customMenu").attr("style", "display:none");
}
The problem is that on hovering over Option 3 a scrollbar appears within the dropdown menu and the options Option 4 and Option 5 show within the initial dropdown only -
I want it to appear out of that box in the same way as it is in the first example that I have given. I am unable to understand how to make it work even after spending a lot of time with it. Any help is appreciated.
I don't think you can make it with the sole use of carbon.
I combined carbon and bootstrap to achieve a top-nav with multi level dropdown sub-items.
https://the-carbon-components.netlify.app/component/ui-shell--default.html
https://bootstrap-menu.com/demos/multilevel.html
.dropdown-menu li {
position: relative;
}
.nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
padding-top: 7px;
}
.dropdown-menu>li:hover>.submenu {
display: block;
}
.dropdown-item {
background-color: #262626;
}
<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet" />
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<header class="bx--header">
<nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
<ul class="bx--header__menu-bar" aria-label="Platform Name">
<li class="bx--header__submenu" data-header-submenu>
<a class="bx--header__menu-item bx--header__menu-title" aria-haspopup="true" aria-expanded="false" tabindex="0"><strong> Main </strong>
<svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</a>
<ul class="bx--header__menu navbar-nav" aria-label="Sub1">
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 1 </strong> >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub1" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 1 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub2" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 2 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 3 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 2 </strong> >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 4 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub5" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 5 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 3 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 4 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
I want to have a dropdown menu that can keep dropping down but instead of going down, dropping to the right like this pic
I know how to create a dropdown menu that goes below only like this pic
My current HTML code :
<div class="nav navbar-fixed-top">
<ul>
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my</li>
<ul>
<li>hehe</li>
</ul>
</ul>
</li>
My current CSS style :
.nav li {
font-size: 1.2em;
text-align: left;
width: 220px;
line-height: 60px;
font-size: 1.4em;
display: inline-block;
margin-right: -7px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Does anyone know the CCS style to enable it going to the right?
You can simply do it like this:
.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}
<ul class="outer">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my
<ul>
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
I hope the below helps.
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 1rem;
position: relative;
max-width: 200px;
width: 200px;
}
li:not(:last-child) {
border-bottom: thin solid white;
}
li>a {
color: white;
}
.main>li {
background-color: blue;
}
.sub>li {
background-color: red;
}
.subsub>li {
background-color: green;
}
.sub,
.subsub {
display: none;
}
.main>li:hover>.sub,
.sub>li:hover>.subsub {
display: inline-block;
position: absolute;
top: 0;
right: -200px;
}
<div class="nav">
<ul class="main">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul class="sub">
<li class="tuto2">www.e-homes.com.my
<ul class="subsub">
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
html code
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
css code
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jquery
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
if you have doubt for creatring drop down link you may Refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
I am using this code LINK.
When i click on Parent Menu like Services then sub-menu of services menu will be open but when i click on other menu then other sub menu will also open.
I want when i click on other sub menu then previous sub-menu will be close.
Kindly provide me solution for this.
Thank you
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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 <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>
Basically you need to know the concept of not() in jQuery, so that you can hide the element except clicked one. Here is the working example.
$('#menu-content').children("li").on('click', function(){
$("li[data-toggle='collapse']").not(this).addClass('collapsed');
$("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
//alert('clicked');
});
.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;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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 <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>
Another version of code which works for me.
$(".submenu").not('.submenu-child').click(function()
{
$(".submenu").not(this).find(".collapse").collapse('hide');
});
Where submenu class is applied to parent menu and submenu-child class applied to submenus.
Is it possible to make the position absolute dropdown stay on top of the scrollable container, and move along with the position relative parent when scrolling? Right now, the dropdown appears within the scrollable area.
The screenshot below is what I want to achieve. I'm also open to javascript solutions if needed.
jsFiddle
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
An easy way is to make the position of dropdown fixed, but make sure to apply the left and top values accordingly. Another way is to append the dropdown menu outside the ul element, so when it appears it will not be wrapped within it.
.dropdown {
position: fixed;
}
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: fixed;
background-color: #fff;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
Edit
I added one more snippet that does not use fixed position. It changes its coordinates when open based on the parent offset.
$('#menu1, #submenu1').mouseover(function(event) {
$('#submenu1').addClass("show").css($('#menu1').offset());
});
$('#menu1, #submenu1').mouseleave(function(event) {
$('#submenu1').removeClass("show");
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown.show {
display: block;
margin-left: 1px;
background-color: #fff;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
<li id="menu1" class="navbar-item">
<a>Item A</a>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
<ul id="submenu1" class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
Here's an option using jQuery.
Basically, as others have mentioned, you'll have to move the subnav items outside of the main nav's wrapper, so that they are not hidden.
We can put them in their own wrapper that has a similar markup to the main nav's wrapper, and then match them up using a data element to allow for showing/hiding on click.
Then, when we scroll the main navbar, we can sync the subnav wrapper to that element's scroll position, so the subnav items appear to be fixed to the main nav items.
Lastly, we can hide the subnav wrapper's scroll bar with CSS.
The snippet below should get you the general idea, then you can style it as necessary to make it look more like the primary and secondary nav items are connected.
Click a nav item in the main nav, then scroll to the side to see it in action:
$(function(){
var navbar = $('.navbar');
var subnavBar = $('.subnavs-wrapper .scrollbar-hider');
$(navbar).find('li').each(function(){
var dataId = $(this).attr('data-id');
var matchingUl = $(this).parent().next().find('ul[data-id="' + dataId + '"]');
$(this).on('click', function(){
$(matchingUl).css('visibility') == 'hidden' ?
$(matchingUl).css('visibility', 'visible') : $(matchingUl).css('visibility', 'hidden');
});
$(navbar).on('scroll', function(){
$(subnavBar).scrollLeft($(this).scrollLeft());
});
});
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
display: flex;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
flex-shrink: 0;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
.subnavs-wrapper {
overflow: hidden; /* hide scrollbar */
}
.subnavs-wrapper .scrollbar-hider {
display: flex;
overflow: auto;
padding-bottom: 50px; /* hide scrollbar */
margin-bottom: -50px; /* hide scrollbar */
}
.subnav {
width: 200px;
padding-left: 0;
list-style: none;
visibility: hidden;
flex-shrink: 0;
border: 1px solid black;
}
<ul class="navbar">
<li class="navbar-item" data-id="one"><a>Item A</a>
<li class="navbar-item" data-id="two"><a>Item B</a></li>
<li class="navbar-item" data-id="three"><a>Item C</a></li>
<li class="navbar-item" data-id="four"><a>Item D</a></li>
<li class="navbar-item" data-id="five"><a>Item E</a></li>
</ul>
<div class="subnavs-wrapper">
<div class="scrollbar-hider">
<ul class="subnav" data-id="one">
<li>Sub Item A.A</li>
<li>Sub Item A.B</li>
<li>Sub Item A.C</li>
</ul>
<ul class="subnav" data-id="two">
<li><a>Sub Item B.A</a></li>
</ul>
<ul class="subnav" data-id="three">
<li><a>Sub Item C.A</a></li>
<li><a>Sub Item C.B</a></li>
</ul>
<ul class="subnav" data-id="four">
<li><a>Sub Item D.A</a></li>
<li><a>Sub Item D.B</a></li>
</ul>
<ul class="subnav" data-id="five">
<li><a>Sub Item E.A</a></li>
<li><a>Sub Item E.B</a></li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
I have a menu with sub menu(vertical). My first li is active with the sub menu.
My problem is when I hover in the other li I have the sub menu added in my last one.
What I need is:
when I hover in my menu, to get only the sub menu of my current li
when my cursor is not hovering in my menu, to get the default sub menu that has the on class
this is the link of jsFiddle
http://jsfiddle.net/bymb6kvm/2/
this my code :
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS Code
#menuu ul{
margin:0;
padding:0;
padding-left:97px;
line-height:30px;
}
#menuu li{
float: left;
list-style: outside none none;
}
.sousmenu{
color: #000 !important;
text-decoration:none;
width:150px;
height:30px;
display:block;
text-align:center;
border:1px solid #000;
}
.niveau2{
margin-left: -50px !important;
}
.niveau2 a{
padding-left:20px !important;
text-decoration:none;
color:red ;
}
.sousmenu:hover{
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul{
position:absolute;
visibility:hidden;
padding-left:0px;
}
#menuu ul ul li:hover a{
color:#000;
}
#menuu ul ul ul{
left:152px;
top:-0.5px;
display:none;
}
#menuu ul li:hover ul{
visibility:visible;
}
.niveau2.on{
visibility:visible !important;
}
JS Code
$(document).ready(function(e){
$('.sousmenu').hover(function(e){
e.preventDefault();
var getID=$(this).attr('id');
$("#"+getID+"H").css("visibility","visible");
$(".on").css("visibility","hidden");
});
});
Try this:
$(document).ready(function(e) {
$('.sousmenu').hover(function(e) {
e.preventDefault();
var getID = $(this).attr('id');
$(".niveau2").hide();
$("#" + getID + "H").show();
});
});
#menuu ul {
margin: 0;
padding: 0;
padding-left: 97px;
line-height: 30px;
}
#menuu li {
float: left;
list-style: outside none none;
}
.sousmenu {
color: #000 !important;
text-decoration: none;
width: 150px;
height: 30px;
display: block;
text-align: center;
border: 1px solid #000;
}
.niveau2 {
margin-left: -50px !important;
}
.niveau2 a {
padding-left: 20px !important;
text-decoration: none;
color: red;
}
.sousmenu:hover {
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul {
position: absolute;
visibility: hidden;
padding-left: 0px;
}
#menuu ul ul li:hover a {
color: #000;
}
#menuu ul ul ul {
left: 152px;
top: -0.5px;
display: none;
}
#menuu ul li:hover ul {
visibility: visible;
}
.niveau2.on {
visibility: visible !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li>ss test 1</li>
<li>ss test 2</li>
</ul>
</li>
</ul>
</div>
</nav>
View on jsFiddle