CSS Rollover nav question

[DJMK4]

If you have a look at this page

www.dmoranda.ukfsn.org

Instead of having the page header listed in the Body div, i want to implement the css nav so that when a particular link is clicked, it will load the page but the link will stay a darker grey, ideally so that the user will know what page they are on.

I can put the header at the top of the body div on each page, but it looks abit dull.

Any ideas on what i can do to spruce it up?

 

[~J~]

It's easier than you think.

Simple create an additional class within the menu div and give it a name (for example if you want your homepage highlighted, call it #home).

Then, wrap the css menu within the new class and call it the respective name of the class.

There are loads of good examples out there, and I gotta admit, at first it was a little daunting but now makes perfect sense.

As a simple example:

#siteNav { background: #DE2600 url(../images/design/nav_bg.gif) top left no-repeat; }

#siteNav a { text-decoration: none; display: block; }

#siteNav ul { margin-left: 15px; padding-top: 4px; }

#siteNav ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#siteNav li { float: left; position: relative; font-size: 12px; text-align: center; }

#siteNav li a { padding: 8px 12px 8px 12px; }

#siteNav li a:link, #siteNav li a:visited { background: transparent url(../images/design/site_nav_borders.gif) bottom right no-repeat; color: #fff; }

#siteNav li a:hover { background: #EE724A url(../images/design/site_nav_hover_bg.gif) bottom left repeat-x; color: #fff; }

#siteNav li.current a { margin-bottom: -1px; }

#siteNav li.current a:link ,#siteNav li.current a:hover { background-color: #ffffff; background-image: none; cursor: default; color: #37454e; border-bottom: 1px solid #fff; }

/* Automatic Page Highlighting */

#home #homenav a,

#news #newsnav a,

#tutorials #tutorialnav a,

#usermanual #manualnav a,

#wiki #wikinav a,

#forum #forumnav a,

#aboutus #aboutnav a

{ margin-bottom: -1px; }



If I'm on the "AboutUs" page, then within the SiteNav class I simple say it's part of the "AboutUs" class and it highlights.

 

[DJMK4]

That is abit confusing:

Here is my nav css below:

#menu {
		margin: 2px;
		height:24px;
		background-color:#666666;
		border:1px solid #000;
}

/*//////Start Of Navigation//////*/

#nav ul{
		padding : 1px 0;
		margin : 0;
		text-align: center;
		width: 100%;
		
}

#nav li{
   		display : inline;
		list-style-type: none;
		
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}
/*//////End Of Navigation/////*/

Im guessing all i have to do is add the additional objects in my css. i.e.

#siteNav li.current a { margin-bottom: -1px; }

#siteNav li.current a:link ,#siteNav li.current a:hover { background-color: #ffffff; background-image: none; cursor: default; color: #37454e; border-bottom: 1px solid #fff; }

 

[Mr_L]

I'm not sure what you want.

Do you just want each navigation button to be dark grey when you are on that current page? So if you are on the 'About Me' page you want that button to be dark grey?

 

[DJMK4]

Yep thats right, i want it exactly as it is now, i.e keep the roll overs so that when the link is rolled over with a mouse, it goes dark grey, the only addition i want is that if your on a particular page, i want that link to stay dark grey.

 

[Mr_L]

Fairly simple to do.

Your HTML:

<div id="nav">
		<ul>
			<li><a href="index.html" [color=Yellow][b]id="currentLink"[/b][/color]>Home</a></li>
			<li><a href="aboutme.html">About Me</a></li>
			<li><a href="mycareer.html">My Career</a></li>
			<li><a href="other.html">Other</a></li>
			<li><a href="contactme.html">Contact Me</a></li>
		</ul>

The CSS

#nav a:link#currentLink, #nav a:visited#currentLink, #nav a:hover#currentLink{color: #fff; background-color: #333;}

Basically you just need a new id, which I've called currentLink, highlighted in yellow in the HTML. On each page you move the id between the links. So, on the about me page the id would be in the about me link, and on the career page the id would be in the mycareer link.

 

[DJMK4]

Thanks, got it working