CSS tips to create a stylish left hand nav.

[fergusw]

Hi Paul,
CSS is, in my opinion, the best way to present a menu on a webpage both in terms of a contextual layout and for aiming for accessibility standards, page speed and scalability. (my tuppence worth)

Menus are ultimately an unordered list <UL>, with list items <LI>'s.

A resource you might want to look at for some list/menu design styles in CSS is

http://css.maxdesign.com.au/
(there are many more)
You may find something there you can use and the tutorials may just be the first step in opening your understanding of managing menus and layouts in CSS. They are well structured and show a step by step CSS guide for each menu CSS change.

As well as the benefit in accesibility,scalability and ease of coding the CSS styled menus save bandwidth, increase page load speed over massive javascript/image based menus AND allows far more scalability when it comes to updating your site and layout.

PLEASE NOTE:
Some of the examples on this resource may not work across all browsers so it would be best to test any that you choose to replicate.

[completerookie]

Paul,
Just took a quick peek at your site, I like it.
just a suggestion:
you seem to be using animated gifs in a couple of places, (right hand images)
what about putting some prices on the shipping icons (top left, top right) either that, or make them into clickable links to take the user to the Delivery page. - I clicked on them assuming that the prices would be shown

[jont]

For instance I want the left hand nav to have a blue box when the user hovers over it:

#navsite a:link:hover, a:visited:hover {
color: #333;
background-color: #6495ED;
}

but I dont want any other links to have it. See the footer text which also has this feature despite not being wrapped in a <div id="navsite"></div>.

Paul

You are declaring 2 elements to have the same styling :

1. #navsite a:link:hover
2. a:visited:hover

the first part will style everything inside the id="navsite"
the second styles all hyperlinks

as per my previous post if you want to style different elements the same you need to include the #navsite into the part after the dividing comma eg:

#navsite a:link, #navsite a:visited

see the second #navsite after the comma? that then only styles the hyperlinks inside the id="navsite"

Again - take note of the pseudo class notation that should read :

a:link
a:visited
a:hover
a:active

[paulbeckett]

Jont

Doh!!! I understand now. Apologies I didnt understand this earlier. This is a real baby steps process for me

Kevin

Thanks for the tip. I will do this!

Paul

[NormanRouxel]

I've now written a CSS and UL based add-on menu "NorList" for Actinic. This uses PHP and the site-map Layout to embed a search engine friendly list onto every page.

It still uses a bit of JavaScript (for special effects) but fails-safe (displaying the raw UL structure) on non-JavaScript browsers and search engine spiders.