Web Design Forums

roto · 30-07-2007, 21:39

So, say I have this code for a basic side-navigational menu.

Code:

<div id="sidemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="blah1.php">Blah1</a></li>
<li><a href="blah2.php">Blah2</a></li>
<li><a href="etc.php">etc. etc. etc.</a></li>
</ul>
</div>

...and the CSS that styles this area is:

Code:

#sidemenu {
    padding: 20px 10px 20px 10px;
    float: left;
    width: 200px;
}

#sidemenu UL {
    padding-left: 30px;
}

#sidemenu LI {
    list-style-type: none;
    font-weight: bold;
    margin-bottom: 5px;
}

#sidemenu A:link, #sidemenu A:visited {
  text-decoration: none;
}

#sidemenu A:hover, #sidemenu A:active {
  text-decoration: underline;
}

For each page, I want to display the hover/active state to indicate the current page. So in other words, if I'm on blah1.php, I want it to be underlined. Is there some sort of swanky CSS I could add (or a simple javascript that would degrade nicely) to easily accomplish this?

Many thanks all...

Cborrow · 30-07-2007, 21:55

What about adding and ID to the current actively page's li item then just use something like

Code:

<ul id="sidemenu">
<li id="activePage"><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>

Code:

#sidemenu #activePage a {
text-decoration: underline;
}

datahound · 31-07-2007, 04:18

Are you using an include for the menu on several different pages or uniquely coded menu on each page?

djeglin · 31-07-2007, 05:36

ok... so for starters, you don't need the div around your menu... its redundant code. Put the styling on your ul instead. Then, why don't you consider coding it like this:

Code:

<body id="home">
  <ul id="sidemenu">
    <li class="home"><a href="index.php">Home</a> </li>
    <li class="blah1"><a href="blah1.php">Blah1</a> </li>
    <li class="blah2"><a href="blah2.php">Blah2</a> </li>
    <li class="blah3"><a href="etc.php">etc. etc. etc.</a></li>
</ul>
</body>

If you attach those classes to each link (don't forget to close your LIs, by the way), and put an id on the body tag thats the same as the classes you've used (ie, "home" for the home page, "blah1" for the blah1 page etc), then you can do this with the css:

Code:

#sidemenu {
    padding: 20px 10px 20px 40px;
    float: left;
    width: 200px;
}

#sidemenu LI {
    list-style-type: none;
    font-weight: bold;
    margin-bottom: 5px;
}

#sidemenu A:link, #sidemenu A:visited {
  text-decoration: none;
}

#sidemenu A:hover, #sidemenu A:active {
  text-decoration: underline;
}

*/ Begin active page indicator code /*

#home #sidemenu li.home a,
#blah1 #sidemenu li.blah1 a,
#blah2 #sidemenu li.blah2 a,
#blah3 #sidemenu li.blah3 a {
  text-decoration: underline;
}

basically, this matches the id of your body tag to the class of your LI. If they match, then it uses the style found within (Which, in this case, is the same as your hover state)

hope that sorts you out.

Cheers

David

roto · 31-07-2007, 07:17

Quote:

Originally Posted by datahound

Are you using an include for the menu on several different pages or uniquely coded menu on each page?

Aye, it's an include for the same menu. I think djeglin's solution will work -- although I wish there was an easier way for when new pages are added.

I'll update this if/when there are more questions. TA.

datahound · 31-07-2007, 07:36

This was the thread I was looking for..
dynamic lists

roto · 01-08-2007, 21:46

Quote:

Originally Posted by datahound

This was the thread I was looking for..
dynamic lists

A beautiful thing, that, Mr. Hound -- gonna give it a whirl...

30-07-2007, 21:39	#1 (permalink)
roto Floating libation anyone? Join Date: Apr 2003 Location: El Barco del Amor Posts: 4,642	navigational menu -- show "hover" state for active page So, say I have this code for a basic side-navigational menu. Code: <div id="sidemenu"> <ul> <li><a href="index.php">Home</a></li> <li><a href="blah1.php">Blah1</a></li> <li><a href="blah2.php">Blah2</a></li> <li><a href="etc.php">etc. etc. etc.</a></li> </ul> </div> ...and the CSS that styles this area is: Code: #sidemenu { padding: 20px 10px 20px 10px; float: left; width: 200px; } #sidemenu UL { padding-left: 30px; } #sidemenu LI { list-style-type: none; font-weight: bold; margin-bottom: 5px; } #sidemenu A:link, #sidemenu A:visited { text-decoration: none; } #sidemenu A:hover, #sidemenu A:active { text-decoration: underline; } For each page, I want to display the hover/active state to indicate the current page. So in other words, if I'm on blah1.php, I want it to be underlined. Is there some sort of swanky CSS I could add (or a simple javascript that would degrade nicely) to easily accomplish this? Many thanks all... __________________ fun: HGC v.4 \| last.fm: DT \| me \| *oi! fck u roto: ...via meebo! New to interweb design?** Your friends at dt can help. Last edited by roto : 01-08-2007 at 21:44. Reason: Added me </li>s like a good pirate...

30-07-2007, 21:55	#2 (permalink)
Cborrow I like code. Join Date: Dec 2004 Location: Chesapeake, VA Posts: 229	What about adding and ID to the current actively page's li item then just use something like Code: <ul id="sidemenu"> <li id="activePage"><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> Code: #sidemenu #activePage a { text-decoration: underline; }

31-07-2007, 04:18	#3 (permalink)
datahound Spare Parts Join Date: Jan 2005 Location: Bracknell Forest Posts: 4,962	Are you using an include for the menu on several different pages or uniquely coded menu on each page? __________________ poochmedia \| Computer Spare Parts \| Computer & Telephone Disposals

31-07-2007, 05:36	#4 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 533	ok... so for starters, you don't need the div around your menu... its redundant code. Put the styling on your ul instead. Then, why don't you consider coding it like this: Code: <body id="home"> <ul id="sidemenu"> <li class="home"><a href="index.php">Home</a> </li> <li class="blah1"><a href="blah1.php">Blah1</a> </li> <li class="blah2"><a href="blah2.php">Blah2</a> </li> <li class="blah3"><a href="etc.php">etc. etc. etc.</a></li> </ul> </body> If you attach those classes to each link (don't forget to close your LIs, by the way), and put an id on the body tag thats the same as the classes you've used (ie, "home" for the home page, "blah1" for the blah1 page etc), then you can do this with the css: Code: #sidemenu { padding: 20px 10px 20px 40px; float: left; width: 200px; } #sidemenu LI { list-style-type: none; font-weight: bold; margin-bottom: 5px; } #sidemenu A:link, #sidemenu A:visited { text-decoration: none; } #sidemenu A:hover, #sidemenu A:active { text-decoration: underline; } / Begin active page indicator code / #home #sidemenu li.home a, #blah1 #sidemenu li.blah1 a, #blah2 #sidemenu li.blah2 a, #blah3 #sidemenu li.blah3 a { text-decoration: underline; } basically, this matches the id of your body tag to the class of your LI. If they match, then it uses the style found within (Which, in this case, is the same as your hover state) hope that sorts you out. Cheers David __________________ My signature sucks.

31-07-2007, 07:36	#6 (permalink)
datahound Spare Parts Join Date: Jan 2005 Location: Bracknell Forest Posts: 4,962	This was the thread I was looking for.. dynamic lists __________________ poochmedia \| Computer Spare Parts \| Computer & Telephone Disposals

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search