Example / Vertical

The result:

The code:

To create an all-vertical menu, simply add the class sf-vertical to the parent ul along with the usual sf-menu class (space-separated, eg. className="sf-menu sf-vertical"), and initialise as normal. For this example I will also demonstrate altering some of the options in order to create a slide-down animation and a longer delay on mouseout:

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="superfish.css">
<link rel="stylesheet" media="screen" href="superfish-vertical.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

<!-- initialise Superfish -->
<script>
	jQuery(document).ready(function(){
		jQuery('ul.sf-menu').superfish({
			animation: {height:'show'},	// slide-down effect without fade-in
			delay:		 1200			// 1.2 second delay on mouseout
		});
	});
</script>

Need help? Check out the Support options available to you.