How to create dynamic tabs with lava lamp effect using Jquery?

Tutorial on dynamic tabs has been given before by me,however the tutorial have some basic instructions related to tabs.This post will give you the idea about the implementation of lava lamp in dynamic tabs.Have a look on demo:

See the Pen Multiple tabs w/ lava lamp by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Description

The things working behind is the calculation of the movement of lamp on click.Actually,it work under simple method of adding and removing classes.When a lava lamp have a specific class then it will move accordingly.

Firstly,a class that is content1 is added in the lamp on which CSS is applied that is left at 0px.As the lava lamp is at position absolute,it means the height of the button will set the value of top attribute.Secondly,when a button is clicked then the class is removed and a new class of the clicked button is added which gives the lamp the magnitude or value of left;according to which it moves.

Read More:How to make a sliding panel in responsive design using Jquery mobile and Jquery plugin?

Limitations

The limitations behind this idea are:

• The width of the lamp have to set according to the number of buttons that is 100 divide by the number of buttons and the product will be the width of lamp.
• Each class of button will have different style with lamp to set the value that how much will it move.

Beside these limitations,this lava lamp gives a new look and no doubt user will click again and again.Want to add something,comments are open.