jQuery Plugin To Create Sliding Underlines For Any Elements - Slida

File Size: 3.87 KB
Views Total: 756
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Sliding Underlines For Any Elements - Slida

Slida is a jQuery plugin which allows you to create customizable, sliding underlines for any DOM elements such as a links. 

How to use it:

1. Add both jQuery library and the jQuery slida plugin's script to your html pages.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.slida.js"></script>

2. Call the function on the container where all the child elements will get a sliding underline when clicked.

slida({
  lineContainer: $('.container')
});

3. Customize the underline with the following options.

slida({

  // color for the underline
  backgroundColor: '#fff',

  // height in pixels
  height: 3,

  // animation speed
  animationSpeed: 300,

  // bottom padding in pixels
  paddingBottom: 10,

  // target container
  lineContainer: $('.container')
  
});

This awesome jQuery plugin is developed by sergonius. For more Advanced Usages, please check the demo page or visit the official website.