Let's get started!

Extract & Place

First of all, download the plugin zip file from Codecanyon and follow the following steps:

  1. Extract the files from the zip.

    You will find inside the zip the following structure:

    Navegante/
    ├── dist/
    │   ├── fonts
    │   │	└── font-awesome fonts
    │   │	└── navegante fonts
    │   ├── css
    │   │	└── navegante.css
    │   │	└── navegante.min.css
    │   │	└── navegante-themes.css
    │   │	└── navegante-themes.min.css
    │   │	└── navegante-animations.css
    │   │	└── navegante-animations.min.css
    │   │	└── navegante-grid.css
    │   │	└── navegante-grid.min.css
    │   │	└── font-awesome.min.css
    │   └── js
    │   	└── navegante.js
    │   	└── navegante.min.js
    │
    ├── src/
    │   ├── assets
    │   │	└── icons
    │   ├── fonts
    │   ├── scss
    │   └── js
    │
    └── documentation/
    
    

    As you can see, important files that you will use are inside of dist folder.

    We also include both src and documentation folders:

    • src Navegante source code. We have used SCSS to generate the styles. About scripts, we have developed the plugin using the modern Javascript syntax ES6 and transpiling a compilating with Webpack. Know more about source
    • documentation Navegante offline documentation. You can navigate locally through all documentation if you are not connected to the Internet. Know more about documentation
  2. Place navegante.min.css in your/cssproject folder.

  3. Place navegante.min.js in your/jsproject folder.

    You have to always load jQuery library before navegante.min.js.

Install

Dependencies

  • First include navegante.min.css css file inside <head> tag
  • Then include jquery js library right before the closing </body>
  • And finally include navegante.min.js js file right after jquery script tag

If you want to use built-in themes, you will need to place /fonts at the root of your project.
This is a must to let navegante.css to find out these font files.

Usage

  • Be sure you call the plugin right after the document is ready.
  • Use the plugin as Vanilla Javascript or as a jQuery plugin
  • Assign groups, triggers and targets in the options object
    • Firstly, Navegante will search the groups as its immediate children.
      It's very important to note that the group must be an immediate child of the root or (when nesting) the target.
    • Inside of the group both trigger & target must be an immediate child of it group.
    • You can assign them as string CSS selector or jQuery element
  • To know more check the examples and the API

Activating

Basic HTML code

This is the default HTML code you must insert into you HTML structure within <body></body>tags.

If you use this HTML structure, Navegante will be activated automatically.

You can use any HTML markup to make the nav but be sure you respect the minimum requeriments:

  • Every section inside the nav must be a group
  • Triggers and targets have to be immediate children of its group.

Initialize in HTML

Also, you can initialize Navegante in HTML, without writing any Javascript.
Add data-navegante attribute to the root element and set the options in it value in JSON format

Take a look to the options.

Javascript

Of course, you can initialize Navegante using jQuery or vanilla Javascript.

The implementation is very straight-forward, just assign a selector to your root nav element and pass (optionally) the options as an object to the plugin. Just the traditional way to use a plugin.

Don't forget to always call the plugin when the DOM is ready to use! $(document).ready()

You can use any HTML markup to make the nav but be sure you respect the minimum requeriments:

  • Every section inside the nav must be a group
  • Triggers and targets have to be immediate children of its group.

Documentation

We have includeddocumentation/folder, where you will find all required files to display the documentation offline (locally).

This could be very useful to you if you are disconnected of the Internet and need to use it.

Just grab this folder and paste it wherever you want and access to it through the URL from your browser.
For better performance use it in Google Chrome ;)

Source

Finally, you will find thesrc/folder.

In this folder there are the plugin source files:

  • assets

    Contains used svg icons in themes. When deploying the plugin, they will be transformed into a font.
    you'll find them withindist/fonts/folder. Also, we included theassets/folder indist/assets/

  • fonts

    Contains a folder with the Font Awesome fonts files.

  • scss

    Contains all SCSS files used to create the basic plugin styles, themes and animations.
    They are compiled into css files and you'll find them withindist/css/folder

  • js

    Contains all javascript files to create the plugin functionality.
    All js code are written using ECMAScript 2015 (commonly called ES6). This is the modern and consolidated way to code Javascript.
    They are compiled into normal Javascript files and you'll find them withindist/js/folder