SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Navigation Color Fade In (DHTML)

    Can anyone suggest a way to do the following.

    Basically I have a simple CSS horizontal nav bar. On :hover over each item the background changes from dark grey to black. This gives a cool effect. BUT i wanna make it cooler!

    I want the dark grey to fade (over the course of say 0.25secs) to the black when I mouseover. How would I do this?

    CSS:

    HTML Code:
    /* NAVIGATION
    -----------------------------------------*/
    
    /* Navigation Header - for non-visual browsers */ 
    #main_navigation h2 {
    	text-indent: -9999px;
    	position: absolute;
    }
    
    
    ul#nav_main {
    	height: 3em;		/* Determines nav link box height - must be same as line-height */
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	color: #fff;
    	font: 0.7em/3 "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;		/* font-size: 1em; line-height: 1.5 */
    	letter-spacing: 2px;
    	width: 100%;
    }
    
    ul#nav_main li {
    	display: inline;		/* ensures li display horizontally */
    	white-space: nowrap;	
    	margin: 0;
    	padding: 0;
    
    
    }
    
    ul#nav_main li a {
    	float: left;		/* ensures each box displays right up against previous box */
    	text-decoration: none;		/* removes underline rules for hyperlinks */
    	color: #fff;
    	padding: 0 1em 0 1em;		/* Determines WIDTH of boxes */
    	border-bottom: 3px solid #ccc;		/* creates light grey border for each box */
    	border-left: 1px solid #ccc;		/* creates seperator for each item */
    	background-color: #333;		/* sets initial colour of menu items */
    
    
    }
    
    
    ul#nav_main li a:hover {
    	text-decoration: none;
    	background-color: #000;
    }
    
    
    ul#nav_main li a.home:hover {
    	border-bottom: 3px solid #80BF40;
    }
    	
    ul#nav_main li a.link_1:hover {
    	border-bottom: 3px solid #FFCC00;
    }
    
    ul#nav_main li a.link_2:hover {
    	border-bottom: 3px solid #BF4040;
    }
    
    ul#nav_main li a.link_3:hover {
    	border-bottom: 3px solid #BF4080;
    }
    
    ul#nav_main li a.link_4:hover {
    	border-bottom: 3px solid #BF8040;
    }
    
    ul#nav_main li a.link_5:hover {
    	border-bottom: 3px solid #CC0033;
    }
    
    ul#nav_main li a.link_6:hover {
    	border-bottom: 3px solid #6600FF;
    }
    
    HTML:

    HTML Code:
    <div id="main_navigation">
    		<h2>Main Site Navigation</h2>
    		<ul id="nav_main">
    			<li><a href="#" class="home">Home</a></li>
    			<li><a href="#" class="link_1">Link #1</a></li>
    			<li><a href="#" class="link_2">Link #2</a></li>
    			<li><a href="#" class="link_3">Link #3</a></li>
    			<li><a href="#" class="link_4">Link #4</a></li>
    			<li><a href="#" class="link_5">Link #5</a></li>
    			<li><a href="#" class="link_6">Link #6</a></li>
    		</ul>
    	</div>
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://www.google.co.uk/search?hl=en...G=Search&meta=

    Plenty of people have made scripts that do this. Basically, you need to use setInterval() and change the colour slightly at each interval.


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
  •