Lavazi - Lava Lamp Navigation jQuery Plugin

A day before I posted on social media about Lavazi, actually it is a pretty cool jQuery plugin that magically transforms your normal navigation to lava lamp navigation. It allows several option to admin and provides easy access to lava lamp.

March 3, 2015Get a better version of Lavazi (v1.1) here

Well, first let me tell you that this plugin is quite small, means never take time to load. The plugin JS is only 2.24KB that makes it weightless. Beside that it performs great with every navigation.

Find On Github

 Demo

See the Pen MYEYoR by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Setup the plugin

To setup the plugin you just have to make sure that the navigation menu is under <ul> tag and the links under it are in <li> tags.

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Blog</a>
<!-- DropDown Menu -->
      <ul>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
      </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Profile</a></li>
    <div style='clear:both'></div>
  </ul>
</nav>

No matter your navigation is normal or dropdown, it will work perfectly with every navigation menu.

Trigger

To trigger plugin, use DOM ready function so that it works perfectly. The selector would be the <ul> tag of navigation.

$(document).ready(function() {
    $('nav>ul').lavazi();
});

I found that sometimes the fonts and other resources are loaded a bit late due to which it could effect lava lamp position, but not to worry about that, this plugin will be reset after page load.

Options

Below listed are the options or settings available for this plugin with their default values.

activeClass [default:selected] : This is one of the important option of the plugin. This option selects the position of the lamp for specific link. If you are at contact page then that link on navigation must have some class to distinguish from other links.

The link with active class will have the lamp below it. If none of the link will have the class then lamp will stay below the first class.

background[default:#222]: This option refers to the color of the lamp. It could be a HEX code, RGB or simply a color name for example red.

theme [default:simple]: This option sets the theme of the lava lamp, you have three options for that: simple, rounded, arrow.

transitionTime [default:300]: This is the transition time of the lava lamp movement. 1 unit equals to 1 millisecond. Default is 300 milliseconds means 0.3 seconds.

Destroy

 To remove the lamp from the navigation, use just a simple CSS for that.

nav .lavazi_lamp{
display:none;
}

Final Thoughts

This is my first jQuery plugin and coded with best practices, but still if you find something wrong, email me hamzadhamiya@bloggerever.com or mention @hamzadhamiya on Twitter.

Find On Github