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 6 of 6

Thread: drop right menu

  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts

    drop right menu

    Hy,

    I am new to JQuery and JavaScript.I am trying to get an animated drop-RIGHT menu...basically I want the content of the menu to show-up in the right side, one by one.
    I found some code on the Internet, but I don't know how, or where to change. Can you please have a look? I am attaching the code. Thanks a lot.
    Attached Files Attached Files

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    What do you mean when you say "drop one by one"? Do you mean when the page loads you want each menu item to start at the top and then drop down to some fixed location and then stay there for the duration of the visit?

    If that's what you want, you can roll your own animation with not too much trouble:

    NOTE: I'm cheating and using the timers plugin to delay each menu item's animation, because it's just so damned easy to use. You can find it here:

    http://jquery.offput.ca/every/

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test animation</title>
    <style type="text/css">
    div {
    	position: absolute;
    	top: 0px;
    	margin: 10px;
    	padding: 10px;
    	border: 5px solid #000;
    	background-color: #ccc;
    	height: 20px;
    	width: 300px;
    }
    
    </style>
    <script type="text/Javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <script type="text/Javascript" src="scripts/jquery.timers.js"></script>	
    <script type="text/Javascript">
    $(function() {
    	ypos = 0;
    	theDelay = 50;
    	$(".rightmenu").hide();
    	$(".rightmenu").each(function(index) {
    		ypos += 55;
    		doAnimation($(this), ypos, theDelay);
    		theDelay += 1200;
    	});
    	
    	function doAnimation(obj, ypos, theDelay) {
    		//alert(theDelay);
    		$(obj).oneTime(theDelay, "soon", function() {
    			$(this).show();
    			$(obj).animate({
    			top: ypos
    		}, 1000
    		)
    		});
    	}
    });
    
    </script>
    </head>
    
    <body>
    	<div>Menu</div>
    	<div class="rightmenu">Menu Item 1</div>
    	<div class="rightmenu">Menu Item 2</div>
    	<div class="rightmenu">Menu Item 3</div>
    </body>
    </html>

  • Users who have thanked Fumigator for this post:

    alexa (02-26-2011)

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This is pretty cool Unfortunately it isn't what I meant. I am going to try to explain again...So I have my menu and when you click on the "Navigate" button everything drops down. I want it to drop to right...exactly the same idea, just to drop to the right . When I said one by one I meant that not all at once(so, just like this one, to be still animated). Please don't be under the impression that I'm just waiting for everything to be done for me.From what I read I need to change the display mode and something about float, but since I am new to this nothing good came out and this is why I am posting the original menu, just as I found it.
    Thanks again.

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    nothing ?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Like
    Code:
    .menu_head{
    float:left;
    }
    .menu_body 
    {
       display:none; 
       
       border-right:1px solid #998675;
       border-bottom:1px solid #998675;
       border-left:1px solid #998675;
       float:left;
    }
    .menu_body li
    {
       background:#493e3b;
       float:left;
       width:115px;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your reply....in the end it should result a horizontal menu..


  •  

    Posting Permissions

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