Using Zurb Foundation, how can I change the default drop-down on hover for the top navigation menu to bind to the click event instead?
In the JavaScript console, I can trigger the event manually, using:
$('.dropdown').click();
How can this be applied as a default override in Foundation?
The Top Bar can be changed to a click event by adding a simple data-options="is_hover:false" to the <nav> element. You may need to upgrade to the latest version to have access to this feature (version 4.3.2 as of September 30, 2013).
<nav class="top-bar" data-options="is_hover:false">
<ul class="title-area">
<li class="name">
<h1>Top Bar Title </h1>
</li>
...
</ul>
</nav>
Related
Using JQuery Mobile 1.4.5, it appears that my external panel cannot hold a style!
Conventional wisdom states that .enhanceWithin(); should be called to update the contents of an element, but this does not appear to give good results with the current version of JQM.
Fiddle to demonstrate.
Has this been updated? Every answer I have found on the topic of dynamic elements losing their style is using an older version of JQM.
By default jQM 1.4.x only has 'A' and 'B' themes. You have set theme to 'C' which does not exist unless you add it to the CSS. For the fiddle, change it to:
<div data-role="panel" id="menuPanel" data-theme="b">
<ul data-role="listview" data-theme="c" data-dividertheme="b">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
Updated FIDDLE
I am creating a site with foundation 5. I have a page in which I would like a secondary navigation bar to scroll with the page until it reaches the bottom of the primary navigation, then snap into place and 'stick' while the user scrolls, effectively adding 'fixed' to the top-bar when it reaches that point. This functionality is described AND demonstrated exactly in the foundation documentation in the sticky top-bar section (see following link).
http://foundation.zurb.com/docs/components/topbar.html
PROBLEM: I am unable to implement this behavior in my site, even if I copy and paste the sticky top-bar code directly from the working example in the above link. All other elements of top-bar are functioning and the console shows no errors. I have demonstrated the issue in a plunkr:
http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview
please help me understand the issue. Thank you in advance.
Specifications:
Foundation version: 5.5.0
jQuery: 2.1.0
//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
<div class="sticky">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Sticky Top Bar</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Main Item 1</li>
</ul>
</section>
</nav>
</div>
</div>
UPDATE
Updated plunkr with proper links: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0
My issue was where I was calling
$(document).foundation()
as this is an Angular application, I ended up calling it in
app.run
which worked.
Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>
There is a problem with your plunkr site. When the page is loaded the top-bar.js file is not loaded, so this example will never work.
The browser console shows the error - Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js
You need to update the link to ensure the top-bar.js file is loaded.
The foundation website says Just add foundation.topbar.js AFTER the
foundation.js file. Your markup should look something like this:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
Few stuff to corrected
make sure tag or the div that wrap your navigation is direct child
of body tag (this important)!
make sure the direct parent; (body) has no overflow property on it
The rest is normal
if you are using bootsrap 4 :-add sticky-top as usual or you can use
separate javascript tooo will work !!
I am using bootstrap to build my site and the main navigation uses dropdowns for second level choices.
In IE10 only (works everywhere else), the dropdown menu is inconsistently accessible and if you are able to access the second level choices, they disappear after hovering off of them. In other words as you hover down the list of menu items, the one above will disappear when you hover onto the menu item below it. Perhaps there are two problems: one being you can't access the dropdown (maybe a padding issue?) but the disappearing problem, I have never seen before.
Here's my fiddle with the problem
(**When viewing the fiddle make sure to adjust the width of the Result panel otherwise it will be collapsed for mobile)
My html is pretty simple:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'>Getting Around
<ul>
<li>Find Your Ride</li>
<li>Transit Overview</li>
<li>Carpool/Vanpool</li>
<li>Biking & Walking</li>
</ul>
</li>
<li>Travel Training
<ul>
<li>Do It Yourself</li>
<li>Transit Orientation</li>
<li>Transit Ambassadors</li>
<li>Schedule a Training</li>
</ul>
</li>
<li>Senior Safe Driving</li>
<li>Programs & Services
<ul>
<li>Mobility Programs & Services Locator</li>
<li>Mobility Programs Overview</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Thank you in advance! I am stumped.
A variety of issues at work here, but I seem to have solved it. IE10 doesn't play well with display:none and once I replaced with visability: hidden on my navbar>li>ul, things seemed much better.
Also, can't confirm but since bootstrap adds a background color of transparent to its a tags, I think the background color of the list items we're going transparent. Adding a background color, adjusting the line-height seem to fix.
link to fiddle in original now works correctly in IE10.
UA: Mozilla Firefox 28.0;
AT: JAWS 14.0.1534 and NVDA 2014.1;
OS: MS Windows 7 Professional SP1
Given the following simple ARIA-enhanced menu widget, why is the associated 'Where to go' label never read? It's been my understanding that labels associated with focusable elements should be announced when focus is received. Instead, only the menu item's text is read.
<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
<li id="item-1" role="menuitem">First page</li>
<li id="item-2" role="menuitem">Second page</li>
<li id="item-3" role="menuitem">Third page</li>
</ul>
</div>
Is it some kind of "optimization" as to prevent excessive information to be read to the user everytime the menu received focus? Like, the contents of the "menuitem" would be prioritized over the labelling of the containing menu widget. Of course, this is just a wild guess. Does anybody have more details that could help clarify the above situation?
A related question based on the same code sample: I've found out that doing away with the containing div (the one with the role="application" attribute) changes absolutely nothing regarding the behavior of the widget (there's Javascript code for controlling keyboard interaction and updating the UL's aria-activedescendant attribute). When do you actually need a container with role="application"?
Based on the example, it doesn't look like something that should be a menu.
The menu role is intended for application style menus which pop-up sub-menus. See this menubar example.
Upon tabbing to the menu, you then use arrow keys to navigate, not tab.
What you've got (so far at least) is simple navigation, and on a website the most appropriate mechanism is standard links.
<nav aria-label="Where to go">
<ul id="main-menu">
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
</ul>
</nav>
The aria-label may or may not be read out by a screenreader (in a brief test NVDA did not, VoiceOver did), if that is important hide an off-screen heading above the menu. However, that label is used if the user navigates by "landmark".
If you do go for a full menu, I'd try the accessible Adobe mega-menu.
im using bootstrap pills as my navigation bar.problem is it is not showing the curent active pill with blue color background(like bootstrap)
here is my code
<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
<ul class="nav nav-pills">
<li class="active">
Home</li>
<li class="">Projects</li>
<li class="">Employee</li>
<li>Forum</li>
</ul>
</div>
the output is here
only the home pill is focused
Add this code inside script tags:
$(document).ready(function(){
$(".nav-pills li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
DEMO
To give a full answer based on the comments, your JSFiddle works exactly as expected. The item with the .active class will have the blue background for the pill.
However what I believe you expect to happen is when you click on a link that the pill will automatically become active, this is not how it works.
You will need to generate the menu on the fly and assign the active class during generation or on each page use JS to assign the active class to the correct menu list item. For ease of use I would suggest assigning ID's to the list items so you can do the following:
So say you click on the second menu item, on the Projects.php page you could have the following jquery.
$('#project').addClass("active");
Assuming you gave the menu items IDs.