Jump to content

Navigation Is Highlighted On Current Page


hoangsta
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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.

Edited by hoangsta
Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...