Learning Less.js

Creating animated menus

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:

1. For this exercise, we need a copy of the code download that ...