Jquery Line Menu

User Rating: / 0
PoorBest 

In this example I will show you a tutorial which hope it will help you much in creating web sites with design very modern. It has a menu that walks a thin line after the mouse! It is made with HTML, Jquery and CSS. This example can also be downloadable!

In this example I will show you a tutorial which hope it will help you much in creating web sites with design very modern. It has a menu that walks a thin line after the mouse! It is made with HTML, Jquery and CSS. This example can also be download!

Begin with HTML, HEAD section:

Attention, this section links the HTML with CSS and scripts, if you change the name of the folders or name files your menu will not work.

    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='js/jquery.color-RGBa-patch.js'></script>
    <script type='text/javascript' src='js/example.js'></script>

Now after i finished with links between HTML and CSS and Jquery  create the html buttons:

<div class="nav-wrap">

        <ul class="group" id="example-one">
            <li class="current_page_item"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Contact</a></li>
           
        </ul>
       
</div>

 The CSS file must like this:

* {
margin: 0;
padding: 0;
}
body {
font: 14px Arial, serif;
background:url(../bg.png) top center repeat #000010;
color: #eee;
}

.nav-wrap {
margin: 50px auto; 
background-color: rgba(0,0,0,0.6);
}

.group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " "; clear: both;
height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one {
margin:50px 0 0 50px;
list-style: none;
position: relative;
width: 960px;
float:left;
}

#example-one li {
display: inline;
}
#example-one li a {
color: #bbb; font-size: 14px;
display: block;
float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
outline:none;
}

#example-one li a:hover {
color:#357AB7;
outline:none;
}

#magic-line {
position: absolute;
bottom: -2px;
left: 0; width: 100px;
height: 2px;
background: #357AB7; }
 

The last step is to Download the scripts which includes all you need!