Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with Menu Hover effect

    Help,

    I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item.

    Here is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title>hello</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript" src="jquery.js"></script>
            <script src="hoverIntent.js" type="text/javascript"></script>
            <script type="text/javascript">
            $(document).ready(function () {
    
                $("#nav a").append("<em></em>");
                $("#nav a").hoverIntent(function () {
                    $(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
                    var hoverText = $(this).attr("title");
                    $(this).find("em").text(hoverText);
                }, function () {
                    $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
                });
    
                  
            });
            </script>
    
    <style type="text/css">
    
    body {
        margin: 0px;
    }
    #nav 
    {
        border-top: 2px solid #000;
        border-bottom:2px solid #000;
    	width: 100%;
    	height: 36px;
        line-height: 36px;
    	float: left;
    	background:url("images/OFF2.gif") repeat-x top left;
    }
    #nav ul {
    	list-style: none;
    	width: 900px;
    	margin: 0 auto;
    	padding: 0;
    	position:relative;
    }
    #nav li {
    	float: left;
    }
    #nav li em {
    	background: url(images/home.png) no-repeat;
    	width: 180px;
    	height: 45px;
    	position: absolute;
    	top: -43px;
    	left: 0px;
    	padding: 20px 12px 10px;
    	z-index: 1;
    	display: none;
    }
    #nav li a {
    	font-family:"Georgia", "Sans-Serif";
        display: inline-block;
        text-decoration: none;
        font-size:medium;
        padding: 0px 5px;
    	text-align:center;
    	color: #000;
        width:110px;
        height: 36px;
        line-height: 36px;
    	background:transparent url("images/off.gif") no-repeat top right;
    }
    #nav li a:hover {
    	font-family:"Georgia", "Sans-Serif";
        display: inline-block;
        text-decoration: none;
        font-weight:bold;
        font-size:medium;
        padding: 0px 5px;
        width:110px;
        height: 36px;
        line-height: 36px;
    }
    </style>
    </head>
    <body>
    <div id="nav">
        <ul>
            <li><a href="#">Item1</a></li>
    		<li><a href="#">Item2</a></li>
    		<li><a href="#">Item3</a></li>
    		<li><a href="#">Item4</a></li>
    	</ul>
    </div>
    </body>
    </html>
    Thank you!

  • #2
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think I will need a loop.

    If (user hovers over option 1 - or a certain class)

    do this......

    If (user hovers over option 2 - or a certain class)

    do this......

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Still struggling with this one.

    bueller....

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Move your question to the jQuery forum for a quicker response...
    also, a link to the hoverIntent lib might help...

    Since I can't work the problem without jQuery and hoverIntent I'll make a guess...

    Assuming you set the "fly in" position with top: "-34" I would change that to a variable, and modify that variable with a hover. The js might look like this:
    Code:
    FlyIn = "34";
    
            $(document).ready(function () {
                
                $("#nav a").append("<em></em>");
                $("#nav a").hoverIntent(function () {
                    $(this).find("em").animate({ opacity: "show", top: FlyIn }, "fast");
                    var hoverText = $(this).attr("title");
                    $(this).find("em").text(hoverText);
                }, function () {
                    $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
                });
    
                
    document.getElementById("Item1").onmouseover = function () {FlyIn = "34";}
    document.getElementById("Item2").onmouseover = function () {FlyIn = "64";}
    document.getElementById("Item3").onmouseover = function () {FlyIn = "94";}  
    document.getElementById("Item3").onmouseover = function () {FlyIn = "124";}  
            });
    but that's making a few assumptions, also I'm sure jQuery has a shorthand for document.getElementById...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe


  •  

    Posting Permissions

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