Menus are the doyen of many a site; we all need some form of navigation, but styling the navigation menus is very much left to the imagination of the site's designer.
We can even go further and add some useful effects to menus; we can at least animate the drop-down motion so that they glide in a little more gracefully. To do this, we're going to revisit an exercise from an earlier instance in the book—remember, back in Chapter 4, Working with Variables, Mixins, and Functions, where we created a simple web page using some Less functions? Well, we're going to add a menu to that page and when we're done, it will look something similar to this:
Okay, let's make a start:
For this exercise, we need a copy of the code download that accompanies this book; from it, extract a copy of
menus.html. This contains a copy of the code from Chapter 4, Working with Variables, Mixins, and Functions, with the additional markup for our menus and some cosmetic changes to import Less files...