Simple list navigation menu based on jQuery

The following is a simple navigation menu that I made. As a newbie, there is something wrong with it!

Now let's get started:

1. First define the CSS style sheet:Copy codeThe Code is as follows: <style type = "text/css">
Body {font-size: 13px}
Ul, li {list-style-type: none; padding: 0px; margin: 0px}
. Menu {width: pixel PX; border: solid 1px # E5D1A1; background-color: # FFFDD2}
. Optn {width: pixel PX; line-height: 28px; border-top: dashed 1px # ccc}
. Content {padding-top: 10px; clear: left}
A {text-decoration: none; color: #666; padding: 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: pixel PX; border: solid 2px # ffa200; position: absolute; padding: 10px;
Background-color: # fff; display: none}
. Tip li {line-height: 23px ;}
# Sort {position: absolute; display: none}
</Style>

2. Reference JQUERY framework, you can go to the official online download the latest JQUERY, as if the JQUERY1.5 version has been released, link address: http://jquery.com/

3. Define HTML tags:Copy codeThe Code is 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 hard drive </a> </li>
<Ul class = "tip">
<Li> <a href = "#"> mobile hard drive 1 </a> </li>
<Li> <a href = "#"> mobile hard drive 2 </a> </li>
<Li> <a href = "#"> mobile hard drive 3 </a> </li>
<Li> <a href = "#"> mobile hard drive 4 </a> </li>
<Li> <a href = "#"> mobile hard drive 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 product 1 </a> </li>
<Li> <a href = "#"> digital product 2 </a> </li>
<Li> <a href = "#"> digital product 3 </a> </li>
<Li> <a href = "#"> digital product 4 </a> </li>
<Li> <a href = "#"> digital product 5 </a> </li>
</Ul>
</Ul>

</Li>
</Ul>

4. Next we will define the most important JQUERY code:

Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
Var curY; // obtain the Top value of the selected item
Var curH; // get the Height value of the selected item
Var curW; // get the Width value of the selected option
Var srtY; // you can specify the Top value of the arrow.
Var srtX; // you can specify the Left value of the arrow.
Var objL; // get the current object
/*
* Set the current position value
* The obj parameter is the name of the current object.
*/
Function setInitValue (obj ){
CurY = obj. offset (). top
CurH = obj. height ();
CurW = obj. width ();
SrtY = curY + (curH/2) + "px"; // you can specify the Top value of the arrow.
SrtX = curW-5 + "px"; // you can specify the Left value of the arrow.
}
$ (". Optn"). mouseover (function () {// sets the mouse slide event of the current option
ObjL = $ (this); // get the current object
SetInitValue (objL); // sets the current location
Var allY = curY-curH + "px"; // you can specify the Top value of the prompt box.
ObjL. addClass ("optnFocus"); // adds the style for getting the focus.
ObjL. next ("ul" ).show().css ({"top": allY, "left": curW}) // display and set the coordinates of the prompt box
$ ("# Sort" ).show().css ({"top": srtY, "left": srtX}); // display and set the coordinates of the arrow prompt
})
. Mouseout (function () {// sets the mouse removal event of the current option
$ (This). removeClass ("optnFocus"); // Delete the style when getting the focus
$ (This). next ("ul"). hide (); // hide the prompt box
$ ("# Sort"). hide (); // hide the prompt arrow
})
$ (". Tip"). mousemove (function (){
$ (This). show (); // a prompt box is displayed.
ObjL = $ (this). prev ("li"); // obtain the current upper-level li object
SetInitValue (objL); // sets the current location
ObjL. addClass ("optnFocus"); // adds the style when the upper-level li object obtains the focus.
$ ("# Sort" ).show().css ({"top": srtY, "left": srtX}); // display and set the coordinates of the arrow prompt
})
. Mouseout (function (){
$ (This). hide (); // hide the prompt box
$ (This). prev ("li"). removeClass ("optnFocus"); // Delete the style when getting focus
$ ("# Sort"). hide (); // hide the prompt arrow
})
})
</Script>

5. All right, it's done ......

The running result is as follows: