Pages

Saturday, August 25, 2012

Drop down menu based on jQuery javascript libraries.


SBZsoft sbmenu

Drop down menu based on jQuery javascript libraries.

This menu currently supports 3 types of effects:
  • Slide
  • Fade
  • Show
(the slide effect is my favorite.)


to use this menu u need the hierarchy:
<div class="myMenu">
<ul>
  <li>
    <a href="link">link1</a>
    <ul>
        <li><a href="link">link1_1</a></li>
        <li>
           <a href="link">link1_2</a>
           <ul>
               <li><a href="link">link1_2_1</a></li>
               <li><a href="link">link1_2_2</a></li>
           </ul>
        </li>
        <li><a href="link">link1_3</a></li>
    </ul>
  </li>
  <li><a href="link">link2</a></li>
  <li>
    <a href="link1">link3</a>
    <ul>
        <li><a href="link">link3_1</a></li>
        <li><a href="link">link3_2</a></li>
        <li>
          <a href="link">link3_3</a>
          <ul>
            <li><a href="link">link3_3_1</a></li>
            <li><a href="link">link3_3_2</a></li>
          </ul>
        </li>
        <li><a href="link">link3_4</a></li>
    </ul>
  </li>
  <li><a href="link1">link4</a></li>
</ul>
</div>
in the head of the html page you'll need:
# Include the jQuery.js javascript file
# Include the sbmenu.js javascript file
# Include the sbmenu.css stylesheet file
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.myMenu').sbmenu(
      { rtl: false, //Is the menu Right-To-Left
        vertical:false, //Is the menu vertical
        effect: 'slide', // the Effect to use (slide, fade, show)
        effectTime: 300, // the effect duration in microseconds
        activeClass: 'active' //the class of the active link
      });
});
</script>
And you are set to go.

sbmenu_v2.0.0.zip

We will upload live demos soon on our website SBZsoft.com,
As well we have uploaded demo files to get you started.

For a quick start please download the HTML sbmenu Demo file from the downloads page,

Have fun.....

No comments:

Post a Comment