You are currently viewing all entires with the tag: web design

Accessible CSS drop down menus with and without Javascript and in IE 6

Stylish CSS drop down menus are nothing new. They can be easily coded to be semantic with nested unordered lists and can also be made accessible to keyboard users with a bit of helpful javascript. They can even work without javascript enabled by adding the :hover pseudo class to the parent list element. However, IE 6's lack of support for this means without javascript IE 6 users simply won't be able to see the links.

There is a simple solution.

Step 1. Build the page for browsers without javsacript
Because we want this to work in IE6 we can't use the :hover pseudo class on the list items. Instead build your css and xhtml page but make sure all nested lists in the navigation menu are visible. Style it up as best you can to make it look acceptable, even though all the menus will be expanded. In the case of drop down menus that overlap if they're all visible, you will need to turn the menu into a normal line-by-line menu with the sub menus indented. This is how all users without javascript will see your page.

Step 2. Add some Javascript.
Now that we have a non-javascript menu that works in IE 6 we can make it work as a drop down menu for users who have javascript enabled. We're using jQuery to make this easier and to allow a nice fade in on the drop down menu. The first thing to do is add a class to our main menu as soon as possible. Then add the code to make the sub menus fade in and out on mouse over.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
});

Step 3. Add some style.
Now, we can use the “.js” class in our CSS to re-style the menu and override any of the style we added in step 1. Styling CSS drop down menus is well documented elsewhere so I won't go into too much detail here.

Step 4. Add some more javascript to enable full keyboard access.
What we have so far isn't enough to allow full keyboard control. Keyboard users would have to disable javascript as well as CSS to see the links. By adding a bit more jQuery we can make the drop down menus fully navigable via the keyboard.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
	$("a").focus(function(){ // hide drop downs
		$("#mainNav ul").fadeOut();
	});
	$("#mainNav li a").focus(function(){ // main nav anchor focus
		$("ul",$(this).parent()).fadeIn();
	});
	$("#mainNav li li a").unbind(); // unbind hide drop downs from sub nav anchors
});

Lets first look at the rule labelled ‘main nav anchor focus’. This is assigned to the top level anchors in the main menu as that is what the keyboard will tab between when the user uses the tab key to cycle through links. When the anchor gets focus it shows the drop down menu associated with it. The fact that this is now visible means the next time the user hits tab the first sub menu item will have focus, and as such can be visited.

When the user tabs past the last sub menu item we want the down down to fade out. This is why we added the ‘hide drop downs’ rule to all anchors. This means, when any item is tabbed to all menus will close. We want to avoid this happening when the user tabs to the sub menu items and of course when they tab to a sub menu parent item. That's why we add it before the $("#mainNav li a") rule. This means it will fire the sub nav hide first and then open the one that is tabbed to. We prevent the sub nav links firing it with the unbind rule at the end.

Thats it, CSS drop down menus with keyboard control in all browsers, with and without javascript enabled.

13 Mar 09
5 COMMENTS

Tags:
css javascript jquery accessibility web design

New website design: The Devon Carpenter - Phil Szaniszlo

“ In the begining...I knew nothing about websites other than the fact that I needed one to promote my work.
Now...I know that I have a very efective website that I am able to adapt and update MYSELF !
How is this possible?...Ben is a very clever man, and I am a very happy customer. ”

Testimonial by Phil Szaniszlo the Devon Carpenter

Phil Szaniszlo commissioned us to build a new website to use an advertising tool for his capentry services in Devon. The website was built with search engine optimization in mind and just a few weeks after launch his website is appearing at number one for his main Ggoogle phrase 'devon carpenter'.

We installed our new content management system on Phil's site to allow him to maintain and add to his website as time goes on. One of our philosophies here at Phototropic Productions is that we don’t want our customers to feel trapped in a circle of expensive mainatence fees just to make small edits to their websites. Phil can now edit his webiste when and how he wants and at no futher cost.

Most companies charge a lot to give this control to their customers as they know they won't get any more money out of the customer for making changes to the site. We believe that giving this control at a reasonable cost will help our word-of-mouth marketing and increase customer satisfaction, which is our first and foremost goal.

Learn more about our Exeter based website design services.

2 Aug 08
0 COMMENTS

Tags:
new web design