by HTML5 & CSS3, Javascript, jQuery

Flexible jQuery Plugin For Stylish Navigation

Flexible Nav is a jQuery plugin that can add stylish navigation bar  on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article and any web page.

It analyzes the heading tags of the page and displays them on the right side of the page as links by proportionally keeping the distances between each item.

Each link gets users to the related items and, as the user scrolls, the navigation keeps showing “on which part of the page you are”.

jquery-stylish-navigation

Generation and Flexibility

The library can generate for you the nav sidebar content providing elements to display in navigation.

By default, it uses h1 to h3 elements to retrieve and locate the different sections of a document but you can override these elements selector.

You have usually two kind of selected elements to use:

  • Select a title. The link will take the title as text.
  • Select any container and add a data-navtext attribute to define the title you want.

Example: <div id="demo" data-navtext="Demo of the game">...

  • Simple usage used in this page
    var nav = new FlexibleNavMaker().make().prependTo('body'); new FlexibleNav(nav); 
  • Selecting element you want
    new FlexibleNavMaker(".navtitle"); 

Using this code bellow, all nodes having this navtitle class will appear in the flexible nav panel.

Flexibility only

You can also create your own nav links to have more controls of used links. Conventionnally, you need to use a <nav /> element with a flexible-nav class and <a href="#myidtarget" /> kind of elements for links.

  • Add flexibility to an existing nav
    new FlexibleNav($('#myNav')); 

(replace myNav by you nav id)

The plugin is specially handy for web pages that are updated frequently in a given structure as there will be no need to update the navigation each time.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://demo.greweb.fr/flexible-nav/
Download: https://github.com/gre/flexible-nav

Advertisements
Author:
We hope, We will become the best, creative and inspiring community for web and graphics. Join Us! Can be part of the growing Team. Just write something Creative and Interesting. Click here to become a member.

Comments

Comments Closed
Copyright © 2023 Web Design, Free Fonts, Photoshop, WordPress Themes, Logos & Tutorials. All Rights Reserved.
Powered by Wordpress.
About Us | Advertise | Write For Us | Contact Us
4 Shares
Tweet
Share
Share
Pin