...

View Full Version : jQuery drop right menu



alexa
02-25-2011, 09:59 AM
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.

Fumigator
02-25-2011, 09:38 PM
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/



<!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>

alexa
02-26-2011, 11:56 AM
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.

alexa
03-01-2011, 03:39 PM
nothing ? :(

abduraooft
03-01-2011, 03:49 PM
Like
.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;
} ?

alexa
03-02-2011, 07:22 AM
Thanks for your reply....in the end it should result a horizontal menu..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum