www.webdeveloper.com
Results 1 to 2 of 2

Thread: Tab menu using css active help

  1. #1
    Join Date
    Feb 2005
    Location
    South Coast NSW Aus
    Posts
    48

    Tab menu using css active help

    hi

    I've got a CSS tab menu, but I would like the hover effect to stick when the page is active. i.e. if on the homepage, the "Home" tab will have the hover effect.

    The code I have doesn't seem to be doing the job sadly...

    HTML:
    Code:
    		<div id="horiz-menu" class="splitmenu">
    							<ul class="mainlevel">
    <li><a href="/">Home</a></li>
    <li><a href="?L=users.desktop">Desktop</a></li>
    <li><a href="?L=contacts.contacts">My Contacts</a></li>
    <li><a href="?L=search.users">Search</a></li>
    <li><a href="?L=blogs.browse">Blogs</a></li>
    <li><a href="?L=chat.chat">Chat</a></li>
    <li><a href="?L=inkspot.index">Inkspot</a></li>
    <li><a href="?L=video.browse">Videos</a></li>
    
    </ul>
    				
    		</div>

    CSS:
    Code:
    div#horiz-menu a,
    div#horiz-menu li.active li a {
    	color: #fff;
    }
    
    div#horiz-menu li:hover,
    div#horiz-menu li.sfHover,
    div#horiz-menu li.active:hover,
    div#horiz-menu li.active.sfHover {
    	background: url(../images/frame/menu2-r.png) 100% 0 no-repeat;
    }
    
    div#horiz-menu li:hover a,
    div#horiz-menu li.sfHover a,
    div#horiz-menu li.active:hover a,
    div#horiz-menu li.active.sfHover a {
    	background: url(../images/frame/menu2-l.png) 0 0 no-repeat;
    	color: #fff;
    }
    
    #horiz-menu li.active,
    #horiz-menu li.active_menu {
    	background: url(../images/frame/menu-r.png) 100% 0 no-repeat;
    }
    
    #horiz-menu li.active a,
    #horiz-menu li.active_menu a {
    	background: url(../images/frame/menu-l.png) 0 0 no-repeat;
    	color: #407D91;
    }
    
    #horiz-menu li.active li.active,
    #horiz-menu li.active li.active a {
    	background: none;
    }
    
    
    #horiz-menu li:hover li:hover,
    #horiz-menu li.sfHover li.sfHover,
    #horiz-menu li.active li.active {
    	background: #453927;
    }

    Any help would be awesome

    thanks!

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    I believe you'll need to add some javascripting which determines the page, then applies the style.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles