[jQuery] Problem with a jQuery script (drop-down)
Well i have this script for a drop-down menu.
My problem is that the box starts already dropped down. I want so that
it is "dropped in" (i mean simply gone) and when i click the link, the
box drops down. Hope you understand me. :)
It would be even nicer if it could work when i hover over it drops
down and when i hover out of it drops back in. :)
I know it's quite easy, but the fact is i am starting out with this
and i am still learning, and i need this kind of script which partly i
have found here and i wanted to extend it to my needs, without
success: http://www.learningjquery.com/2008/02/simple-effects-plugins
.
Here is the 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">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.min.js"></script>
<script>
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
return this.animate({marginTop: parseInt(this.css('marginTop')) <
0 ? 0 : -h}, speed, easing, callback);
};
$(document).ready(function() {
var $box = $('#box')
.wrap('<div id="box-outer"></div>');
$('#blind').click(function() {
$box.blindToggle('slow');
});
});
</script>
<style>
#box {
padding: 1px 15px 5px 0;
height: 100px;
width: 170px;
text-align: left;
background: #333;
color: #FFF;
}
#box-outer {
overflow: hidden;
height: 120px;
}
</style>
</head>
<body>
<a href="#" id="blind">Click me</a>
<div id="box">
<ul>
<li>Drop-down Item1</li>
<li>Drop-down Item2</li>
<li>Drop-down Item3</li>
<li>Drop-down Item4</li>
</ul>
</div>
</body>
</html>
[/code]
Hopefully someone knows what needs to be added, i tried a lot of
things with my poorly knowledge, but without success.
Thank you.