I have a mega dropdown menu like this from bootstrap (code simplified) :
<li class="dropdown mega-dropdown">
Menu Button
<ul tabindex="-1">
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
Small fiddle here : https://jsfiddle.net/48m2ppzc/
I want to simplify the navigation with the tab key :
At the beginning the element <ul> has a max-heightof 0px so I shoudn't be able to navigate inside it with the tab key (because the menu is hidden).
When I click on the "Menu Button" link, the menu should show up (I set max-height to 500px), and I need to change the tabindex to '0' (I can do it with JQuery so that's not a problem)
The problem is at the first point : tabindex="-1" doesn't work, I can still navigate inside the menu with the tab key.
How can I fix this problem? I use HTML5 so tabindex should work on all HTML elements, I also tried with tabindex="0".
tabindex is not inherited by the children of an element, so you need to set it manually on all items:
<li class="dropdown mega-dropdown">
Menu Button
<ul>
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
Since this is probably accessibility related, it might help semantically to use the aria-hidden attribute as well (and toggle it, once it is visible):
<li class="dropdown mega-dropdown">
Menu Button
<ul aria-hidden="true">
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
Related
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.
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>
I am using Foundation 5.4.5 dropdown for my login form but the problem is that the dropdown appears like this:
I want it to be like the one opened where the nub on the right and the body positioned well
Here is my HTML:
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
You have two options
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" data-options="align:left">Has Dropdown</a>
Or
<ul id="drop1" class="f-dropdown drop-left" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
Both work AS WORKAROUNDS. However, I get your point: you want your dropdown to be displayed in the bottom of your link, but aligned with the right border. I would be grateful if someone came up with an answer for that because the foundation site show it is possible in some undocumented way.
To specify how the drop down shows use the align property in data-options on the target element.
Add data-options="align:right" to the a tag.
Using Foundation 5, I am trying to have a dropdown within a dropdown...
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
But without any success!
The Share menu, is always displaying under the Modify menu.
EDIT 1
I tried something else, it's better but not good enough:
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li ><a data-dropdown="drop2" href="#" >Share</a>
<ul id="drop2" class="f-dropdown content " data-dropdown-content >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
And added to my .css:
.f-dropdown.content {display: block;}
Here is my full css: http://pastebin.com/QPaFbenF with the previous line at line 67
But when clicking on Share, the More menu disapear and I have to put my mouse over the More link to get the the More menu and his sub-menu Share displayed.
I have found this question on the zurb forum : dropdown within dropdown and tried the answers, without any success :S
.f-dropdown.content will do nothing since you dont have a class named content under f-dropdown class
these should be in your css:
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}
Working Example
Nested dropdown menus tend to get complicated when you start from scratch. I would always recommend to start with superfish. You can a see a working demo here: http://users.tpg.com.au/j_birch/plugins/superfish/examples/
I had the same issue, and I realised I simply didn't include the jQuery trigger to get all the dropdown etc elements via the dropdown.js file working.
<script>
$(document).foundation();
</script>
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php