Need help activating the active state on my menu

**Zapppa** · Aug 26, 2009 00:58

Hi, I am having a lot of difficulties turning on the active state when a page is being viewed.

Ideally, I would like the menu tab to be on the blue hover state when a page has been selected from the menu.

So far I cant get his to work.

Here is my menu code:

Code CSS:

.menu{
	border:none;
	width:950px;
	border:0px;
	margin:0px;
	padding:0px;
	font: 60&#37; "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}
 
 
.menu ul{
	background:#3e4c55;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:right;
		padding:0px;
		}
 
 
	.menu li a{
		background:#3e4c55 url("images/seperator.gif") bottom right no-repeat;
		color:#fff;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 20px;
		text-align:center;
		text-decoration:none;
		}
 
 
	 .menu li a:hover, .menu ul li:hover a {
		background: #017ac1 url("images/hover.gif") bottom center no-repeat;
		color:#FFFFFF;
		text-decoration:none;
		}
 
 
 
 
	.menu li ul{
		background:#3e4c55;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:160px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
 
 
		/* -----------------SUB MENU------------------- */
 
	.menu li:hover ul{
		display:block;
 
		}
 
 
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:160px;
		}
 
	.menu li:hover li a{
		background:none;
 
		}
 
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 19px;
		text-align:left;
		}
 
		.menu li ul a:hover, .menu li ul li:hover a {
			background:#017ac1 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#fff;
			text-decoration:none;
			}
 
 
	.menu p{
		clear:right;
		}

And here is the code I have for the menu on my page:

Code HTML4Strict:

<div class="menu">
		<ul>
			<li><a href="contact.html" >CONTACT US</a></li>
            <li><a href="careers.html">CAREERS</a></li>
            <li><a href="events.html" >EVENTS</a></li>   
 
            <li><a href="news.html">NEWS</a>
			<ul><li><a href="news.html">NEWS</a></li>
			<li><a href="profile.html">ARCHIVE</a></li>
			</ul></li>
 
            <li><a href="products.html" id="current">PRODUCTS</a>
				<ul>
					<li><a href="1.html">1</a></li>
                    <li><a href="2.html">2</a></li>
					<li><a href="3.html">3</a></li>
					<li><a href="4.html">4</a></li>
						   </ul>
             </li>
 
            <li><a href="about.html">ABOUT US</a></li>
			<li><a href="index.html" class="active">HOME</a></li>
		 </ul>
 
</div>

I realise I have some redundant code and I will fix this whenever I get the active to work.

Any help at all would be much appreciated, as I have been staring at this for a while now!

**droopsnoot** · Aug 26, 2009 02:31

Can you show the definition for the "active" class in your CSS? Or did I miss it somewhere, I can't see where the alternate style is defined.

**Zapppa** · Aug 26, 2009 03:08

Hi

I tried adding it in a few places but I took it out as it was not functioning wherever I put it.

Code CSS:

.menu li a:hover, a:active, .menu ul li:hover a {
        background: #017ac1 url("images/hover.gif") bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }

I thought that it would have gone in here as it will be the same style as the hover state

:s stumped!

**droopsnoot** · Aug 26, 2009 04:25

I'm no expert, but I thought you actually needed to define it as a class rather than a state:

.active {
background: whatever;
color: #ffffff;
text-decoration: none;
}

rather than using the active state of a link. The idea is it overrides certain parts of the parent div class.

**Zapppa** · Aug 26, 2009 04:33

I have added that in and tried calling it in the <li> and also in the <a href> tag.

No luck yet

**Paul O'B** · Aug 26, 2009 04:36

Hi,

Are you confusing the active state with a current page indicator method?

The :active state is a transient state that activates only on the moment you click the link. As soon as you release the mouse it's gone. It is not a persistent state that is available to other pages.

Your code is flawed anyway as you have stylesd all active links and not the onle specific to your element.

Code:

.menu li a:hover, a:active, .menu ul li:hover a

It should be:

Code:

.menu li a:hover,.menu li a:active, .menu ul li:hover a

If you are looking for a current page indicator then you would need to add a new class to the menu item in the html and target it using that class as a modifier to the styles. Then on every other page you move the class in the html to the current page link as required.

Code:

<li ><a class="active" href="#">test</a></li>

Code:

.menu li a:hover,.menu li a.active, .menu ul li:hover a

Alternatively this could be controlled via class or id in the body which is changed on each page to reflect the menu item selected. It does complicate the css a little bit though but allows the menu to remain the same on all pages.

http://www.pmob.co.uk/temp/nav-body3.htm
http://www.pmob.co.uk/temp/simple-tab5.htm
http://www.pmob.co.uk/temp2/page2.htm

**droopsnoot** · Aug 26, 2009 04:37

That was my assumption, that the requirement is to show current page as highlighted in the menu.

**Zapppa** · Aug 26, 2009 04:44

Originally Posted by Paul O'B

Hi,

Are you confusing the active state with a current page indicator method?

The :active state is a transient state that activates only on the moment you click the link. As soon as you release the mouse it's gone. It is not a persistent state that is available to other pages.

Your code is flawed anyway as you have stylesd all active links and not the onle specific to your element.

Code:

.menu li a:hover, a:active, .menu ul li:hover a

It should be:

Code:

.menu li a:hover,.menu li a:active, .menu ul li:hover a

If you are looking for a current page indicator then you would need to add a new class to the menu item in the html and target it using that class as a modifier to the styles. Then on every other page you move the class in the html to the current page link as required.

Code:

<li ><a class="active" href="#">test</a></li>

Code:

.menu li a:hover,.menu li a.active, .menu ul li:hover a

Alternatively this could be controlled via class or id in the body which is changed on each page to reflect the menu item selected. It does complicate the css a little bit though but allows the menu to remain the same on all pages.

I was confusing the state indeed, I have used the active call before as the current page indicator, maybe my coding was a little off though.

The code you provided just now has changed all my sub links to be in the hover state when you hover over the products link. :/

I'm still stumped!

**Paul O'B** · Aug 26, 2009 04:59

The code you provided just now has changed all my sub links to be in the hover state when you hover over the products link. :/

Which code are you referring to?

The line below will make no difference at all because it sets the active state to the same as the hover state and therefore there is no difference.

Code:

.menu li a:hover,.menu li a:active, .menu ul li:hover a

You don't need the above anyway and you should be using this instead:

Code:

.menu li a:hover,.menu li a.active, .menu ul li:hover a{
    background: #017ac1 url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

If you've tried to implement my other suggestions then I'd need to see your revised code.

I was confusing the state indeed, I have used the active call before as the current page indicator, maybe my coding was a little off though.

No the pseudo active class can never be used as a persistent indicator (although IE treats it as :focus and will hold the color until the page changes or focus is lost).

**Zapppa** · Aug 26, 2009 05:05

Originally Posted by Paul O'B

Which code are you referring to?

The line below will make no difference at all because it sets the active state to the same as the hover state and therefore there is no difference.

Code:

.menu li a:hover,.menu li a:active, .menu ul li:hover a

You don't need the above anyway and you should be using this instead:

Code:

.menu li a:hover,.menu li a.active, .menu ul li:hover a{
    background: #017ac1 url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

If you've tried to implement my other suggestions then I'd need to see your revised code.

No the pseudo active class can never be used as a persistent indicator (although IE treats it as :focus and will hold the color until the page changes or focus is lost).

Thanks! Getting closer!

I am still getting the hover state when I hover over the products sub link. Here is my revised CSS...I am searching through this at the minute for what may be causing this:

Code CSS:

.menu{
	border:none;
	width:950px;
	border:0px;
	margin:0px;
	padding:0px;
	font: 60% "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}
 
 
.menu ul{
	background:#3e4c55;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:right;
		padding:0px;
		}
 
 
	.menu li a{
		background:#3e4c55 url("images/seperator.gif") bottom right no-repeat;
		color:#fff;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 20px;
		text-align:center;
		text-decoration:none;
		}
 
 
	 .menu li a:hover, .menu ul li:hover a {
		background: #017ac1 url("images/hover.gif") bottom center no-repeat;
		color:#FFFFFF;
		text-decoration:none;
		}
 
 
 
 
	.menu li ul{
		background:#3e4c55;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:160px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
 
 
		/* -----------------SUB MENU------------------- */
 
	.menu li:hover ul{
		display:block;
 
		}
 
 
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:160px;
		}
 
	.menu li:hover li a{
		background:none;
 
		}
 
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 19px;
		text-align:left;
		}
 
 
	.menu li a:hover,.menu li a.active, .menu ul li:hover a{
    background: #017ac1 url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
 
 
	.menu p{
		clear:right;
		}

Here is the HTML code:

Code HTML4Strict:

<div class="menu">
		<ul>
			<li><a href="contact.html" >CONTACT US</a></li>
            <li><a href="careers.html">CAREERS</a></li>
            <li><a href="events.html" >EVENTS</a></li>   
 
            <li><a href="news.html">NEWS</a>
			<ul><li><a href="news.html">NEWS</a></li>
			<li><a href="profile.html">ARCHIVE</a></li>
			</ul></li>
 
            <li><a href="products.html">PRODUCTS</a>
				<ul>
					<li><a href="1.html">1</a></li>
                    <li><a href="2.html">2</a></li>
					<li><a href="3.html">3</a></li>
					<li><a href="4.html">4E</a></li>
 
			       </ul>
             </li>
 
            <li><a href="about.html">ABOUT US</a></li>
			<li><a href="index.html" class="active">HOME</a></li>
		 </ul>
 
</div>

**Zapppa** · Aug 26, 2009 05:53

SOLVED!!

Thanks very much for your help!!

I was putting the code in the wrong part of the menu, like a complete n00b!!!

**Paul O'B** · Aug 26, 2009 07:33

Glad you sorted it

User Tag List

Thread: Need help activating the active state on my menu

Thread Tools

Display

Need help activating the active state on my menu

Bookmarks

Bookmarks

Posting Permissions