Lava-Lamp is a JavaScript plug-in for menus animation. Creates a div element that moves when the mouse hovers over an element, giving it flexible movement.
menu dropdown hover effects, navigation menu hover effects css, drop down menu in html on mouseover, responsive drop down menu with submenu, onclick dropdown menu example
How to make use of it:
1. Download the package deal and embrace the next JavaScript & CSS files on the web page.
<link rel="stylesheet" href="build/css/lavalamp.css" /> <script src="build/js/lavalamp.js"></script>
2. Attach the Lava-Lamp to your nav listing and complete.
<ul id="example" class="navlist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Web</a></li> <li><a href="#">Code</a></li> <li><a href="#">Flow</a></li> <li><a href="#">Example</a></li> </ul>
const myNavList = document.getElementById("example"); const lavalampExample = new Lavalamp(myNavList);
3. Customize the Lava Lamp hover impact within the CSS.
.lavalamp__object { box-shadow: 0 0 5px 0 #999 inset; }
4. Set the length of the animation.
const lavalampExample = new Lavalamp(myNavList,{ duration: 700 });
5. Determine whether or not to allow margins.
const lavalampExample = new Lavalamp(myNavList,{ margins: true });
6. Determine whether or not the lavalamp strikes with click on as an alternative to hover.
const lavalampExample = new Lavalamp(myNavList,{ enableHover: false });
7. Specify the time to attend earlier than triggering the impact.
const lavalampExample = new Lavalamp(myNavList,{ delayOn: 100, delayOff: 220, });
8. Apply an easing function to the effect.
const lavalampExample = new Lavalamp(myNavList,{ easing: 'linear' });
9. More default choices.
const lavalampExample = new Lavalamp(myNavList,{ // set the new active element on click setOnClick: false, // CSS selector for the active element initActiveQuery: '.active', // animate on element focus enableFocus: false, // Animate on descendant focus deepFocus: false });
Interactive Hover Effect For Nav List, Lava-Lamp Plugin/Github, menu and submenu in html examples
See Demo And Download
Official Website(Richard1320): Click Here
This superior jQuery/javascript plugin is developed by Richard1320. For extra Advanced Usages, please go to the official website.
Be First to Comment