We help IT Professionals succeed at work.

highlighting menu item from current webpage... "you are here"

PCWoes
PCWoes used Ask the Experts™
on
I've got a horizontal menu set up that has drop down sub menus on this website I'm building...I want the menu to stay highlighted to the current page that is being viewed...I've tried several things but just can't get this to work?

I'm using a body class identifier also?

Here's the code I'm utilizing...

Thoughts please... :o(

Used per page:

<body class="homenav" style="overflow:scroll">

Menu:

   <ul>
      <li><a href="rla01.php" class="homenav">Home</a></li>
      <li><a href="staff.php" class="staffnav">Meet the Staff</a>
               </li>
            <li><a href="#" id="servicesnav">Services</a>
         <ul class="last">
            <li><a href="speech.php">Speech & Language Services</a></li>
            <li><a href="educational.php">Educational Services</a></li>
         </ul>
      </li>
      <li><a href="#" id="contactnav">Contact Us</a>
         <ul class="last">
         <li><a href="location.php">Location/Directions</a></li>
            <li><a href="contact.php">Email Us</a></li>
                     </ul>
      </li>
            <li><a href="#" id="eventsnav">Events</a>
         <ul class="last">
     <li><a href="summer.php">Summer Programs</a></li>
           </ul>
      </li>
   </ul>


Body CSS:

body #home a#homenav,
body #staff a#staffnav,
body #services a#servicesnav,
body #contact a#contactnav
body #events a#eventsnav{
      color: #fff;
      background: #36f;
}

Centered Menu CSS:


#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
#centeredmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#centeredmenu ul li a {/* Decoration for "block" with dropdown */
   display: block;
   margin:0;
   padding:.6em 2em .6em; /* Adjust block size */
   font-size:1em;
   line-height:.8em;
   background:#dedffa; /* Block background */
   text-decoration:none;
   color:#444;
   font-weight:bold;
   border-bottom:1px solid #000066;
            -moz-border-radius: 50px;
        border-radius: 50px ;
 }
#centeredmenu ul li.active a {
   color:#fff;
   background:#36f;
}
#centeredmenu ul li a:hover {
   background:#36f; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#36f; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:.8em;
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#eee;
   color:#444;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#36f; /* Sub menu items background colour */
   color:#fff;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the dropdown sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jagadishwor DulalSenior Web Developer

Commented:
One quick solution is add a class active just editing your css see:

#centeredmenu ul li a:hover, #centeredmenu ul li .current {
   background:#36f; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}

Open in new window

I have added .current class in your centeredmenu ul li together with ul li a:hover

and now call the current class for the current page menu like:

 
<li><a href="rla01.php" class="homenav current">Home</a></li>

Open in new window

Author

Commented:
Here's a pic of the horizontal menu I'm working with:

Pic of Menu list
When I hover any menu button I get the dark blue bckgrnd and white letters. Otherwise just the pale blue with dark letters. With Home shown dark blue I'd be on the home page. Now it just stays blue regardless of what page I visit. If I go to the Contact Us page I want the menu button to show dark blue and the Home button to revert back to the pale blue...not the best verbiage I'm sure to explain but I think this gets my point across?

Commented:
I don't think that css alone can let current menu has active style class.

I think of two ways:

1. build you menu dynamically with PHP (since I see some of your links are PHP file). In that PHP code, you check which menu item should be highlight, and place class="active" in corresponding <li>

2. each page when generated will have specific id to be used for highlighting the menu.
Read this article for detail http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
If you're adding a class to your body tag to indicate which menu should be active, then you can try something like this:

.homenav #centeredmenu ul li a.homenav,
.staffnav #centeredmenu ul li a.staffnav,
.contactnav #centeredmenu ul li a.contactnav,
.eventsnav #centeredmenu ul li a.eventsnav
{
background:#36f; color:#fff; border-bottom:1px solid #03f;
}

Author

Commented:
Thanks againt to the community...one of the web's best !!!