SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help activating the active state on my menu

    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% "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!


  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    409
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    http://www.firenza.net - my homage to a car from the 1970s

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    409
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    http://www.firenza.net - my homage to a car from the 1970s

  5. #5
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added that in and tried calling it in the <li> and also in the <a href> tag.

    No luck yet

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    409
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That was my assumption, that the requirement is to show current page as highlighted in the menu.
    http://www.firenza.net - my homage to a car from the 1970s

  8. #8
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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).

  10. #10
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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>

  11. #11
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SOLVED!!

    Thanks very much for your help!!

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

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •