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!
Related
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"
I have a navigation menu with class name: "custom-menu-class". It's in Wordpress.
I want to make an active class meaning that when a link is active (url matches), and/or mouse hovers a link, a div is inserted in the parent element (a white circle on top of the text).
enter image description here
Playing around with inspect element, I found that adding:
<div style="
border: 6px solid white;
border-radius: 50px;
width: 12px;
position: absolute;
top: -15%;
left: 33%;
">
</div>
to the parent element gives me what I need.
I also need it for the active menu item only.
Can someone help me? Trying to achieve this:
enter image description here
I wouldn't insert a div — I would use the ::before pseudo-element. Read more on that here.
If you are using a WordPress menu wp_nav_menu(), WP will automatically add .current-menu-item to the current menu item li — meaning if you are at www.example.com/contact — the contact menu item will be given the .current-menu-item class. Here's a screenshot of the markup:
For any hovering styling you would just use :hover — read more here
Using the Twenty Twenty theme's menu markup, here is what I would do — I added in bootstrap just for demo purposes.
/* For demo purposes */
ul {
background-color: #999;
list-style: none;
padding-bottom: 20px;
padding-top: 20px;
}
ul li a {
color: #fff;
}
ul li a:hover {
color: #fff;
text-decoration: none;
}
/* Start custom styles */
ul li {
position: relative;
}
ul li.current-menu-item a::before,
ul li a:hover::before {
background-color: #fff;
border-radius: 100%;
content: ' ';
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style row">
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto">
Home
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto">
Exhibitions
</li>
<li id="menu-item-73"
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto">
About Us
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto">
News
</li>
</ul>
</nav>
This worked
/* For demo purposes */
ul {
background-color: #999;
list-style: none;
padding-bottom: 20px;
padding-top: 20px;
}
ul li a {
color: #fff;
}
ul li a:hover {
color: #fff;
text-decoration: none;
}
/* Start custom styles */
ul li {
position: relative;
}
ul li.current-menu-item a::before,
ul li a:hover::before {
background-color: #fff;
border-radius: 100%;
content: ' ';
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style row">
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto">
Home
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto">
Exhibitions
</li>
<li id="menu-item-73"
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto">
About Us
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto">
News
</li>
</ul>
</nav>
exactly what you expected. i have written small js function to toggle between active class.
var btns = document.querySelectorAll(".menu-box li a");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(e) {
for (var j = 0; j < btns.length; j++) {
btns[j].classList.remove('active')
}
e.target.classList.add('active')
});
}
* {
margin: 0;
padding: 0
}
.menu-container {
width: 100%;
background: red;
}
.menu-box {
display: flex;
justify-content: space-evenly;
padding: 15px
}
.menu-box li {
text-decoration: none;
list-style-type: none;
}
.menu-box li a {
text-decoration: none;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.menu-box li a:hover:before {
opacity: 1;
}
.menu-box li a.active:before {
opacity: 1;
}
.menu-box li a:before {
opacity: 0;
content: '';
display: inline-block;
width: 11px;
height: 11px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #fff;
margin: 0 auto;
transition: .3s
}
<nav class="menu-container">
<ul class="menu-box">
<li><a class="active" href="#home">Home</a></li>
<li>Emisione</li>
<li>Blog</li>
<li>About us</li>
</ul>
</nav>
As seen in the above image, I want the block with contents of "This is heading" to be positioned inline with the book icon.
Here is my html code
<div class="lessions">
<ul>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="lession-heading">This is heading</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
</ul>
</div>
And my css
.lession-heading{
background: #c1c1c1;
font-size: 100%;
border: 1px solid #aaa;
padding: 15px 0 15px 15px!important;
margin-left: 0px;
color: #000;
list-style-type: none;
}
So if I understand correctly, the books on the left are the bullet points for your list.
There are a few different things you can do to try fixing this:
1. You could change it from a list to a series of p tags, and leave the books as images you insert before any text:
img {
height: 20px;
}
#heading{
background:#c1c1c1;
border: 1px solid #aaa;
padding: 15px 0 15px 15px!important;
list-style-type:none;
max-width:140px;
}
<p>
<img src="http://thebookman.org/bookwebsite.jpg"> Chapter One
</p>
<p>
<img src="http://thebookman.org/bookwebsite.jpg">Chapter Two
</p>
<p id="heading">This is the heading</li>
<p>
<img src="http://thebookman.org/bookwebsite.jpg"> Chapter Three
</p>
You could put the list into a div container and give it a margin-left bringing it in-line with the header
.lession-heading{
background: #c1c1c1;
font-size: 100%;
border: 1px solid #aaa;
padding: 15px 0 15px 15px!important;
margin-left: 0px;
color: #000;
list-style-type: none;
}
div{
margin-left:15px;
}
<div class="lessions">
<ul>
<div><li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li></div>
<li class="lession-heading">This is heading</li>
<div><li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li></div>
</ul>
</div>
You could give the header a negative margin forcing it farther left.
.lession-heading{
background: #c1c1c1;
font-size: 100%;
border: 1px solid #aaa;
padding: 15px 0 15px 15px!important;
margin-left: 0px;
color: #000;
list-style-type: none;
margin-left:-20px;
}
<div class="lessions">
<ul>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="lession-heading">This is heading</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
</ul>
</div>
You could use a negative margin on your list item, to bring it inline with the rest. margin-left: -15px;
.lession-heading {
background: #c1c1c1;
font-size: 100%;
border: 1px solid #aaa;
padding: 15px 0 15px 15px!important;
margin-left: -15px;
color: #000;
text-align: left;
list-style-type: none;
}
<div class="lessions">
<ul>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="lession-heading">This is heading</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
<li class="chapter">History</li>
</ul>
</div>
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