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