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!


Add a theme to style this dropdown!

 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>


  <!--your dropdown dd's here-->

  <dd><a href="(your dropdown link)">(your link text)</a></dd>

   <!--your dropdown dd's end here-->



  5. Initialize the dropdown

   <script type="text/javascript">

//load on document ready


//initialize dropdown

$("your class/id").yDrop({options});



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



$("your class/id").yDrop({ASI:1000, defPad:"10px", inType:"fade", outType:"slide"});

Will result in this:

Example with Options