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.
In the
css
folder of the Superfish download, you'll find a file namedsuperfish-vertical.css
. Copy that file to your ownstyles
folder. In thehead
section of the HTML file, we'll attach the new CSS file. Betweensuperfish.css
andstyles.css
, add the new CSS file:<link rel="stylesheet" href="styles/superfish.css"/> <link rel="stylesheet" href="styles/superfish-vertical.css"/> <link rel="stylesheet" href="styles/styles.css"/>
Now, in the HTML we'll add an
sf-vertical
class to the list that contains our menu.<ul id="sfNav" class="sf-menu sf-vertical">
Now when you refresh...