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:
Copy to ClipboardReference: [www.bkjia.com] <div id = "sidebar">
<Ul>
<Li> <a href = "index.html" class = "normalMenu"> Home </a> </li>
<Li> <a href = "services.html" class = "normalMenu"> Services </a> </li>
<Li> <a href = "faq.html" class = "normalMenu"> FAQ </a> </li>
<Li> <a href = "testimonials.html" class = "selectedMenu"> Testimonials </a> </li>
<Li> <a href = "about.html" class = "normalMenu"> About Alpacas </a> </li>
<Li> <a href = "contact.html" class = "normalMenu"> Contact Us </a> </li>
</Ul>
</Div>
(2): JQuery
Copy to ClipboardReference: [www.bkjia.com] $ (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:
Copy to ClipboardReference: [www.bkjia.com]/* 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)