Tuesday, November 27, 2012

Design horizontal and vertical dropdown menu using superfish



Designing  a drop down menu may take a few hours. Using Superfish library, you can save a lot of time in drop down menu design.
Superfish library can be downloaded from:
http://users.tpg.com.au/j_birch/plugins/superfish/
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down men. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behavior for the mouseovers
To use Superfish is quite simple:
<script type="text/javascript" src="superfish.js"></script>
 <script> 
 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 
 
</script>

Demo for Superfish horizontal drop down menu:
Demo for Superfish vertical drop down menu:
You only need to change the following from horizontal menu:
<link rel="stylesheet" media="screen" href="css/superfish-vertical.css" />
At the beginning of menu list in HTML code, change
<ul class="sf-menu ">
to
<ul class="sf-menu  sf-vertical">
 

No comments:

Post a Comment