Navigation Is Highlighted On Current Page

[hoangsta]

My question is for your tutorial at http://www.w3schools.com/js/js_animation.aspI wanted to take it further…if someone is on a page, can you have the ball stay highlighted with a certain color. To get a better view of what I’m talking about, visit starbuck’s website at http://www.starbucks.com/business/. Notice that if you highlight the header link of “about us”, it changes color. When you do go to the “about us” page, it keeps a certain color even though the mouse is away from it…can it be done with javascript?

[dsonesuk]

javascript is not required to reproduce this, just css using :hover pseudo. To keep the menu option highlighted you just need to move class="selected" (in bold) to the menu you require to be highlighted.css styling<style type="text/css">ul li { list-style:none; text-align:center; float:left;}ul#nav li a{ font-family:Verdana, Arial, Helvetica, sans-serif; display: block; width: 120px; list-style:none; height: 26px; float: left; text-decoration:none; font-size: 12px; line-height: 25px; text-transform:uppercase; color: #444;}ul#nav li a:hover{ background-color:#CDC7DF; color: #444;}ul#nav li.selected a, ul#nav li.selected a:hover { background-color: #968C84; color: #fff;}ul#nav2 li a{ font-family:Verdana, Arial, Helvetica, sans-serif; display: block; width: 120px; list-style:none; height: 26px; float: left; text-decoration:none; font-size: 12px; line-height: 25px; text-transform:uppercase; color: #444; background:url(b_pink.gif) no-repeat center;}ul#nav2 li a:hover{ background:url(b_blue.gif) no-repeat center; color: #444;}ul#nav2 li.selected a, ul#nav2 li.selected a:hover { background:url(b_blue.gif) no-repeat center;color: #fff;}</style>html code<ul id="nav"> <li><a href="http://www.starbucks.com/coffee/">Our Coffees</a></li> <li><a href="http://www.starbucks.com/retail/">Our Stores</a></li> <li><a href="http://www.starbucks.com/card/">Starbucks Card</a></li> <li><a href="http://www.starbucks.com/grocery/">At Home</a></li> <li class="selected"><a href="http://www.starbucks.com/business/">For Business</a></li> <li><a href="http://www.starbucks.com/aboutus/">About Us</a></li> <li><a rel="external" href="http://www.starbucksstore.com/default.asp?CCAID=SBXSHP">Shop Online</a></li></ul><div style="clear:both;"></div><ul id="nav2"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li class="selected"><a href=""></a></li> <li><a href="#"></a></li> <li><a href="#"></a></a></li></ul>

[hoangsta]

thanks for the quick reply. If I am just wanting to work with this code that you provided,......................................<style type="text/css">ul li { list-style:none; text-align:center; float:left;}ul#nav li a{ font-family:Verdana, Arial, Helvetica, sans-serif; display: block; width: 120px; list-style:none; height: 26px; float: left; text-decoration:none; font-size: 12px; line-height: 25px; text-transform:uppercase; color: #444;}ul#nav li a:hover{ background-color:#CDC7DF; color: #444;}ul#nav li.selected a, ul#nav li.selected a:hover { background-color: #968C84; color: #fff;}</style><ul id="nav"><li><a href="http://www.starbucks.com/coffee/">Our Coffees</a></li><li><a href="http://www.starbucks.com/retail/">Our Stores</a></li><li><a href="http://www.starbucks.com/card/">Starbucks Card</a></li><li><a href="http://www.starbucks.com/grocery/">At Home</a></li><li class="selected"><a href="http://www.starbucks.com/business/">For Business</a></li><li><a href="http://www.starbucks.com/aboutus/">About Us</a></li><li><a rel="external" href="http://www.starbucksstore.com/default.asp?CCAID=SBXSHP">Shop Online</a></li></ul><div style="clear:both;"></div>..................................1. How do I keep the navigation as a full horizontal bar? Because if i remove the "li" it will just be text...but I like that block effect.2. You mentioned "class="selected" (in bold) to the menu you require to be highlighted"I don't want to manually select what should be highlighted, I want the user to select a navigation link and whatever page they are on, the navigation link will remain highlighted to indicate to the viewer of what page they are on.Thnx for reading this. I appreciate all help in advance.

[dsonesuk]

1. depends what you mean by 'remove the li' ?, removing a single line of 'li' including its content, should not make any difference.removing all 'li' will cause it to fail because the css needs this for a reference, to style it accordingly.2. depending on how you are inserting the menu into the page:(i) frames or dynamically using PHP, JavaScript etc. will need to identify which page you are on, and make the necessary changes. (ii) adding the menu separately to each page you would just insert the class="selected" in the menu link that relates to your current page.

[dsonesuk]

this code uses javascript to identify what page you are viewing, and as long as it can find the page name in the menu link list it will assign the class to permanently highlight it for that page.example name this page as "currentpage.htm" it will find the related link under "For Business" and highlight the link.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#menu_outer {border: 1px solid #968c84; overflow:hidden; height: 26px; font-size:0px; width: 860px; padding: 2px;}ul#nav li { list-style:none; text-align:center; float:left;}ul#nav li a{ font-family:Verdana, Arial, Helvetica, sans-serif; display: block; width: 120px; list-style:none; height: 26px; float: left; text-decoration:none; font-size: 12px; line-height: 25px; text-transform:uppercase; color: #444;}ul#nav li a:hover{ background-color:#CDC7DF; color: #444; }ul#nav li.selected a, ul#nav li.selected a:hover { background-color: #968C84; color: #fff;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/function findcurrentpage() { menu_ul=document.getElementById("nav"); menu_anch=menu_ul.getElementsByTagName("a"); menu_li=menu_ul.getElementsByTagName("li"); total_menu_anch=menu_anch.length; for(i=0;i<total_menu_anch;i++) { //menu_li.removeAttribute('className'); //menu_li.removeAttribute('class'); menu_anch_link=menu_anch.href; curent_page=document.location.href; if (curent_page.indexOf(menu_anch_link)!=-1) { menu_li.setAttribute('className', 'selected'); menu_li.setAttribute('class', 'selected'); } } }window.onload=findcurrentpage;/*--*//*]]>*/</script> </head><body><div id="menu_outer"><ul id="nav"> <li><a href="otherpage1.htm">Our Coffees</a></li> <li><a href="otherpage2.htm">Starbucks Card</a></li> <li><a href="otherpage3.htm">At Home</a></li> <li><a href="currentpage.htm">For Business</a></li> <li><a href="otherpage4.htm">About Us</a></li> <li><a href="otherpage5.htm">Shop Online</a></li></ul></div></body></html>