Home

Design News:

CSS Current Page Indicator

How to highlight the current page's link in a navigation menu using only CSS, no scripting.

Comments (6)

not so sure that is any different than assigning which nav item is “current” in the menu itself.  You’re just using the body class to do the same thing.  If the bosy class is already being used for something then I guess it makes sense, but just using the body class primarily to specify the page you are on for the nav menu isn’t any different then bringing it down into the menu itself.

#1: css menus on 06/14 at 11:35 AM

Do you have any other suggestions on how to do this?

#2: Tom on 06/14 at 01:00 PM

I have been stumped on this for about a year now :>)

#3: Tom on 06/14 at 01:01 PM

are you speaking about indicating the lage you are on without using any server-side code? or just indicating the current nav item?

#4: css menus on 06/14 at 01:04 PM

A decent solution, but I could see this becoming a bit unwieldy if the navigation had a lot of links.

If you’re able to do some server-side coding, a relatively simple PHP if statement could look at the URL to see what page the user is on and then assign a “you are here” class to the appropriate nav item.

#5: Pat on 06/14 at 02:13 PM

I am looking for a simple solution (PHP, Javascript, css)to indicate what page you are currently on… then style it differently.

This technique is done everywhere, but I have yet to find a way outside of coding every page with custom code. Meaning changing code on ever static page.

Ideally I would like to have 1 navigation file, include that and based on where it is on the site, it would know to style the navigation a certain way.

Thanks for you input.

Sincerely
Tom

PS Pat do you know of any tutorials or code examples explaining further what you suggest? Sound good to me :>)

#6: Tom on 06/14 at 02:39 PM
Commenting is not available in this weblog entry.

News Tools &
Other Resources

CSS Compressor

Use this tool to compress your CSS code, with three levels of compression to choose from!

CSS AutoPrefixer

Intelligently add CSS vendor prefixes to your CSS code. Just paste and copy!

Image to Color Palette Generator

Get the primary colors of any image in hex format with this online tool!

Image Optimizer

Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible.

Button Maker

Use this tool to easily create those popular 80x15 micro buttons you see on web sites everywhere.

FavIcon Generator

Generate a favicon using any regular image with this tool. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is viewed.

Ribbon Rules Generator

Create alternating colored horizontal rules quickly with this new Web 2.0 tool.

.htaccess Banning Generator

Generate the necessary .htaccess code to ban visitors based on their IP address, referrals, or disable hotlinking on the desired file types on your server, such as images.

.htaccess Password Generator

Generate all the necessary codes needed to password protect a directory or selects files within it on your site using .htaccess.



Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site