I have a a navigation with a sub navigation which is hidden by default, and I want to show the sub nav for each item on click, but currently on click it shows the subnav for all items at once since the click is toggling a class. How can I only toggle the subnav of the clicked item?
HTML
<nav class="st-menu" id="menu-4a">
<ul>
<li>
Guidance Manual
</li>
<li>
Resource Directory<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Stormwater Plan Review Resources</li>
<li>Pilot Projects</li>
<li>Proprietary Products</li>
<li>Additional Resources</li>
</ul>
</li>
<li>
Stormwater 101<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Regulations</li>
<li>Stormwater Management</li>
<li>Stormwater Billing & Retrofits</li>
<li>Green City, Clean Waters</li>
</ul>
</li>
<li>
Contact Us<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>About Us</li>
<li>Development Review Contacts</li>
</ul>
</li>
</ul>
</nav>
jQuery
$(".toggle-arrow").click(function(){
$(".reg-subnav").toggleClass('open-sub');
});
$(".toggle-arrow").click(function(){
$(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
});
Both the arrow and the element you want to toggle, belong to an <li>. You can find the closest parent li that owns both of them, then find the element you want to toggle.
Related
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
After wasting the whole day in efforts i am still not able to set the position of third level Menu. It shows always on top.
This is the Link of fiddle. Please suggest the change.
Piece of Html
<nav id="menu-main">
<ul id="menu">
<li class="item-132 deeper parent">Services
<ul>
<li class="item-132">Retail Banking
<ul>
<li class="levelThreeAlign">Sub sub menu</li>
</ul>
</li>
<li class="item-132">Types of Loans
<ul>
<li>Sub sub menu</li>
</ul></li>
</ul>
</li>
</ul>
</nav>
Whole CSS and HTML in Fiddle.
JS Fiddle
Your Problem is fixed
.item-132{ position : relative;}
I have a dropdown menu on my site - http://lady-cosmetics.ru/
The problem is that if I click on any link from dropped menu nothing happens. It behaves just like if I click not on the link, but on empty space, the menu only disappears.
Try to roll over the last item of the menu and you'll see what I mean.
The problem exists only on IOS 7.x in any browser.
Here is html of the menu:
<ul>
....
<li class="has-sub">
Все бренды
<ul class="subMenu">
<li>
<a target="_self" href="/collection/emerald-bay">Emerald Bay</a>
</li>
<li>
<a target="_self" href="/collection/gehwol">Gehwol</a>
</li>
</ul>
</li>
.....
</ul>
As you can see it is just a simple list that converts to dropdown menu by jquery plugin.
Why links from dropped part of the menu don't work in IOS?
It works fine on my iphone/ipad you can still try doing this thing
<ul>
....
<li class="has-sub">
Все бренды
<ul class="subMenu">
<li>
Emerald Bay
</li>
<li>
Gehwol
</li>
</ul>
</li>
.....
</ul>
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.
The following menu works really fine in the browser, but I cant get it to validate as XHTML. I took this example out of my CSS Book. It says it is right, but seemingly it is not.
<ul id="leftNavi">
<li>
left menu1
</li>
<li class="SCNL">left menu2</li>
<ul id="subnavi">
<li>
menu2/1
</li>
<li>
menu2/2
</li>
<li>
menu2/3
<li>
</ul>
<li>
left menu3
</li>
</ul>
Here a link to the page: http://www.yiip.de/arbeit/testlayout/standard_template.html I am talking about the left menu.
<ul id="leftNavi">
<li >left menu1</li>
<li class="SCNL">left menu2
<ul id="subnavi">
<li>menu2/1</li>
<li>menu2/2</li>
<li>menu2/3</li>
</ul>
</li>
<li>left menu3</li>
</ul>
You had a couple of problems:
The line with 3 as the list item didn't have a correct closing <li> element; and
The subnav1 list wasn't contained within a <li> element. It can't be a direct child of another list, which was the main problem with validating your HTML.