Simple list navigation menu based on jQuery

Below is a simple navigation menu I made. Because I am a newbie, there will inevitably be some mistakes. I hope everyone can help me!

Okay, let’s get to the point:

1. First define CSS style sheet:

Copy code The code is as follows: 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;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:190px;border:solid 2px #ffa200;position:absolute;padding:10px; background-color:#fff;display:none} .tip li{line-height:23px;} #sort{position:absolute;display:none} 2. To quote the JQUERY framework, you can go to the official website to download the latest JQUERY, like JQUERY1.5 The versions have been released, link address: http://jquery.com/

3. Define HTML tags: Copy code The code is as follows: Computer digital products Notebook &lt ;li> Notebook 1 Notebook 2 Notebook 3 Notebook 4 Notebook 5 Mobile hard drive &lt ;a href="#">Mobile hard drive 1 Mobile hard drive 2 Mobile Hard Drive 3 /a> Mobile Hard Drive 5 Computer software Computer Software 1 Computer Software 2 Computer Software 3 Computer Software 4&lt ;/a> Computer Software 5 &lt ;li class="optn"> Digital products Digital product 1 Digital product 2 Digital Products 3 Digital Products 4 Digital products 5

4. Next is to define the most important JQUERY code:

Copy code Code As follows: $(function() { var curY; //Get the Top value of the selected item var curH; //Get Height value of the selected item var curW; //Get Width value of the selected item var srtY; //Set the Top value of the prompt arrow var srtX; //Set the Left value of the prompt arrow var objL; //Get the current object /* *Set the current position value *The 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 the prompt arrow Top value srtX = curW - 5 "px"; //Set the Left value of the prompt arrow } $(".optn").mouseover(function() {//Set the currently selected item's Left value Mouse over event objL = $(this); //Get the current object setInitValue(objL); //Set the current position var allY = curY - curH "px"; //Set the prompt box Top value objL.addClass("optnFocus"); //Add the style when getting 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 Set the coordinates of the prompt arrow }) .mouseout(function() {//Set the mouse out event of the currently selected item $(this).removeClass("optnFocus"); //Remove and get focus Style when }) $(".tip").mousemove(function() { $(this).show(); //Show prompt box objL = $(this).prev("li "); //Get the current superior li object setInitValue(objL); //Set the current position objL.addClass("optnFocus"); //Add the style when the superior li object gets focus $("#sort").show().css({ "top": srtY, "left": srtX }); //Show and set the coordinates of the prompt arrow }) .mouseout(function () { $(this).hide(); //Hide the prompt box $(this).prev("li").removeClass("optnFocus"); //Remove the style when getting focus $("#sort").hide(); //Hide prompt arrow }) })

5. OK Well, you’re done... The running effect is as follows:

Simple list navigation menu based on jQuery_jquery