Today we're going to take you through the display of a subordinate menu, just to achieve a simple effect, but most of the principle is the same
Believe that beginners HTM+DIV+CSSL students will also want to make the menu of Taobao home page animation bar. Today we will bring you to realize the display of a subordinate menu. Small series I just achieved a simple effect, but the overall principle is the same oh, then let everyone see the effect of the picture bar. So to achieve this effect of course we have to use jquery, then I began to explain how to do, first on HTML and CSS code code as follows: <! DOCTYPE html> <html> <head> <title>menu.html</title> < Meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" > <meta http-equiv= "description" content = "This are my page" > <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <link rel=" stylesheet "type=" Text/css "href=". /css/menu.css "> <script type=" Text/javascript "src=". /js/jquery-1.10.2.js "></script> <script type=" Text/javascript "src=". /js/menu.js "></script> </head> <body> <ul> <li Class= "Menu" > <div class= "title" > <span> computer digital Products </span> </div> <ul class= "Content" > <li class= "OPTN" ><a href= "#" > Notebook </a> <ul class= "Tip" > <li><a href= "#" > Notebook 1</a></li> <li><a href= "#" > Notebook 1</a></li> <li><a href= "#" > Notebook 1</a></li> <li><a href= "#" > Notebook 1</a></li> </ul > </li> <li class= "OPTN" ><a href= "#" > Mobile hard Drive </a> <ul class= "Tip" > <li><a href= "#" > Mobile HDD 1</a></li> <li><a href= "#" > Mobile HDD 1</a ></li> <li><a href= "#" > Mobile HDD 1</a></li> <li><a href= "#" > Mobile HDD 1</a></li> </ul> </li> <li class= "OPTN" ><a href= "#" > Computer software </a> <ul class= "Tip" > <li><a href= "#" > Computer software 1</a></li> <li><a href= "#" > Computer software 1</a></li> <li><a href= "#" > Computer software 1</a></li> <li><a href= "#" > Computer software 1</a></li> </ul> </li> <li class= "OPTN" ><a href= "#" > Digital products </a> <ul class= "Tip" > <li ><a href= "#" > Digital products 1</a></li> <li><a href= "#" > Digital Products 1</a></li> <li><a href= "#" > Digital products 1</a></li> <li><a href= "#" > Digital Products 1</a> </li> </ul> </li> </ul> </li> </ul> </body> </html> menu.css code as follows: @CHARSET "UTF-8"; *{ margin:0px; padding:0px; } ul,li{ list-style-type:none; }&nbs P .menu{ width:190px; border:1px Red solid; background-color: #fffdd2; } OPTN { width:190px; line-height:28px; border-top:1px Red Dashed; } .content{ padding-top:10px; clear:left; } A { text-decoration:none; color: #666; padding:10px; } .optnfocus{ : #fff; font-weight:bold; } div{ padding:10px; } .tip{ WI dth:190px; border:2px Red solid; position:absolute; background-color: #fff; Display:none;&nbs P } Tip li{ line-height:23px; } Next is the main jquery code:menu.js code as follows: $ ( function () { var cury;//gets the selected top var curh;//to get the selected height var curw;//get the selected width var objl;/ /Get current object //Custom function to get current position function Setinitvalue (obj) { cury=obj.offset () .top; curh= Obj.height (); curw=obj.width (); } //Set the mouse sliding event for the current selection $ (". Optn"). MouseOver (function () { objl=$ (this);//Get current object Setinitvalue (OBJL); var ally=cury-curh + "px"; objl.addclass ("Optnfocus"); //Get gas element under the next ul $ (". Tip", this). Show (). CSS ({' Top ': AllY, "left": CURW});; }); $ (". Optn"). Mouseout (function () { $ (this). Removeclass ("Optnfocus"); $ (". Tip ", this). Hide (); }); /To prevent a submenu from being moved to the submenu, we also set the mouse event $ (". Tip ") for the submenu. MouseOver ( function () { $ (this). Show (); objl=$ (this). Prev ("Li"); Setinitvalue (OBJL); Objl.addclass ("Optnfocus"); }); $ (". Tip"). Mouseout (function () { $ (this). Hide (); $ ( This). Prev ("Li"). Removeclass ("Optnfocus"); }); }); attention points: 1. Since we are using a higher version of the jquery file library, there are some methods that are not supported, such as getting the first child element next (ERP) for the next element, which is not supported in 10.1, so I changed the method $ (chiled,select), Represents selection of elements in the range of select 2. Implementation of the entire effect we also want to bind the mouse event for the child option box so that it disappears suddenly when we move to the Child tab. To achieve good results you need to add some pictures and style, but the principle is the same OH Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
