Simple Menu Tutorial

In this tutorial I am going to step through some very basic set up of creating your own drop down navigation using jQuery. The point of this tutorial is to show how it is done so that you can create a menu that suits your needs, rather than relying on often bloated plugins full of features you don’t need from other developers.

By the end you should be able to do the following:

  • Create a jQuery plugin
  • Give it a few options
  • Iterate over the selected elements
  • Find relevant child elements
  • Display and correctly position menus

To see my full functioning code, as used in this site, visit the Codex and see the Simple Menu page.

Learn How

Simple Menu

Simple Menu is a quick jQuery plugin which aims to be simple, minimally invasive, and provide non complicated, rudimentary functionality without bells and whistles. It is the very script used in this site to provide multilevel drop down menus.

Simple the options are the bare minimum necessary to adapt to the simplicity of needs, you may specify what type of trigger is used (click or hover) and specify callbacks to fire when displaying a menu or hiding a menu. That’s it. The rest of the styling is left up to you, however you decide to do it.

See the code