ayozone

Here’s a drop down animated menu example made with jquery.js 1.2.2


Roll over this text to show the menu

Related links:

• jquery
• the delay effect trick

Here’s the source code :

<script type="text/javascript" src="http://ayozone.org/wp-content/scripts/jquery-1.2.2.pack.js"></script>
$(function() { 
$("a#menu-call").mouseover( function() {
    $("ul#menu").animate({height:"show",opacity:"show"},"slow"); return false;
  });
$("ul#menu").hover( function() {},
  function() { $("ul#menu").animate({opacity:1.0},1125).slideUp(375); return false; 
  });
$("a.mlnk").hover( 
  function() { $(this).css({ backgroundColor:"#ececec", border:"1px solid #1042de"  }) },
  function() { $(this).css({ border:"none",backgroundColor:"#ffffff"  }) }
  );
})
</script>
<a href="#" id="menu-call" style="float:right;margin-right:64px;">menu</a></p>
<div id="menu-container">
<ul id="menu" style="position:absolute;display:inline;z-index:99;width:216px;background:#fff;border:1px solid black;margin-left:300px;margin-top:4px;padding:3px;display:none;list-style-type:none;">
<li style="background:none;padding:0 4px 0 0;margin:3px;">
	<a href="#" class="mlnk" style="display:block;width:100%;text-decoration:none;"><span style="padding-left:12px">entry one</span></a></li>

<li style="background:none;padding:0 4px 0 0;margin:3px;">
	<a href="#" class="mlnk" style="display:block;width:100%;text-decoration:none;"><span style="padding-left:12px">entry two</span></a></li>
<li style="background:none;padding:0 4px 0 0;margin:3px;">
	<a href="#" class="mlnk" style="display:block;width:100%;text-decoration:none;"><span style="padding-left:12px">entry three</span></a></li>
</ul>
</div>