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:

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Simple list navigation menu based on jQuery_jquery