Improve company productivity with a Business Account.Sign Up

x
?
Solved

Need to highlight menu item when page is active

Posted on 2013-05-30
3
Medium Priority
?
451 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 2000 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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

608 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