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 difference 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. Perform the following steps to create a fly-out menu:
In the
cssfolder of the Superfish download, you'll find a file namedsuperfish-vertical.css. Copy that file to your ownstylesfolder. In theheadsection of the HTML file, we'll attach the new CSS file, aftersuperfish.css, as shown in the following code:<link rel="stylesheet" href="styles/superfish.css"/> <link rel="stylesheet" href="styles/superfish-vertical.css"/>Now, inside your
index.htmlfile, find the<ul>element that holds the entire menu and add aclassofsf-vertical:<nav> <ul id="sfNav" class...