Personalized navigation menu written by JQuery _ jquery

Whether the visitor is interested in the website or not, the first impression of the first 20 seconds is crucial, so our design must meet the expectations of the public. Next we will design a personalized navigation menu. (1): XHTML:

The Code is as follows:

• Home


• Services


• FAQ


• Testimonials


• About Alpacas


• Contact Us

(2): JQuery

The Code is as follows:

$ (Document). ready (function (){
$ ('# NavigationMenu li. normalMenu'). each (function (){
// Create a duplicate hyperlink and position it abve the current one
$ (This). before ($ (this). clone (). removeClass (). addClass ('hopmenu '));
});
$ ('# NavigationMenu li'). hover (function (){
// We assign an action on mouse over
$ (This). find ('. hoverMenu'). stop (). animate ({marginTop: '0px '}, 200 );
// The animate method provides countless possibilities
},
Function (){
// And an action on mouse out
$ (This). find ('. hoverMenu'). stop (). animate ({marginTop: '-25px'}, 200 );
});
});

(3) CSS

The Code is as follows:

/* Page styles */
Body, h1, h2, h3, p, td, quote, small, form, input, ul, li, ol, label {
Margin: 0px;
Padding: 0px;
}
Body {
Margin-top: 20px;
Font-family: Arial, Helvetica, sans-serif;
Color: # 51555C;
Height: 100%;
Font-size: 12px;
}
/* Navigation menu styles */
Ul {
Height: 25px;
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
}
Ul li {
Border: 1px solid #444444;
Display: inline-block;
Float: left;
Height: 25px;
List-style-type: none;
Overflow: hidden;
}
Ul li a, ul li a: hover,
Ul li a: visited {
Text-decoration: none;
}
. NormalMenu,. normalMenu: visited,
. HoverMenu,. hoverMenu: visited,
. SelectedMenu,. selectedMenu: visited {
Outline: none;
Padding: 5px 10px;
Display: block;
}
. HoverMenu,. hoverMenu: visited,
. SelectedMenu,. selectedMenu: visited {
Margin-top:-25px;
Background: url (img/grey_bg.gif) repeat-x # eeeeee;
Color: #444444;
}
. SelectedMenu,. selectedMenu: visited {
Margin: 0;
}
. NormalMenu,. normalMenu: visited {
Color: white;
Background: url (img/dark_bg.gif) repeat-x #444444;
}

(4)