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.


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.


Here is the markup for the navigation.
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Blog</a>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
        <li><a href='#'>Sublink</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Profile</a></li>
    <div style='clear:both'></div>
Lavazi works perfectly with dropdown menus.


$(document).ready(function () {

Options and defaults

     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 for all the easing values.

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.