A JavaScript Animation Plugin For Menus Mouse Hover Effect | Lava-Lamp

Lava-Lamp is a JavaScript plug-in for menu animation. Creates a div element that moves when the mouse hovers over an element, giving it flexible movement.

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

<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 Usage, please go to the official website.

Share