Time for action – creating a horizontal drop-down menu

Let's take a look at how we can use the Superfish plugin to create a horizontal drop-down menu:

  1. To get started, we'll create a simple HTML page and the associated folders and files like we created in Chapter 1, Designer, Meet jQuery. The body of our HTML file will contain a navigation menu that consists of nested unordered lists as follows:
    <ul id="sfNav" class="sf-menu"> <li><a href="#">Papilionidae</a> <ul> <li><a href="#">Common Yellow Swallowtail</a></li> <li><a href="#">Spicebush Swallowtail</a></li> <li><a href="#">Lime Butterfly</a></li> <li><a href="#">Ornithoptera</a> <ul> <li><a href="#">Queen Victoria's Birdwing</a></li> <li><a href="#">Wallace's Golden Birdwing</a></li> <li><a href="#">Cape ...

Get jQuery for Designers Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial