We help IT Professionals succeed at work.
Get Started

How do I highlight 'active' tab in nav menu

IShiva
IShiva asked
on
320 Views
Last Modified: 2012-05-09
Hey all

I would like to highlight the correct menu tab with its corresponding page (eg: home, about us etc). I am having brainlock. I am using an image for the tabs. Each image has both states and I use 'background-position' to show the correct tab.

How can I show show the 'active' tab if I am using images for my menu?

You can see this at http://sgc.tipstudio.com

Code is below.

Thanks much!!

iShiva
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="pagewrap">
	<div id="header">
    	<div id="logo"></div>
        <div id="nav_container">
        	<ul id="nav">
            	<li class="home"><a href="index.php">home</a></li>
                <li class="ourevents"><a href="ourevents.php">our events</a></li>
                <li class="aboutus"><a href="aboutus.php">about us</a></li>
                <li class="contactus"><a href="contactus.php">contact us</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
    	<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae sodales mi. Duis pulvinar venenatis egestas. Suspendisse eu dui neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent urna mi, tempus id tempus sed, tempus et ligula. Curabitur sed ullamcorper erat. Integer mattis placerat massa, a hendrerit velit tristique non. Fusce nec lacus adipiscing felis tincidunt ullamcorper ut eget ante. Integer nec lacus nec dolor auctor pharetra in at purus. Vestibulum tincidunt, arcu eu malesuada tempor, nunc libero convallis enim, et tincidunt justo nunc vitae orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at mi ac nibh hendrerit mattis. Etiam facilisis ultricies sapien, posuere hendrerit turpis ultrices eu. In hac habitasse platea dictumst. Vivamus lectus nisi, luctus nec elementum eget, tincidunt rhoncus dui. Maecenas enim sapien, luctus a convallis sed, ullamcorper nec dui. Nulla ac odio dolor. Morbi ligula leo, volutpat vel fermentum egestas, sagittis eu odio. Ut a ipsum justo, nec pretium elit. Nunc et tortor libero, vel auctor sem.

Morbi eleifend varius nisi, egestas tristique velit laoreet ut. Ut in nulla orci, et egestas tortor. Phasellus sagittis pulvinar nulla, eget ullamcorper erat ornare in. Duis porta urna nec tortor vehicula quis rhoncus enim aliquet. Etiam in nunc libero, non tincidunt ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut porttitor arcu ut tortor lacinia dignissim. Aliquam non sem dui. Sed tincidunt libero scelerisque leo gravida nec condimentum augue molestie. Quisque laoreet suscipit sem, ac vulputate nulla pulvinar ac. Quisque lacinia, turpis et ornare ultrices, augue est sagittis mauris, ut convallis nisl libero eget orci. Praesent felis metus, iaculis ut suscipit ut, molestie eget nulla. 
        </p>
    </div>
</div>



</body>
</html>


CSS

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

body {
	background-color: #612626;
}

a {
	outline:none;
}

ul {list-style:none;}

#pagewrap {
	width:939px;
	margin:0 auto;
}

#header {
	background:url(../images/header_bg.jpg) no-repeat top;
	width:939px;
	height:144px;
}

#logo {
	width:299px;
	padding:100px 0 0 20px;
	float:left;
}

#nav_container {
	float:right;
	padding:103px 30px 0 0;
}

ul#nav {
	
}
	ul#nav li {
		display:inline;
	}
		ul#nav li a {
			display:block;
			height:43px;
			text-indent:-9999px;
			float:left;
		}
		
			ul#nav li.home a {
				width:127px;
				background:url(../images/nav_home.jpg) bottom no-repeat;
			}
			
			ul#nav li.ourevents a {
				width:126px;
				background:url(../images/nav_ourevents.jpg) bottom no-repeat;
			}
			
			ul#nav li.aboutus a {
				width:128px;
				background:url(../images/nav_aboutus.jpg) bottom no-repeat;
			}
			
			ul#nav li.contactus a {
				width:136px;
				background:url(../images/nav_contactus.jpg) bottom no-repeat;
			}
			
			ul#nav li a:hover {
				background-position:top center;
			}

#main {
	margin-top:2px;
	background:#FFF;
	padding:30px;
	line-height:20px;
	height:400px;
}

Open in new window

Comment
Watch Question
CERTIFIED EXPERT
Most Valuable Expert 2020
Most Valuable Expert 2018
Commented:
This problem has been solved!
Unlock 1 Answer and 11 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE