Getting menu items to focus

Get Started
1

Hi,

I seem to have forgotten how to do this:

I want the menu items on my website to focus as the current page when a user clicks on the menu item. How can I achieve this?. Please somebody remind me the how-to. thanks

Regards

2

When going from page to page, just add a class current to your style:


#menu a:hover,
#menu a:focus,
#menu a.current {
    /* what ever style you want to use */
}

and add the class to the anchor of the page you’re on, so on the home page this would be:


<div id="menu">
    <ul>
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">About</a></li>
    </ul>
</div>
3

Hi, thanks for your reply. before your reply did something like this but forgot to mention that, the current page is only effected on the home page but not on the other pages. Please help check what could be wrong with the styling below:

<div id="menu"> 
		<ul> 
			<li class="current_page_item"><a href="index.html" class="first">Home</a></li> 
			<li><a href=http://saterisk.com target="_blank">About</a></li> 
			<li><a href="help.html">Help</a></li> 
		</ul> 
	</div>

corresponding CSS:

#menu {
	float: left;
	width: 500px;
}

#menu ul {
	margin: 0;
	padding: 8px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: block;
	float: left;
	background: url(images/img02.jpg) no-repeat right 10px;
}

#menu a {
	display: block;
	float: left;
	margin: 0px 6px;
	padding: 6px 20px 6px 20px;
	letter-spacing: -1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #8E8E8E;
}

#menu a:hover {
	text-decoration: none;
	background: #6A6A6A;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: #6A6A6A;
	color: #FFFFFF;
}

#menu .first {
	
}

having seen your example, I have tried to merge that with what learnt from somewhere else but only the home page is getting current page highlighting. thanks for your assistance.

4

I see you declare the current class on the list items


#menu li.current_page_item a {
    background: #6A6A6A;
    color: #FFFFFF;
}

I don’t know if you did change the current class to the appropriate <li> like this for about Us


<div id="menu"> 
    <ul> 
        <li><a href="index.html" class="first">Home</a></li> 
        <li  class="current_page_item"><a href=http://saterisk.com target="_blank">About</a></li> 
        <li><a href="help.html">Help</a></li> 
    </ul> 
</div>

and I furthermore see a class first on the home anchor but that class doesn’t hold any values in your CSS??

5

following your example is simple but the question is: does one need to put the class current in every <li> in the whole navigation?

I have corrected what you pointed out. the the class “first” is optional for variety purposes.
What is important is the “content…” class which have added to the li anchor. But the behaviour now is, having all link as current page. too bad.

6

You should it only add it to th li on the current page. So if your on the About Us page, only that li should have the current class, not all

7

many thanks. I got it sorted.

8

Your welcome :slight_smile: Good that you got it sorted.