navIgo - Multipurpose Responsive Navigation Plugin

One can truly say this is really the ultimate navigation tool!

In Italian language “navigo” means “to browse”, so I think the name is perfect…

With 65 jQuery plugin parameters there are thousands of customization options… literally!

In addition, any plugin parameter can be overwritten directly from each menu <ul> data-attributes.

All menus on this page are initialized with the same jQuery plugin settings, all the differences you see between the menus are managed through data-attributes.

Look at this! Some of these features are pretty unique:

Code:

  • Valid XHTML / CSS 3 markup
  • Cross Browser Support (IE9 – Firefox – Chrome – Opera – Safari) + browser fallback message for IE9 below cases
  • 66 plugin parameters: you can control almost anything, and easy!
  • Multiple menus on one page: and you can control almost anything for each menu, easy!
  • Button mouseover or click behavior: you can select button interaction (it reflects in responsive mode too!)
  • Optional “stayopen” class: useful for dropdown contained forms, videos… It avoids dropdown disappearing on mouseout
  • Smart options management: each plugin parameter can be overwritten by an equivalent data attribute inside the <ul> tag of each menu, in this way you can set overall rules for all navbars on the website, but you can customize each menu simply adding attributes in the markup!
  • Super simple markup: if you take a look of the ul tags markup you will see a very easy element structure!
    Main containers are the <li> tags and they can contain almost anything!
    Each <li> tag can be setted in height and width with both pixel or percent values

Style:

  • Horizontal or vertical orientation
  • Support for fullwidth dropdowns: any complex layout allowed, text blocks, video, tables, typograpy pictures
  • Main buttons auto-width function: main level buttons with the same width filling the overall navbar width
  • Easy skin control: set button colors, mouseover colors, text, shadows, alpha transparence directly with plugin parameters
  • Multiple Google font support: you can set font type and size for Main buttons, sub buttons /titles, subtitles and text
  • Auto active-button state: based on url address but it works even for # links (useful for ajax loaded pages)
  • Nice Form elements styling, can manage even complex forms layouts with many fields.
  • Nice predefined shadow styles: simply set via plugin parameters
  • Smooth CSS3 transitions
  • Alpha or slide jQuery FX for menu dropdown levels
  • ZoomIn / ZoomOut / Slide Up picture based buttons
  • Nested buttons inside one <li> : you can manage pseudo tabular layouts
  • Useful css class based element override: you can override buttons or dropdowns style simply adding classes. Adding class in the markup to set one single element or via jquery parameters to affect entire navbar.
  • Useful color inheritance system: you can set color class for a main level button and enable or disable style inheritance, to transmit color to its submenus, and even to the dropdown bg.
  • Useful Fontello based icon support
  • 25 predefined colors: ready to use color classes inspired from metro colors

Responsiveness:

  • Programmable responsive behavior: you can set the limit screen resolution for responsive mediaquery activation.
  • Programmable responsive li tags full width: you can set the limit screen resolution for expand each li tag to 100% width.
  • Special responsive button mouseover mode: if button has a dropdown, each following button disappear on mouseover, only dropdown will be shown.
  • Mobile custom resize class:you can set any element specific mobile size with “mobile-w-..pc” class (two digit percent instead dots)orientation
  • Responsive toggle-menu button: you can enable or disable a menu wrapper with show/hide automatic button.

Changelog

20 March 13 – Version 1.1

  • Fixed linking bug for “onClick” behavior

15 March 13 – Version 1.1

  • Added onclick button behavior
  • Added tab mode (menu can be used as a tabbed interface)
  • Added “stayopen” mode (useful for dropdown contained forms, videos… It avoids dropdown disappear on mouseout)
  • Added example pages for new features
  • Little IE10 detection bug solved
  • Some CSS improvements
  • Some JS improvements
  • Minor bugs solved

10 March 13 – Version 1.0

  • Approved by CC team :)... Ok, let’s start selling!
by
by
by
by
by
by