SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's Causing Flashing Nav Links?

    Hello.

    I can't for the life of me figure out why the main nav links to this site are flashing and even disappearing somewhat when you roll your mouse over them.

    http://www.savagepixels.com/blue82/

    Thanks

  2. #2
    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,

    It's because you have applied a hover effect in js here:

    Code:
    // navigation hover fades code
    	$('nav ul li').hover(function() {
    		$(this).addClass('currentNavSelection a:hover').hide().fadeIn('slow');
    	}, function() {
    		$(this).removeClass('currentNavSelection a:hover');
    	});
    You are hiding the items when hovered and then fading them back in slowly so the effect is that the item disappears and then slowly fades in. If you roll over a few items quickly you hide the items before the next one can fade in and you get a queue of effects. You should probably stop all the other animations on the menu when you hover over an item.

    It's an awful effect anyway so why not just hover with css:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    ul.nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .nav li {
    	float:left;
    	margin:0 20px;
    }
    .nav a {
    	color: #0175FE;
    	text-decoration: none;
    	-moz-transition:all .5s ease;
    	-webkit-transition:all .5s ease;
    	transition:all .5s ease;
    }
    .nav a:hover{color:red}
    </style>
    </head>
    
    <body>
    <nav><!-- begin mainNav -->
    		
    		<ul class="nav">
    				<!-- begin mainNavList -->
    				<li><a href="blue82.html">blue 82</a></li>
    				<li><a href="wines.html">wines</a></li>
    				<li><a href="beers.html">beers</a></li>
    				<li><a href="food.html">food</a></li>
    				<li><a href="index.html">home</a></li>
    		</ul>
    </nav>
    </body>
    </html>


Tags for this Thread

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
  •