mehedidb/Magic-line

A jQuery plugin for your menu

Magic Line, a jQuery plugin for your menu?

MagicLine is a jQuery plugin that append a div to your menu, following the user's hover.

Getting started

All you need is a simple html structure :

<ul>
    <li id="yourNavbar" class="active"><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
</ul>

Add this line to your css

#magic-line{ width: 100px; height: 6px; position: absolute; bottom: 0px; left: 0;  background: #000;}

Then you need a recent version of jQuery and the following initialization :

<script src="/magic-line.js'"></script>

<script>
$(document).ready(function() {
    $('#yourNavbar').magicLine();
});

</script>