How can I make the boxes to be responsive? For example, the last submenu falls out of boundary. I don't know how I can validate if the boxes are visible or not on the space and how to move them correctly. In this case I want so see how to move the second level if that is not visible or also move the second and third level when they are both visible but just the third level is not visible.
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #eee transparent;
position: absolute;
top: 9px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu a.open ~ .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
example
https://jsfiddle.net/mwb2caht/
image of submenu before fix and after
Use the information here, it is about #media queries.
You can give the specified properties for a certain screen dimension
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
EDIT: you can press F12 in your browser window ( on Chrome) and then ctrl + shift + M to get the responsive "tester"
Related
I'm trying to make the sub-menu to show from the top instead of starting from where it is suppose to as shown in the picture. How can I go about this?
I don't know if this would require Javascript. Please feel free to edit the CSS or add Javascript if needed.
JSFiddle Demo: https://jsfiddle.net/h91kg3s5/
HTML
<div id="main-nav" class="justify-content-end">
<ul id="menu-main-menu" class="navbar-nav">
<li class="menu-item current-menu-item current_page_item menu-item-home active nav-item">Main Menu 1
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Main Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 1
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 1</li>
<li class="menu-item nav-item">Sub Menu 2</li>
<li class="menu-item nav-item">Sub Menu 3</li>
<li class="menu-item nav-item">Sub Menu 4</li>
<li class="menu-item nav-item">Sub Menu 5</li>
<li class="menu-item nav-item">Sub Menu 6</li>
</ul>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 11</li>
<li class="menu-item nav-item">Sub Menu 12</li>
<li class="menu-item nav-item">Sub Menu 13</li>
<li class="menu-item nav-item">Sub Menu 14</li>
<li class="menu-item nav-item">Sub Menu 15</li>
<li class="menu-item nav-item">Sub Menu 16</li>
<li class="menu-item nav-item">Sub Menu 17</li>
</ul>
</li>
<li class="menu-item nav-item">Menu 3
</li>
</ul>
</li>
<li class="menu-item nav-item">Main Menu 3</li>
<li class="menu-item nav-item">Main Menu 4</li>
</ul>
</div>
CSS:
.navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav > li {
margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
border: 1px solid #999;
background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: relative;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
background-color: #ffffff;
border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
display: block;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>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.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
border-left-color: #fff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
float: none;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.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;
}
Just remove or unset this line:
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: unset;
}
JSFiddle
If you remove relative property from parent -> .dropdown.menu-item-has-children .dropdown.menu-item-has-children it stick to a parent with relative property, so your ul -> dropdown-menu show already has it!
I'm trying to create a nested sidebar menu for mobile.
When I click on the span.big I want the next ul to become visible.
So I call .next().
Now the nested ul does show, however the problem is that the li below the doesn't move down under it, meaning that the ul is overlapping the li.
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
How can i make the li move down correctly?
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu li {
height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 50px;
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>
The height of the li is restricted so the submenu can't display properly.
Plus you aren't selecting anything with the JQuery next statement.
As mentioned in the comments, if a height is required for the li, you can substitute min-height for height.
$(document).ready(function() {
$('.big').click(function() {
$(this).next('ul').slideToggle();
});
});
* {
margin: 0;
box-sizing: border-box;
}
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu >ul > li {
min-height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
height: 50px;
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>
in jQuery, next() is just used to select the next sibling of an element.
That means your javascript code isn't doing anything as you're not using the result of next()
jsFiddle : https://jsfiddle.net/6yesewh9/
the fix was changing your li css height to min-height
#cssmenu li{
min-height:50px;
}
Also I changed your .next to use .siblings` in your jQuery code
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
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();
});
});
I've been trying to make an un-ordered list(navigation menu), in which the third level will drop downwards instead of right side on click of a button. Something similar to the one here -
http://themeforest.net/item/adminica-the-professional-admin-template/full_screen_preview/160638
I've the script for it which makes the third level appear on click of a button. But i'm not able to bring the third level down. Its coming on the right side.
My code -
<ul class="drop">
<li>Home</li>
<li>Dashboard
<ul>
<li>Student Activity</li>
<li>Departments</li>
<li>Gallery</li>
<li>News and Events</li>
<li>Content Management</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</li>
<li>Student Info
<ul>
<li>Example 1
<ul class="drawer">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>Example 2
<ul class="drawer">
<li>Third level 1</li>
<li>Third level 2</li>
<li>Third level 3</li>
<li>Third level 4</li>
<li>Third level 5</li>
<li>Third level 6</li>
</ul>
</li>
</ul>
</li>
<li>Teacher Info</li>
<li>Add+</li>
<li>Student Report</li>
<li>Teacher Report</li>
</ul>
CSS -
ul.drop a {
display:block;
}
ul.drop, ul.drop li, ul.drop ul {
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555;
color: #fff;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
I'm looking for a help :) Thanks.
Update the CSS like this(commented lines are old statements):
ul.drop ul ul {
position:static;
display:none;
width:100%;
/*top: -2px; */
/*left: 100%; */
}
ul.drop li:hover > ul {
visibility: visible;
display: block;
}
However, you'll probably want to further adjust the styling for the third level menu.
Example: jsFiddle