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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery Navigation Menu Assistance?

    Hello, I am needing assistance with a simple navigation menu. It's a jquery menu and I'm trying to kind of flip it's direction in a way. Basically I'm needing it to look similar to this


    here is what it is right now https://dl.dropbox.com/u/57922856/ea...ated-menu.html

    Here is my js code.
    Code:
    $(document).ready(function(){  
      
        //When mouse rolls over  
        $("li").mouseover(function(){  
            $(this).stop().animate({height:'150px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
        });  
      
        //When mouse is removed  
        $("li").mouseout(function(){  
            $(this).stop().animate({height:'50px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
        });  
      
    });
    here is my css
    Code:
    ul{  
        margin:0;  
        padding:0;  
    	
    }  
    
    li{  
        width:100px;  
        height:50px;  
        float:left;  
        color:white;  
        text-align:center;  
        overflow:hidden;  
    }  
      
    a{  
        color:#FFF;  
        text-decoration:none;  
    }  
      
    p{  
        padding:0px 5px;  
    }  
      
        .subtext{  
            padding-top:15px;  
        }  
      
    /*Menu Color Classes*/  
    .green{background:black;}
    .yellow{background:black;}
    .red{background:black;}
    .purple{background:black;}
    .blue{background:black;}
    Think you can help a guy out with this?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Seems like you just need to animate the margin-top as well as the height of the elements. Something like:

    Code:
        <script type="text/javascript">
    $(document).ready(function(){  
      
        //When mouse rolls over  
        $("li").mouseover(function(){  
            $(this).stop().animate({height:'150px',marginTop:'-100px'},{queue:false, duration:200, easing: 'easeOutBounce'})  
        });  
      
        //When mouse is removed  
        $("li").mouseout(function(){  
            $(this).stop().animate({height:'50px',marginTop:0},{queue:false, duration:200, easing: 'easeOutBounce'})  
        });  
      
    });	</script>
    You might need to give your menu a bit more space at the top to fit it in.


  •  

    Posting Permissions

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