Below is a simple navigation menu that I do, because is a novice, unavoidably has what wrong place, hoped everybody pats the brick!
All right, let's get to the point:
1. Define CSS style sheets first:
Copy Code code as follows:
<style type= "Text/css" >
BODY{FONT-SIZE:13PX}
ul,li{list-style-type:none;padding:0px;margin:0px}
. menu{width:190px;border:solid 1px #E5D1A1; Background-color: #FFFDD2}
. optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
. Content{padding-top:10px;clear:left}
A{text-decoration:none;color: #666;p adding:10px}
. Optnfocus{background-color: #fff; Font-weight:bold}
div{padding:10px}
Div img{float:left;padding-right:6px}
Span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
. tip{width:190px;border:solid 2px #ffa200;p osition:absolute;padding:10px;
Background-color: #fff;d Isplay:none}
. Tip li{line-height:23px;}
#sort {Position:absolute;display:none}
</style>
2. Citing the jquery framework, you can go to the official web to download the latest jquery, as if the JQUERY1.5 version has been released, link address: http://jquery.com/
3. Define HTML Tags:
Copy Code code as follows:
<ul>
<li class= "Menu" >
<div>
<span> Computer Digital Products </span>
</div>
<ul class= "Content" >
<li class= "OPTN" ><a href= "#" > Notebook </a></li>
<ul class= "Tip" >
<li><a href= "#" > Notebook 1</a></li>
<li><a href= "#" > Notebook 2</a></li>
<li><a href= "#" > Notebook 3</a></li>
<li><a href= "#" > Notebook 4</a></li>
<li><a href= "#" > Notebook 5</a></li>
</ul>
<li class= "OPTN" ><a href= "#" > Mobile HDD </a></li>
<ul class= "Tip" >
<li><a href= "#" > Mobile HDD 1</a></li>
<li><a href= "#" > Mobile HDD 2</a></li>
<li><a href= "#" > Mobile HDD 3</a></li>
<li><a href= "#" > Mobile HDD 4</a></li>
<li><a href= "#" > Mobile HDD 5</a></li>
</ul>
<li class= "OPTN" ><a href= "#" > Computer software </a></li>
<ul class= "Tip" >
<li><a href= "#" > Computer software 1</a></li>
<li><a href= "#" > Computer software 2</a></li>
<li><a href= "#" > Computer software 3</a></li>
<li><a href= "#" > Computer software 4</a></li>
<li><a href= "#" > Computer software 5</a></li>
</ul>
<li class= "OPTN" ><a href= "#" > Digital Products </a></li>
<ul class= "Tip" >
<li><a href= "#" > Digital Products 1</a></li>
<li><a href= "#" > Digital Products 2</a></li>
<li><a href= "#" > Digital Products 3</a></li>
<li><a href= "#" > Digital Products 4</a></li>
<li><a href= "#" > Digital Products 5</a></li>
</ul>
</ul>
</li>
</ul>
4. The next step is to define the most important jquery code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
var Cury; Gets the top value of the selected item
var Curh; Gets the height value of the selected item
var curw; Gets the width value of the selected item
var Srty; Set top value for tip arrows
var Srtx; Set the left value of the hint arrow
var Objl; Get current Object
/*
* Set the current position value
* Parameter obj is the current object name
*/
function Setinitvalue (obj) {
Cury = Obj.offset (). Top
Curh = Obj.height ();
CURW = Obj.width ();
Srty = Cury + (CURH/2) + "px"; Set top value for tip arrows
Srtx = curW-5 + "px"; Set the left value of the hint arrow
}
$ (". Optn"). MouseOver (function () {//Set the mouse-over event for the currently selected item
OBJL = $ (this); Get current Object
Setinitvalue (OBJL); Set Current position
var AllY = Cury-curh + "px"; Set the top value of a prompt box
Objl.addclass ("Optnfocus"); Increase the style when getting focus
Objl.next ("ul"). Show (). CSS ({' Top ': AllY, Left: CURW})//display and set the coordinates of the cue box
$ ("#sort"). Show (). CSS ({' Top ': Srty, Left: Srtx}); Display and set the coordinates of the hint arrows
})
. mouseout (function () {//Set the current selected mouse out event
$ (this). Removeclass ("Optnfocus"); Delete the style when you get focus
$ (this). Next ("ul"). Hide (); Hide Cue Boxes
$ ("#sort"). Hide (); Hide hint arrows
})
$ (". Tip"). MouseMove (function () {
$ (this). Show (); Show Prompt Box
OBJL = $ (this). Prev ("Li"); Get the current ancestor Li Object
Setinitvalue (OBJL); Set Current position
Objl.addclass ("Optnfocus"); Increase the style of the parent Li object when it gets focus
$ ("#sort"). Show (). CSS ({' Top ': Srty, Left: Srtx}); Display and set the coordinates of the hint arrows
})
. mouseout (function () {
$ (this). Hide (); Hide Cue Boxes
$ (this). Prev ("Li"). Removeclass ("Optnfocus"); Delete the style when you get focus
$ ("#sort"). Hide (); Hide hint arrows
})
})
</script>
5. Well, it's done.
The effect of the operation is as follows:
