Navegante

Take to the next step your site navigation right now!

Navegante is the most advanced CSS3 powered navigation system. Every navigation functionality is built taking advantage of the power and performance of CSS3 features. It’s just blazing fast!

Responsive and device-ready with a lot of options to customize it that can be easily be part of your projects.

Open and close submenus panels in style! Navegante makes use of CSS3 animations to toggle the visibility of the submenus, it has infinite possibilities! It comes with a set of animations ready-to-use and the possibility of use wherever CSS3 animation library you want.

Developed thinking in you, whether you are a professional developer or not. It’s completely written in javascript ES6 and exported as UMD (for advanced developers) and also compiled in plain Javascript to use it like a normal jQuery plugin (for standard developers).

Navegante also brings you an extensive documentation to make the most of its API.

Documentation | Examples | Support

These are a few of the multiple features of Navegante, so let’s continue reading and discover all of them!

NAVEGANTE FEATURES

• Amazing performance: All animations use the efficiency and speed of CSS3. Javascript files are smartly coded to boost performance.
• jQuery: Driven by jQuery as a dependency. Navegante is compiled as a jQuery plugin.
• Responsive: Fully tested and adapted to touch devices. Responsive styles and functionality adapted to devices.
• Themes: Combine the dark and light basic themes with the other 8 theme colors or directly use the color themes. View themes
• Built-in Animations: Navegante includes an extended list of pre-built CSS3 animations ready to use in your projects. View animations You can easily use your custom animations or use some animation library like animate.css!. Configure its enter & leave animation independently and the duration.
• Orientation: Choose between horizontal (default) and vertical orientations. Needed styles and functionalities are ready to make it work.
• Submenus: Control the type of submenu panel you want to use. Default panels, Mega panels (fullwidth) and individually controlled widths. Assign individually options to each submenu!
• Tabs: Built-in tabs module included to use inside of your submenu panels. Infinite nesting tabs levels. Control mouse events triggers between hover and click (also prepared to correctly work in devices).
• Individually: Make use of HTML data attributes to assign individually functionalities to each submenu. Update events, positions, aniimations and much more!
• Position: Choose the submenus positions globally just setting an option or assign it individually to each submenu. Multiple positions to choose: top, bottom, left, right, bottom-left, top-right…
• Mouse/Touch events: Switch between click and hover events to trigger the submenus. Turned into touch events when responsive.
• Multiple: Create multiple independent instances on the same page.
• Full CSS Control: Navegante comes with a multiple CSS state classes to allow you to control every nav state. View state classes
• UMD: Exported in Universal Module Definition. You can easily import it in many ways: jQuery plugin, AMD, CommonJS and Browser global (from window)
• Customizable: Fully customizable with a lot of options, themes, animations…
• API: It comes with a lot of methods, events and properties to make it full operative. View API
• Events: Built-in events bindings to listen to every important action. Choose between jQuery events or Vanilla Javascript events. Also, you can use callback methods in the options object.
• Documentation: Navegante is fully documented with explanations, code examples and interactive examples.
• ES6: Completely written in ECMAScript 2015 (ES6) and compiled in Vanilla Javascript.
• Light weight: Compiled and minimized is about only 29kb! Only 8kb gzipped!
• Content: You can set any HTML content inside the nav. Just put it inside and Navegante will take care of the rest. Learn how to insert content.
• Grid: Navegante brings you a built-in grid system to use together with the content.
• Links: Prevent some trigger nav buttons to be part of the nav and let them to be normal links easily.
• Crossbrowser: Supports for browsers from IE10 to IE Edge (dropped lower for unsupport by Windows), Google Chrome, Firefox, Opera, Safari and mobile browsers (automatically adapted for better performance). Fully tested on iOS, Android and Windows Phone.
• SCSS: Styles created using SASS preprocessor and compiled into CSS

PACKAGE SOURCES

ZIP file contains the following files and folders View more:

• Source, compiled and minified JS
• Source SCSS, compiled and minified CSS
• Documentation with multiple examples. View it online too

CREDITS

• jQuery
• Font Awesome
• Roboto font

CHANGELOG

Version 1.0.0

• Initial release