Press "Enter" to skip to content

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

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *