Highlight The Current Page

Oct

18

Easy to learn highlight the current page in the navigation on your website.

Now a day’s many trick to do for “highlight the current page” but in this article easy to learn and easy to do it “highlight the current page”. In this article only use “CSS” and also showed how to do dynamically with “PHP”?

I’ve used the following CSS method to highlight the current page in a web site. To work each page has to have a unique body ID and each link has to have a unique ID. Then in the CSS you use those selectors to highlight the current page.

Static Page

Step 1 :

Create the image like this :

Step 2 :

This is HTML file useing menu with <ul> and <li>.

HTML: Select All

<body class="home">
<div id="globalheader">
	<ul id="globalnav">
        <li id="gn-home"><a href="home.htm">Home</a></li>
        <li id="gn-about-us"><a href="aboutus.htm">About Us</a></li>
        <li id="gn-contact-us"><a href="contactus.htm">Contact Us</a></li>
        <li id="gn-sitemap"><a href="sitemap.htm">Sitemap</a></li>
  </ul>
</div>

For about us page just change the body class

HTML: Select All

<body class="about-us">

For contact us page just change the body class

HTML: Select All

<body class="contact-us">

For sitemap page just change the body class

HTML: Select All

<body class="sitemap">

Step 3 :

This is CSS file you just copy on you CSS.

CSS : Select All


/* ---------------BASE CSS---------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:none; }
ol,ul { list-style:none; }
caption, th { text-align:left; }
h1,h2,h3,h4,h5,h6,pre,address,caption,cite,code,em,strong,th { font-size:1em; font-style:normal; font-weight:normal; }
q:before,q:after { content:''; }

body { font:76%/1em Arial, Helvetica, sans-serif; }
table { font-size:inherit; }
select,input,textarea { font:99% verdana, sans-serif; }
pre,code { font:115% monospace; }
body * { line-height:1.5em; }

/* -----------------------------NAV----------------------------- */
#globalheader { width:780px; margin:0 auto; position:relative; }
#globalnav { background:url(../images/nav.png) top center no-repeat; width:500px; height:64px; }
#globalnav li { display:inline; }
#globalnav li a { float:left; height:0px; overflow:hidden; padding-top:64px; width:125px; background:url(../images/nav.png) top center no-repeat; }
/*----------------BUTTONS----------------*/
#globalnav li#gn-home a {  background-position:0px 0px; }
#globalnav li#gn-about-us a {  background-position:-125px 0px; }
#globalnav li#gn-contact-us a {  background-position:-250px 0px; }
#globalnav li#gn-sitemap a {  background-position:-375px 0px; }

 /*----------------HOVER----------------*/
#globalnav li#gn-home a:hover,,body.home #globalnav li#gn-home a:hover {  background-position:0px -64px; }
#globalnav li#gn-about-us a:hover,body.about-us #globalnav li#gn-about-us a:hover {  background-position:-125px -64px; }
#globalnav li#gn-contact-us a:hover,body.contact-us #globalnav li#gn-contact-us a:hover {  background-position:-250px -64px;  }
#globalnav li#gn-sitemap a:hover,body.sitemap #globalnav li#gn-sitemap a:hover {  background-position:-375px -64px;  }

 /*----------------SELECTED----------------*/
body.home #globalnav li#gn-home a {  background-position:0px -128px; }
body.about-us #globalnav li#gn-about-us a {  background-position:-125px -128px; }
body.contact-us #globalnav li#gn-contact-us a { background-position:-250px -128px; }
body.sitemap #globalnav li#gn-sitemap a { background-position:-375px -128px; }

Dynamic Page

what if you are using a CMS like WordPress which includes that body tag as part of a template?

In this case, we can use PHP to look at the URI of the page and create the ID based on that. and if you want to see the demo you can see on my blog. i used same code.

Code: Select All

</head>/*-------AFTER THE HEAD-------*/

<?php
  $page = $_SERVER['REQUEST_URI'];
  $page = str_replace("/","",$page);
  $page = str_replace(".php","",$page);
  $page = str_replace("?s=","",$page);
  $page = $page ? $page : 'default'
?>

<body id ="<?php echo $page ?>" >

This is CSS for Daynamic php site or CMS like WordPress.

CSS : Select All


/* ---------------BASE CSS---------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:none; }
ol,ul { list-style:none; }
caption, th { text-align:left; }
h1,h2,h3,h4,h5,h6,pre,address,caption,cite,code,em,strong,th { font-size:1em; font-style:normal; font-weight:normal; }
q:before,q:after { content:''; }

body { font:76%/1em Arial, Helvetica, sans-serif; }
table { font-size:inherit; }
select,input,textarea { font:99% verdana, sans-serif; }
pre,code { font:115% monospace; }
body * { line-height:1.5em; }

/* -----------------------------NAV----------------------------- */
#globalheader { width:780px; margin:0 auto; position:relative; }
#globalnav { background:url(../images/nav.png) top center no-repeat; width:500px; height:64px; }
#globalnav li { display:inline; }
#globalnav li a { float:left; height:0px; overflow:hidden; padding-top:64px; width:125px; background:url(../images/nav.png) top center no-repeat; }
/*----------------BUTTONS----------------*/
#globalnav li#gn-home a {  background-position:0px 0px; }
#globalnav li#gn-about-us a {  background-position:-125px 0px; }
#globalnav li#gn-contact-us a {  background-position:-250px 0px; }
#globalnav li#gn-sitemap a {  background-position:-375px 0px; }

 /*----------------HOVER----------------*/
#globalnav li#gn-home a:hover,,body.home #globalnav li#gn-home a:hover {  background-position:0px -64px; }
#globalnav li#gn-about-us a:hover,body.about-us #globalnav li#gn-about-us a:hover {  background-position:-125px -64px; }
#globalnav li#gn-contact-us a:hover,body.contact-us #globalnav li#gn-contact-us a:hover {  background-position:-250px -64px;  }
#globalnav li#gn-sitemap a:hover,body.sitemap #globalnav li#gn-sitemap a:hover {  background-position:-375px -64px;  }

 /*----------------SELECTED----------------*/
#home #globalnav li#gn-home a {  background-position:0px -128px; }
#about-us #globalnav li#gn-about-us a {  background-position:-125px -128px; }
#contact-us #globalnav li#gn-contact-us a { background-position:-250px -128px; }
#sitemap #globalnav li#gn-sitemap a { background-position:-375px -128px; }

3 Responses

Mehmet Nov 5 2008 @ 5:37 pm

than you so much, i have looked a lot of examples around i tried all of the ways this.but yours is so clear an d usable.thank u again.greating from Türkiye,
sory about my english..

Rebekah Jan 7 2009 @ 10:53 pm

Thanks, I’ve been stuck on this for ages and tried others but this is easier to understand and works like a charm.

lien Oct 13 2009 @ 7:10 am

Hello, Ive been looking for ages for a clean & comprehensable system to highlight the currentpage. I get the first parts (php, image, …)

but then i come to the buttons, hover & selected part where i’m missing the point. I’am working with joomla and i cant figure out the right ID for the menu-items. So if anyone could help me out that would be great!

Besides that, love the work! great explenation (the problem is my knowledge of css )

Best regards,

Static Page

Step 1 :

Step 2 :

Step 3 :

Dynamic Page

Tag Cloud

Categories

Archives

best of cjs

Recent Updated

most talkative user