jQuery for Designers Beginner's Guide

Time for action – creating a vertical fly-out menu

Switching from a horizontal drop-down menu to a vertical fly-out menu couldn't be easier. We'll use the same HTML markup and our JavaScript code will stay the same. The only change we'll need to make is to add some new CSS to make our menu display vertically instead of horizontally. We can keep working with the same files we used in the last example.

1. In the css folder of the Superfish download, you'll find a file named superfish-vertical.css. Copy that file to your own styles folder. In the head section of the HTML file, we'll attach the new CSS file. Between superfish.css and styles.css, add the new CSS file:

   <link rel="stylesheet" href="styles/superfish.css"/> <link rel="stylesheet" href="styles/superfish-vertical.css"/> ...