Blogger Ever

Lavazi - Lava Lamp jQuery plugin v2.1

An update for the lava lamp plugin

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.

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.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.