Archive for the ‘Menu & Navigation’ Category

If you have a web application where users need to know few tricks before using it, guiding them in the beginning would be a good idea.

Codrops is sharing a very nice jQuery script that makes creating a chic site tour so easy.

jQuery Site Tour

It works by adding classes (with a specific format) to the elements to be highlighted and configuring them to display any custom text.

The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order.

Tooltips displaying the information can also be customized as color, position and the duration they will be active.

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.

Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).

jMenu

The markup of the menu is pretty clean as it makes use of nested lists.

The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

P.S. The resource page is in French (Google-translated version), however, demos and the JavaScript code is commented in English.

CSS3 Menu is a free application for creating navigations using the CSS3 properties and no JavaScript.

The application has both Windows + Mac versions and it is possible to set the styles of the outputs easily.

CSS3 Menu

Menus are generated in a HTML list structure, can be vertical or horizontal and have multiple sub-menus.

Also, it can display the previews of the navigations on every step which is a nice feature that speeds up the development.

We know that using CSS sprites has a very positive effect on website speed by decreasing the amount of HTTP requests.

Nav-o-Matic is a free online service which makes generating navigation sprites easier.

It simply asks you to upload the image of the navigation which has 2 rows (for normal and hover states, like this one), add your guides, define the CSS/image folders and you're done.

Nav-o-Matic

jStackMenu is a jQuery UI widget which transforms the children of any element into a beautiful stack menu.

The menu opens with a smooth animation and it is possible to control:

  • when it opens and closes
  • the direction it opens
  • the size of the arc
  • the time it takes to open

In order customize it more, it also has support for events.

The widget uses CSS transforms for creating the arcing and for browsers that doesn't support the feature, it displays the menu as a straight line.

jQuery Stack Menu