Hello all,

 

I face a predicament with my latest website which has been live for some months now:

 

www.nottinghamhouse.co.uk

 

As you can see, there is rather a lot of vertical space taken by the blue top navigation section. I have been asked to minimise this space as much as possible. At the same time I have been asked to link to more pages.

 

The solution for this I thought would be a drop down menu - However I read articles posted on smashingmagazine and the like which proclaim drop down menu's as nightmares for usability. I agree with this to an extend, especially with multilevels and menus which disappear as soon as your mouse loses focus. I personally also feel that drop down menus shudnt be a hidden suprise - they shud clearly denote further links with a clear arrow icon of some kind.

 

However, can anyone here recommend a drop down menu system which degrades gracefully (so at worse case can simply show links in list form), which performs well (and lightly on resources) and is "user friendly"?

 

If not, another means by which to limit the vertical space which those navigation links take up?

Suckerfish is one of the most widely used dynamic menu methods, do a search for it an you'll find loads of examples.

 

Alternatively why not just reduce the size of the huge logo as it's taking up valuable screen real estate. I can't see why you shouldn't reduce it to about 1/3rd of the current size.

It's true that drop down menus can be difficult for disabled people who can't use a mouse. They use tabbed browsing and the tab often only moves over the top level links and ignores the drop down level links.

 

It's important, therefore, to make sure that the top level does have a link itself to a general page or sitemap that shows the other links.

 

Besides Suckerfish javascript menus there are hundreds of pure CSS dropdown menus here:-

http://www.cssplay.co.uk/menus/

 

Browsers have different key combinations for tabbed browsing, but I don't know whether any browser has a key combination to tab down the dropdown levels without using a mouse.

I agree, you could save a lot of space by reducing the size of the header or amalgamating it with the nav menu.

 

Or if you wanted a drop down menu try - All Web Menus - http://www.likno.com/

 

All the best.

Thanks for the replies!

 

I've been looking at this css only drop down menu which is tab'able

 

http://thinkhtml.blogspot.com/2009/10/float-drop-css-only-multilevel-dropdown.html

 

The author talks about introducing Javascript to delay the mouseoff effect of the menu closing immediately if it strays from a link - I've tried to research this myself and havent found anything really that great.

 

Does anyone know a way of delaying that effect by adding something to the existing css drop down menu above?

 

Regards,

 

Bk7

Just hoping to prompt this topic for a few more replies?

 

Does anyone know a way of delaying that effect by adding something to the existing css drop down menu above?

 

Cheers!

Not sure if this would be useful hoverIntent

Thanks very much mteam - i intend to look into that as soon as I fix a new problem I have stumbled across:

 

 

Please ignore the below - i had the z-index affecting the wrong id, all fixed now!

 

----ignore----

 

 

I have just tried to implement this dropdown menu (by http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html)

 

 

http://nottinghamhouse2.bhavikmorar.co.uk/

 

However there appears to be a clash between the jquery auto flow image slider and the drop down menu, where the drop down menu is hidden behind the scroller.

 

The only thing i know how to do is fiddle witht he z-index of each element but that appears to have no effect.

 

Hoping someone can help,

 

 

----ignore----

Add this to your CSS, it should fix it:

 

#header { position: relative; }
#navigation { position: absolute; top: 150px; }

 

Edit: Ah, you fixed it...