Solved

Need to highlight menu item when page is active

Posted on 2013-05-30
3
413 Views
Last Modified: 2013-05-30
I am using php to include a menu on my individual pages which is a common practice. What I'd like to do is highlight the menu item when the corresponding page is active. I've tried a few methods but have been unsuccessful.

Any help is appreciated.
0
Comment
Question by:J C
3 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39208800
When a page is active, give the menu item that represents that page a different CSS class. Simply have two CSS rules in your stylesheet:  one for inactive tabs and the other for the active tabs. Just toggle between the classes as the pages change.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39208801
Just give each of the menu tabs a unique id, and then generate a style tag in the head with a single rule for the target id and the highlighting you want:
<style type="text/css">
#idnumber1 {background-color:magenta;}
</style>

Cd&
0
 

Author Closing Comment

by:J C
ID: 39209424
Thanks, that works.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question