I am trying to create a multi level drodown menu with the following code:
<nav role="navigation" class="navigation">
<ul>
<li>Home
</li>
<li>About
<ul>
<li>Company
<ul>
<li>Brands</li>
<li>Stuff</li>
<li>More Stuff</li>
</ul>
</li>
<li>Team
</li>
<li>Goals
</li>
<li>Photos
</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Chairs
</li>
<li>Beds
</li>
<li>Fireplace
</li>
<li>Onother
</li>
</ul>
</li>
<li>Portfolio
</li>
</ul>
</nav>
With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.
Demo: http://jsfiddle.net/ZJug9/1/
This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS
Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.
Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.
Please try to answer for this example
UPDATE
I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition
Demo 2: http://jsfiddle.net/ZJug9/3/
Related
I have a drop down superfish menu in my responsive site and while I have the menu changing to a mobile friendly sidr slide menu for most mobile devices the client would still like to have the orginal dropdown menu showing when a tablet is in landscape orientation.
This obviously creates the usual hover issue with touch devices especially since we have the top li (of a drop down) also providing a href.
My thoughts were that for those particular top level li's we'd add a class on which we could then run some javascript to replace the usual url link with a # when a mobile device is detected. That would make the top li a touch item instead of a hover link item.
Anyway below is what I have constructed to date and I had though this would work but so far I can't seem to get it to replace the original url with the #
<script>
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
}
});
</script>
I'm guessing I'm missing something really obvious but I've got to that point where I've exhausted my knowledge level - I'm not really a coder, more an enthusiastic tinkerer :).
Below is a snippet of the menu code for reference.
<div id="mateen">
<ul id="sf-menu" class="sf-menu">
<li class="menu-item">Home</li>
<li class="idevice">Advantages
<ul>
<li >Mateenbar Advantages</li>
<li >Superior Performance</li>
<li >Research and Testing</li>
<li >Frequently Asked Questions</li>
<li >Middle East</li>
</ul>
</li>
<li class="idevice">Products & Specifications
<ul>
<li >MateenBar</li>
<li >MateenDowel</li>
<li >MateenBolt</li>
</ul></li>
<li class="idevice">Applications & Projects
<ul>
<li >Corrosion & Marine</li>
<li >Roads & Transportation</li>
<li >Tunnelling & Cutting</li>
<li >Electro-magnetic</li>
<li >Projects</li>
</ul>
</li>
<li >Downloads</li>
<li class="idevice">Contacts
<ul>
<li >Locations</li>
<li >About Pultron</li>
</ul>
</li>
</ul>
</div>
Any advice or help accepted at this point - hope I've provided enough relevant information.
Thanks
The problem is with the selector. Change the following statement
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
to
$('#sf-menu > li > a').attr("href","#")
For your reference:
https://css-tricks.com/child-and-sibling-selectors/
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.
Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>
In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs
I'm having a little issue with this accordion script.
And I know why it's happening but I can't fix it. And I'm not sure it's possible to fixed it?
The accordion script i'm using is this and it's very easy to implement. http://www.i-marco.nl/weblog/jquery-accordion-menu/
The mark-up for this accordion is simple and semantic.
<ul class="menu">
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<!-- and so fourth -->
</ul>
This is the style of the markup that the script if designed to work with. And it works, see here... http://jsfiddle.net/motocomdigital/CzZqZ/1/
But my problem is because I'm working with a template that I can't change the mark-up of, see my outputted markup below.
<ul class="menu">
<ul>
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
<ul>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
</ul>
This the mark up that is outputted which is stupid.
Its outputting more than it needs to.
I've created a js fiddle for the markup above so you can see what is happening http://jsfiddle.net/motocomdigital/CzZqZ/2/
It's not closing the others when a new one is opening...
Does anyone know how to fix the script so it work like the first jsfiddle, but with the crazy markup above?
Thanks very very much if anyone can help.
Josh
Inside the click handler, change to: var parent = this.parentNode.parentNode.parentNode;. With this it works as the other example you posted.
Add the class 'noaccordian" to your "ul" elements that you want to expand/collaspse on.
Example:
<ul class="menu">
<ul class="noaccordion">
<li>
Click Here
<ul class="acitem">
I created a nice little menu with mouseovers and a drop down menu.
The navigation code is simple:
<ul class="menu" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Our History</li>
<li>Our Process</li>
<li>Portfolio</li>
<li>Financing</li>
<li>Testimonials</li>
<li>Subcontractors</li>
</ul>
</li>
<li>Portfolio</li>
<li>Maintenance</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
In isolation it works as it should: http://www.rouviere.com/nav/
However, when I put it in place: http://www.rouviere.com/jr/ the drop down menu under About stays hidden.
I would appreciate a helping hand here to figure out why the drop down menu doesn't show.
Thanks.
In the line p=h.getElementsByTagName('a')[0] you are referring to the About link by index. This works on your test page, but your real page has a new anchor tag on the main logo, which comes before the About link in the HTML. You should give your About link an id attribute and refer to it in your JavaScript.