Navegante (Navigation)

Take to the subsequent step your web page navigation suitable now!

Navegante is the most sophisticated CSS3 powered navigation method. Every single navigation functionality is constructed taking benefit of the energy and functionality of CSS3 characteristics. It&#8217s just blazing quickly!

Responsive and device-prepared with a lot of possibilities to customize it that can be quickly be component of your projects.

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

Created considering in you, whether or not you are a qualified developer or not. It&#8217s totally written in javascript ES6 and exported as UMD (for sophisticated developers) and also compiled in plain Javascript to use it like a typical jQuery plugin (for typical developers).

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

Documentation | Examples | Support

These are a couple of of the various characteristics of Navegante, so let&#8217s continue reading and learn all of them!

NAVEGANTE Characteristics

  • Incredible functionality: All animations use the efficiency and speed of CSS3. Javascript files are smartly coded to increase functionality.
  • jQuery: Driven by jQuery as a dependency. Navegante is compiled as a jQuery plugin.
  • Responsive: Totally tested and adapted to touch devices. Responsive types and functionality adapted to devices.
  • Themes: Combine the dark and light fundamental themes with the other eight theme colors or straight use the colour themes. View themes
  • Constructed-in Animations: Navegante contains an extended list of pre-constructed CSS3 animations prepared to use in your projects. View animations
    You can quickly use your custom animations or use some animation library like animate.css!.
    Configure its enter &#038 leave animation independently and the duration.
  • Orientation: Decide on among horizontal (default) and vertical orientations. Required types and functionalities are prepared to make it operate.
  • Submenus: Handle the variety of submenu panel you want to use. Default panels, Mega panels (fullwidth) and individually controlled widths. Assign individually possibilities to every single submenu!
  • Tabs: Constructed-in tabs module incorporated to use inside of your submenu panels. Infinite nesting tabs levels. Handle mouse events triggers among hover and click (also ready to properly operate in devices).
  • Individually: Make use of HTML information attributes to assign individually functionalities to every single submenu. Update events, positions, aniimations and a great deal additional!
  • Position: Decide on the submenus positions globally just setting an choice or assign it individually to every single submenu. A number of positions to select: best, bottom, left, suitable, bottom-left, best-suitable&#8230
  • Mouse/Touch events: Switch among click and hover events to trigger the submenus. Turned into touch events when responsive.
  • A number of: Produce various independent situations on the exact same web page.
  • Complete CSS Handle: Navegante comes with a various CSS state classes to permit you to handle each nav state. View state classes
  • UMD: Exported in Universal Module Definition. You can quickly import it in quite a few strategies: jQuery plugin, AMD, CommonJS and Browser international (from window)
  • Customizable: Totally customizable with a lot of possibilities, themes, animations&#8230
  • API: It comes with a lot of approaches, events and properties to make it complete operative. View API
  • Events: Constructed-in events bindings to listen to each vital action. Decide on among jQuery events or Vanilla Javascript events. Also, you can use callback approaches in the possibilities object.
  • Documentation: Navegante is completely documented with explanations, code examples and interactive examples.
  • ES6: Fully written in ECMAScript 2015 (ES6) and compiled in Vanilla Javascript.
  • Light weight: Compiled and minimized is about only 29kb! Only 8kb gzipped!
  • Content material: You can set any HTML content material inside the nav. Just place it inside and Navegante will take care of the rest. Learn how to insert content.
  • Grid: Navegante brings you a constructed-in grid method to use with each other with the content material.
  • Hyperlinks: Avert some trigger nav buttons to be component of the nav and let them to be typical hyperlinks quickly.
  • Crossbrowser: Supports for browsers from IE10 to IE Edge (dropped decrease for unsupport by Windows), Google Chrome, Firefox, Opera, Safari and mobile browsers (automatically adapted for far better functionality). Totally tested on iOS, Android and Windows Telephone.
  • SCSS: Types produced employing SASS preprocessor and compiled into CSS

PACKAGE SOURCES

ZIP file consists of the following files and folders View more:

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

CREDITS

CHANGELOG

Version 1..

  • Initial release