jQuery Plugin for Creating a Navigation Menu with Sliding Lines

sMagicline is a simple and lightweight jQuery plugin that allows you create a navigation menu with animated sliding lines. Just Enjoy It!

How to use it:

1.  Include both jQuery library and sMagicline before </head> section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/my.magicline.1.0.min.js"></script>

2. Create a nav menu with a class of 'mainnav'

<ul class="mainnav">
<li><a title="" href="https://www.jqueryscript.net/">Home</a></li>
<li><a title="" href="https://www.jqueryscript.net/jquery-plugins/" class="active">Lastest jQuery Plugins</a></li>
<li><a title="" href="https://www.jqueryscript.net/popular/">Top jQuery PLugins</a></li>
<li><a title="" href="https://www.jqueryscript.net/recommended/">Recommended</a></li>
<li><a title="" href="/gebietsabdeckung">Download This Plugin</a></li>
<li><a title="" href="https://www.jqueryscript.net/about/">About US</a></li>
</ul>

3. Call the plugin

<script type="text/javascript">
     $(document).ready(function() {
           $(".mainnav").my_magicline();
     });
</script>

4. The CSS

ul.mainnav li a#magic-line {
    background: url("../images/mainnav_active.png") repeat-x scroll left top transparent;
    color: #D50100;
    height: 50px;
    left: 0;
    list-style: none outside none;
    opacity: 0.4;
    position: absolute;
    top: 0;
    z-index: -1;
}

---

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