I have developed a cool dropdown menu and named it in honor of Yola. This dropdown uses jQuery for scripting and the jQuery UI css for styling.
Called Yola DropDown, this is a Jquery plugin that lets you easily create a dropdown menu!
Example:
Usage Instructions:
Putting this on your website is actually fairly easy. Just follow the simple step by step instructions.
1. Include the jQuery library into a HTML widget:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
2. Include the Yola Drodown javascript file:
<script src="http://kevinscodeexamples.yolasite.com/resources/yoladrop/yoladrop.js" type="text/javascript"></script>
3. Include the Yola Drodown css file:
<link href="http://kevinscodeexamples.yolasite.com/resources/yoladrop/yoladrop.css" rel="stylesheet"/>
4. Add the code for the dropdown:
<dl class/id="your class/id">
<dt>(your dropdown title)</dt>
<div>
<!--your dropdown dd's here-->
<dd><a href="(your dropdown link)">(your link text)</a></dd>
<!--your dropdown dd's end here-->
</div>
</dl>
5. Initialize the dropdown
<script type="text/javascript">
//load on document ready
$(document).ready(function(){
//initialize dropdown
$("your class/id").yDrop({options});
});
</script>
Here are the available options:
ASI:milliseconds The time it takes for the entry animation to take. Default:300
ASO:milliseconds The time it takes for the exit animation to take. Default:300
defPad:"padding width" The padding for the dropdown menu. Default:5px
inType:"fadeslide/fade/slide" The entry animation type. Default:fadeslide
outType:"fadeslide/fade/slide" The exit animation type. Default:fadeslide
titDef:true/false Whether the title should be styled. Default:true
Example:
This:
$("your class/id").yDrop({ASI:1000, defPad:"10px", inType:"fade", outType:"slide"});
Will result in this:
