CSS tips to create a stylish left hand nav.

[paulbeckett]

Hi All

I would appreciate any style advice anyone might have regarding my left hand nav!

Basically I replaced a complicated nav containing javascript and gifs with the css nav you now see on www.kjbeckett.com. However the response to the new look has been poor! I think people believe the pure text looks unprofessional. Sales have dropped.

Can anyone recommend any css tweaks I could make to the nav for it to look a bit more stylish?

Kind regards

Paul
www.kjbeckett.com

[jont]

Hi Paul.

couple of simple tweaks spring to mind:

1. declare a width for the hover to extend the background mouse over colour to a uniform width beyond the text area

2. provide a background image to the whole navigation area - a box, graduated colours etc

3. add some additional padding to space the navigation apart a little

4. use a background gif in the mouseover state - such as a dot or an arrow - that slides up and down as you move the cursor up and down the list - a little old hat but if done right can look well

[paulbeckett]

Hi Jont

Thanks. I have started doing some of these tweaks based on your advice.

Do you know how I go about removing the indent on the top level and reducing the indent on the sub level?

Paul

[jont]

You don't seem to have any styling for any of the named sub_menus and no margins (or paddings) declared in the #navsite.

I would wrap everything in an outer <div> to move it over to the left and contain everything and then start declaring the #n_submenus to gain more control

[jont]

Paul - a starter for 10

#navsite ul li {
list-style:none;
margin-left: -20px;
}

.menulink {
margin-left: 15px;
}

#navsite .menulink {
display: none;
padding: 1px 1px 1px 1px;
}

#navsite a:link {
color: #333;
text-decoration: none;
padding: 1px 1px 1px 1px;
}

#navsite a:visited {
color: #777;
text-decoration: none;
padding: 1px 1px 1px 1px;

}

#navsite a:link:hover, a:visited:hover {
color: #333;
background-color: #6495ED;
width:130px;
padding: 1px 1px 1px 1px;
}

#navsite a:link:active, a:visited:active {
color: #ccc;
background-color: #6495ED;
padding: 1px 1px 1px 1px;
}


that drags the main sections over to the left and reduces the flyout indents also.

HTH

[paulbeckett]

Opps / argh!

I have somehow managed to impact my other links. For instance if you hover over products or pretty much any other button, they are all impacted by the hover.

I thought I should not impact anything else because I was using the #navsite convention. Is this not correct? Is there any reason that the css below would impact the entire site and not just the left hand nav contained in the <div id="navsite"></div> area?

#navsite ul li {
list-style:none;
}

#navsite .menulink {
display: none;
padding: 1px 1px 1px 1px;
}

#navsite a:link {
color: #333;
text-decoration: none;
padding: 1px 1px 1px 1px;
}

#navsite a:visited {
color: #777;
text-decoration: none;
padding: 1px 1px 1px 1px;

}

#navsite a:link:hover, a:visited:hover {
color: #333;
background-color: #6495ED;
width:130px;
padding: 1px 1px 1px 1px;
}

#navsite a:link:active, a:visited:active {
color: #ccc;
background-color: #6495ED;
padding: 1px 1px 1px 1px;
}

[jont]

I copied the code a few mins back from your site - not realising you were working on it at the same time.

The changes to your code was a negative margin in the #navsite and new class declared for the sub menu

[paulbeckett]

Hi Jont

Thanks.

I have made some of these changes now - but seem to have impacted the entire site also? I didnt think this would happen becuase I was using the #navsite convention?

Paul

[jont]

Be careful with the naming conventions and the cascade of the code eg:

#navsite a:link:hover, a:visited:hover

is affecting the hover in the named <div> and in all other open instances of the anchor tag .... you should include the #navsite into the declaration to keep it solely to the navsite area of the site.

Looking at the snippet from the CSS you dont need the part from the comma to the brace just:

#navsite a:link:hover {

[paulbeckett]

Jont

Thanks for your help. At one point I thought I was isolating changes to the navsite only but I have got abit lost.

you should include the #navsite into the declaration to keep it solely to the navsite area of the site.

Is this not done by the <div id="navsite"></div> wrapped around the left hand nav code?

Paul

[jont]

No problem.

The id="navsite" is holding everything togther - yes and is working just fine as it is. As this is containing the navigation which in itself is quite a complex area in terms of CSS if you wanted to take things further by including images and other positioning it would be prudent (not essential) to wrap it again.

This would then allow some tricky positioning of graphics and allow absolute positioning of the navigation to the graphic. It depends on how far you are taking it - another wrapping <div> would allow you room to breath and add in extra styling elements... just thinking ahead.

for the styling you really need to be using

#navsite a:link, #navsite a:visited {

that will then keep the anchor styling unique to the #navsite id

[jont]

Paul, just to point out the pseudo classes for the anchor tag are:

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

"a:visited:hover" is not valid

[paulbeckett]

Thanks.

I am on my way to understanding it but I'm not there yet. Many thanks for your advice regarding this. It certainly is complicated (for me)!

I'm backing out some of the changes for the moment so that I dont impact the rest of the site and will take a step back and some time to ensure I understand this.

Paul
www.kjbeckett.com

[jont]

CSS is one of those things that is double-dutch to start with but when it clicks it is your best friend

[paulbeckett]

Yes - I will stick with it.

I must admit I am not totally sure how to seperate the left hand nav using css and the other elements of the site using css.

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

[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.