Lavazi - Lava Lamp jQuery plugin v2.1

I launched Lavazi almost year back but later found some bugs and finally we have v2.1 with some improvements. Lavazi is a lava lamp navigation jQuery plugin. Lets see some improvements and working on it.

See the Pen Lavazi - Lava lamp jQuery navigation plugin by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Github

Working

Every time I write about Lavazi, I do share working. Its easy and simple.

<script src='js/lavazi.jquery.js' type='text/javascript'></script>
<link href='css/lavazi.css' rel='stylesheet' type='text/css'>

Include lavazi.jquery.js and lavazi.css in your markup.

Markup

Here is the markup for the navigation.

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Blog</a>
      <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>

Lavazi works perfectly with dropdown menus.

Trigger

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

Options and defaults

 $('nav>ul').lavazi({
     theme: "simple", // simple, rounded, arrow
     activeClass: "selected",
     background: "#222",
     transitionTime: 300,
     height: 4,
     mode: 'barBottom', // barBottom, barTop, belowBar, aboveBar
     easings: 'easeInOutBack' // See the easing values listed below
 });

Following are the values for the easings.

• easeInOutBack
• easeIn
• easeOut
• easeInOut
• easeInCubic
• easeOutCubic
• easeInOutCubic

At the end, I would like to credit easing.net for all the easing values.