So my problem is just as simple as the title, when I click the big black "V" to toggle my menu, the animation jumps on the <li> with the sub menu.
I tried multiple things and none seem to work, I had a similar issue with the width which I solved by setting width to 100%. On my search I saw people that jQuery can't figure out the height of the elements but if I try to add height to the elements it totaly breaks the menu.
Here's the codepen so you can experience my problem. CODEPEN
HTML
<nav class="main-menu">
<ul>
<li class="level-1">Item 1
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 1.1
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.1.1</li>
<li class="level-3">Item 1.1.2</li>
<li class="level-3">Item 1.1.3</li>
<li class="level-3">Item 1.1.4</li>
</ul>
</li>
<li class="level-2">Item 1.2
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.2.1</li>
<li class="level-3">Item 1.2.2</li>
</ul>
</li>
<li class="level-2">Item 1.3</li>
</ul>
</li>
<li class="level-1">Item 2
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 2.1</li>
<li class="level-2">Item 2.2</li>
<li class="level-2">Item 2.3</li>
<li class="level-2">Item 2.4</li>
<li class="level-2">Item 2.5</li>
</ul>
</li>
<li class="level-1">Item 3</li>
<li class="level-1">BItem 4
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 4.1</li>
<li class="level-2">Item 4.2</li>
</ul>
</li>
</ul>
</nav>
CSS
.main-menu .sub-menu-1, .main-menu .sub-menu-2 {
display: none;
}
.main-menu ul {
width: 100%;
}
.main-menu li {
line-height: 25px;
}
.main-menu li.level-1 {
background-color: red;
}
.main-menu li.level-2 {
background-color: lightblue;
}
.main-menu li.level-3 {
background-color: yellow;
}
.main-menu a {
display: block;
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: block;
float: right;;
font-size: 20px;
font-weight: bold;
width: 20px;
transform: translateY(-25px);
}
Javascript/jQuery
$(document).ready(function() {
$('.sub-menu-1, .sub-menu-2').hide();
$('.toggle-1').click( function() {
$(this).next('.sub-menu-1').slideToggle();
});
$('.toggle-2').click( function() {
$(this).next('.sub-menu-2').slideToggle();
});
});
Thank you in advance and hope somenone can help me out.
The issue is arising from the <span> that you have set to display: block; in your css.
Switching .main-menu a and .main-menu .toggle-1, .main-menu .toggle-2 to both be display: inline-block; fixes the issue. You can then also remove some additional unnecessary css hacks that you were previously using to forcibly place these elements outside of their document flow position.
The updated CSS is below, and you can see a fork of the pen with both sub-menus working here
.main-menu a {
display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: inline-block;
float: right;
font-size: 20px;
font-weight: bold;
width: 20px;
}
I think the only problem is that you didn't set the clear property to your float. If you set it like:
.main-menu a {
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
float: right;
clear: none;
font-size: 20px;
font-weight: bold;
width: 20px;
}
you are good. Then you also don't need the transform: translate to shift your elements back. Here's a fork of your codepen: http://codepen.io/anon/pen/WwbPLV
Related
I have gotten it to open and close when hovering over the nav link but how do I keep it open so I can access the content on the menu? I need it to work exactly how a dropdown menu works.
This is what I have done so far I also need the html layout to stay the same.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
View on jsFiddle
Should remove margin use padding for that, if not when we enter that margin area mouse leave event will trigger.
$('.nav-link--dropdown').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
$('.dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
padding: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
The problem you have here is that you leave the nav-link--dropdown when you move to your dropdown-menu. The simple solution: Include your dropdown-menu in your nav item.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">
dropdown
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</li>
</ul>
</div>
You can achieve this by bundling the menu item you want to hover over and it's dropdown in the same div.
<div class="nav">
<ul>
<li class="nav-link">home</li>
<div class="innerNav">
<li class="nav-link--dropdown">dropdown</li>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</div>
</ul>
</div>
And:
$('.innerNav').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.innerNav').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
See this JSFiddle: https://jsfiddle.net/rmdfqh6c/
Since your problem is the mouseleave event will trigger when you try to move the mouse to the bellow dropdown menu, if you really must keep the elements separated, add the dropdown-menu to the class that keeps the display:block
$('.nav-link--dropdown, .dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown, .dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
And remove margin/padding from menu items. Use line-height instead if you want some spacing:
.nav ul li {
line-height: 40px;
}
ul {
list-style: none;
margin: 0; // <--- I changed this from padding: 0px;
display: flex;
}
Otherwise the other suggested solutions to include the dropdown within you parent <ul> element is the best.
JSFiddle
I want the dropdown menu behave like here: https://svyaznoy.ru
var timer;
$(".catalog-menu li").mouseenter(function() {
var that = this;
timer = setTimeout(function(){
$(that).children(".submenu").show();
}, 500);
}).mouseleave(function() {
var that = this;
clearTimeout(timer);
setTimeout(function () {
$(that).children(".submenu").hide();
}, 500);
});
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
display: none;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
It works somewhat similar to svyaznoy.ru, but have a bug.
For example, I hover on "Apple" menu item. Laptops and iPhones show up. Next I hover on "Laptops". Some apple laptop models show up. And here's where the bug shows: if my mouse pointer doesn't leave "Laptops" item and goes straight to laptops submenu - all is ok, but when it leaves "Laptops" on the way to laptops list, e.g. it hovers on iPhones for a moment, then laptops list hides, and I want it to stay there. How can I fix this bug?
jsfiddle: https://jsfiddle.net/16region/vtrj9wgk/30/
You can change display: none to visibility: hidden and add transition-delay. And so you wont need jquery/js
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
visibility: hidden;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
transition: 0s visibility;
transition-delay: 0.5s;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li:hover > ul.submenu {
visibility: visible;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
As soon as I click the menu is expanded and then arrow is rotated. What I want is as soon as I click, menu should expand and arrow should rotate in parallel. How can I achieve that?
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
$('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
if ($(this).parents('.product-menu').hasClass('active')) {
$(this).parents('.product-menu').removeClass('active')
} else $(this).parents('.product-menu').addClass('active');
});
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1
</li>
</ul>
</li>
<li class="product-menu" id="one">Template C
</li>
<li class="product-menu">Template D
</li>
<li class="product-menu">Template E
</li>
<li class="product-menu">Template F
</li>
</ul>
<div class="product-container" />
</div>
The issue is because you're toggling the class in the callback of the animation, so it happens when the animation ends. Simply move that logic in to the outer click event handler.
Also note that you can simplify the whole if condition by just calling toggleClass(). Try this:
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
var $a = $(this);
$('ul.sub-menu').not($a.siblings()).slideUp("slow").closest('.product-menu').removeClass('active');
$a.closest('.product-menu').toggleClass('active');
$a.siblings("ul.sub-menu").slideToggle("slow");
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1</li>
</ul>
</li>
<li class="product-menu" id="one">Template C</li>
<li class="product-menu">Template D</li>
<li class="product-menu">Template E</li>
<li class="product-menu">Template F</li>
</ul>
<div class="product-container" />
</div>
I have created a dropdown navigation with two sub-menu's.
I am trying to get the second sub-menu to start from the top (just underneath the primary nav/black bar) and not at it's current position but I am not sure how to do this.
Here is a codepen I made http://codepen.io/anon/pen/ByaaYM
So for example, if you hover over Personal > Caravan or Personal > Home & Property, the top of the sub menu should sit in the same place, just underneath the black bar.
Any help would be greatly appreciated
This is the outcome I would like to achieve http://codepen.io/anon/pen/OPJPNL - Notice when hovered, the sub-menu's sit flush directly underneath the black bar.
The code...
Html
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
CSS
* {
box-sizing:border-box;
}
body {
font-family: sans-serif;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
background: #333;
padding: 0 10px;
list-style: none;
position: relative;
display: inline-block;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
}
ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
ul li:hover a {
color: #fff;
}
ul li a {
display: block;
padding: 25px 40px;
color: #fff;
text-decoration: none;
}
ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
ul ul li a {
padding: 20px;
color: #fff;
}
ul ul li a:hover {
background: #4b545f;
}
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
ul ul ul li {
display: inline-block;
width: 49%;
}
.dropdown-menu > li {
width: 200px;
}
If I understand correctly, you have a padding-problem. If you remove the padding from this:
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
Here's the updated CodePen
Try Below Html Code
you need to specify margin-top css style for each inner <ul>
`
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1" style="margin-top:-60px;">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
`
I've lately managed to make my accordion menu. I did everything besides this one thing I'm looking for help.
This is my accordion menu:
HTML
<div class="sidebar-wrapper">
<ul class="main_nav">
<li><a href='#'>MAIN 1</a>
<ul class="sub-menu">
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>MAIN 2</a></li>
</ul>
</div>
CSS
.sidebar-wrapper {
width: 250px;
margin-top: 30px;
}
.main_nav {
width: 250px;
list-style: none;
padding: 40px 30px 25px 0;
font-family: Arial;
}
ul.main_nav {
padding: 0;
margin: 0;
list-style-type: none;
}
ul.main_nav li {
list-style-type: none;
}
ul.main_nav li a {
background-image: url('../images/acmenu_bg.png');
background-repeat: repeat-x;
line-height: 10px;
padding: 13px 10px;
display: block;
text-decoration: none;
font-size: 13px;
color: #fff;
font-weight: bold;
list-style: none;
}
ul.main_nav li a:hover {
/* background-image: url(''); HOVER ?!*/
color: #ef7b0b;
}
ul.main_nav ul {
margin: 0;
padding: 0;
display: none;
}
ul.main_nav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.main_nav ul li a {
background-image: url('../images/acmenu2_bg.png');
background-repeat: repeat-x;
padding-left: 20px;
font-size: 12px;
font-weight: bold;
}
ul.main_nav ul li a:hover {
color: #dcdcdc;
/* HOVER */
}
ul.main_nav ul li a:active {
background-image: url('../images/acmenu1_bg.png');
background-repeat: repeat-x;
}
ul.main_nav ul ul li a {
background: #f6f6f6;
color: #000;
padding-left: 40px;
border-bottom: 1px solid #e7e7e7;
}
ul.main_nav ul ul li a:hover {
color: #ef7b0b;
text-decoration: underline;
}
JS
$(document).ready(function() {
$('.sidebar-wrapper ul li a').click(function(ev) {
$('.sidebar-wrapper .sub-menu').not($(this).parents('.sub-menu')).slideUp();
$(this).next('.sub-menu').slideToggle();
$('.main_nav ul li a').removeClass('active');
$(this).addClass('active');
ev.stopPropagation();
});
});
My accordion menu example jsFiddle
As you can see I've tried to write the code as simple as possible. There are 2 things I can't handle with:
1st. ) I made a hover background to my sub-menus (only) - when It's clicked sub-sub menu list is showing - I would like to have only sub-menu items to be hovered (with that orange gradient), not sub-sub menu items, because when you click on sub-sub menu item it takes active state from sub-menu item, remove it and assign for yourself. I have a problem fixing that. ?
2nd. ) It's related to sub sub menu items. I would like to have sub-menu item active (covered with orange gradient background) when I have active sub sub menu item clicked (which is orange underline). One more thing, I'd like it to be always collapsed if sub sub menu item is active.
If something is unclear to you or I wrote something wrong please correct me and do not hesitate to ask for more details.
I would really appreciate for your help.
Thank you. Greetings -
Chris
While I definitely applaud the abstraction of your Javascript, which is almost always considered a benefit and a proper coding practice, it appears as though you may be sacrificing control of the elements themselves; this is most likely due to the fact that each of your menus (sub-menu, sub-sub-menu) share the same class ("sub-menu").
In order to gain greater control over your Javascript, it might be worth specifying distinct class names for each of the menu elements:
Sub-Menu (class: sub-menu)
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
Sub-Sub-Menu (class: sub-menu)
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
By specifying distinct class names, you can determine what to do/not do when a certain element is accessed in the DOM, that is:
<ul class="sub-sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>