jquery implements a simple two-level navigation pull-down menu effect _jquery

This article illustrates the effect of jquery's simple two-level navigation Pull-down menu. Share to everyone for your reference. Specifically as follows:

jquery code implementation of the two-level navigation menu effect, very concise, like the simple style of friends you can download Oh. Menu supports up to two levels, CSS is also very important to cooperate, not to say, to the code directly copy it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/

The specific code is as follows:

<title>jquery level Two navigation menu </title> <style> ddsmoothmenu {margin:0px auto; FONT:12PX Verdana; width:730px}. ddsmoothmenu UL {padding-right:0px; padding-left:0px; BACKGROUND: #2b9801; z-index:100; Float:left; padding-bottom:0px; margin:0px; padding-top:0px; List-style-type:none}. Ddsmoothmenu UL LI {display:block; Float:left; width:81px; line-height:31px; position:relative; Text-align:center} HTML. ddsmoothmenu UL LI {float:left; width:81px; line-height:31px; position:relative; Text-align:center}. Ddsmoothmenu UL LI A {display:block; Font-weight:bold; width:81px; Text-decoration:none} Ddsmoothmenu ul li a:link {color: #fff}. Ddsmoothmenu ul li a:visited {color: #fff}. Ddsmoo Thmenu ul li a:hover {COLOR: #ffff00}. Ddsmoothmenu ul Li ul left:0px; Visibility:hidden; Position:absolute}. Ddsmoothmenu ul Li ul li {BACKGROUND: #2b9801; Float:left; width:81px; line-height:25px; Border-bottom: #96d47d 1px solid}. DdsmoothMenu ul Li ul li A {display:block; width:81px; Text-decoration:none}. Ddsmoothmenu ul Li ul li a:hover {BACKGROUND: #51b228}. ddsmoothmenu ul Li ul Li ul top:0p X}. downarrowclass {display:none; Position:absolute}. rightarrowclass {display:none; Position:absolute}. Ddshadow {background:silver; left:0px; width:0px; Position:absolute; top:0px; height:0px}. Toplevelshadow {opacity:0.8} </style> <script src= "Jquery1.3.2.js" type=text/javascript>&lt ;/script> <script type=text/javascript> var ddsmoothmenu={//specify full URL to down and right arrow images (23 Is Padding-right added to top level LIs with Drop Downs): arrowimages: {down:[' downarrowclass ', ', 0], right:[' RightArrow Class ', ']}, Transition: {overtime:300, outtime:300},//duration of slide in/out, in animation milliseconds: {Shadow Bled:false, Offsetx:5, Offsety:5}, Detectwebkit:navigator.userAgent.toLowerCase (). IndexOf ("AppleWebKit")!=-1,// Detect WebKit Browsers (SAfari, Chrome etc) getajaxmenu:function ($, setting) {//function to fetch external page containing the panel divs var $men ucontainer=$ (' # ' +setting.contentsource[0])//reference empty div on page that would hold menu $menucontainer. HTML ("Loadin G menu ... ") $.ajax ({url:setting.contentsource[1],//path to external Menu file Async:true, error:function (ajaxre Quest) {$menucontainer. html (' Error fetching content. Server Response: ' +ajaxrequest.responsetext}, success:function (content) {$menucontainer. html (content) Ddsmooth Menu.buildmenu ($, setting)}})}, Buildshadow:function ($, $subul) {}, Buildmenu:function ($, setting) {var smoothmenu= Ddsmoothmenu var $mainmenu =$ ("#" +setting.mainmenuid+ ">ul")//reference main Menu ul var $headers = $mainmenu. Find ("ul Parent () $headers. each (the function (i) {var $curobj =$ (this). css ({zindex:100-i})//reference the current LI header var $su bul=$ (This). Find (' ul:eq (0) '). CSS ({display: ' Blocks '}) this._dimensions={w:this.offsetwidth, h: This.offsetheight, SUBULW: $subul. Outerwidth (), Subulh: $subul. Outerheight ()} this.istopheader= $curobj. Parents ("ul "). Length==1?
  True:false//is Top level header? $subul. css ({top:this.istopheader this._dimensions.h+ "px: 0}") $curobj. Children ("A:eq (0)"). CSS (This.istopheader? {Paddingright:smoothmenu.arrowimages.down[2]}: {}). Append (//add arrow images ' </div> '). Prependto ($parentshadow). css ({left:this._shadowoffset.x+ ' px ', top:
   this._shadowoffset.y+ ' px '})//insert Shadow Div and set it to parent node for the next Shadow div} $curobj. Hover ( Function (e) {var $targetul =$ (this). Children ("Ul:eq (0)") this._offsets={left:$ (This). Offset (). Left, top:$ (a). Off Set (). Top} var menuleft=this.istopheader? 0:THIS._DIMENSIONS.W menuleft= (this._offsets.left+menuleft+this._dimensions.subulw>$ (window). Width ())? (This.istopheader?-THIS._DIMENSIONS.SUBULW+THIS._DIMENSIONS.W:-THIS._DIMENSIONS.W): Menuleft//calculate This sub Menu ' s offsets from its parent if ($targetul. Queue (). length<=1) {//if 1 or less queued animations $targetul. cs S ({left:menuleft+ "px", width:this._dimensions.subulw+ ' px '}). Animate ({height: ' show ', Opacity: ' Show '}, Ddsmoothmenu.transition.overtime) if(smoothmenu.shadow.enabled) {var shadowleft=this.istopheader $targetul. Offset (). left+ddsmoothmenu.shadow.offsetx:menuleft var shadowto P=this.istopheader $targetul. Offset (). Top+smoothmenu.shadow.offsety:this._shadowoffset.y if (!this.istopheader &A mp;& ddsmoothmenu.detectwebkit) {//in WebKit browsers, restore shadow ' s opacity to full this. $shadow. css ({Opaci Ty:1})} this. $shadow. css ({overflow: ', width:this._dimensions.subulw+ ' px ', left:shadowleft+ ' px ', top:shadowto p+ ' px '}). Animate ({height:this._dimensions.subulh+ ' px '}, Ddsmoothmenu.transition.overtime)}}, function (E {var $targetul =$ (this). Children ("Ul:eq (0)") $targetul. Animate ({height: ' hide ', opacity: ' Hide '}, Ddsmoothmenu.tran Sition.outtime) if (smoothmenu.shadow.enabled) {if (Ddsmoothmenu.detectwebkit) {//in WebKit browsers, set a-C Hild shadow ' s opacity to 0, as "overflow:hidden" doesn ' t work into them this. $shadow. Children (' div:eq (0) '). CSS ({OPACity:0})} this. $shadow. css ({overflow: ' hidden '}). Animate ({height:0}, ddsmoothmenu.transition.outtime)}} //end hover})//end $headers. each () is $mainmenu. Find ("ul"). CSS ({display: ' None ', Visibility: ' Visible '})}, Init:functi On (setting) {if (typeof setting.customtheme== "Object" && setting.customtheme.length==2) {var mainmenuid= ' # ' + Setting.mainmenuid document.write (' <style type= text/css ' >\n ' +mainmenuid+ ', ' +mainmenuid+ ' ul li a {background : ' +setting.customtheme[0]+ ';} \ n ' +mainmenuid+ ' ul li a:hover {background: ' +setting.customtheme[1]+ ';} \ n ' + ' </style> '} jQuery (document). Ready (function ($) {//override default menu colors (default/hover) with Custo
  M set? if (typeof setting.contentsource== "Object") {//if external Ajax menu Ddsmoothmenu.getajaxmenu ($, setting)} else{/ /else If Markup menu Ddsmoothmenu.buildmenu ($, setting)}}}//end ddsmoothmenu variable//initialize menu Insta NCE (s): Ddsmoothmenu.init ({mainmenUID: "smoothmenu1",//menu DIV ID customtheme: [],//override default menu CSS background values? Uncomment: ["Normal_background", "Hover_background"] ContentSource: "Markup"//"markup" or ["container_id", "path_to_ Menu_file "]}) </SCRIPT> <div class=ddsmoothmenu id=smoothmenu1> <UL> <li><a href=" # "> Home </A> </LI> <li><a href= "#" > First grade </A> <UL> <li><a href= "#" > First grade Class 1 </a& Gt </LI> <li><a href= "#" > First grade Class 2 </A> </LI> <li><a href= "#" > First Grade 3 </A> < /li> <li><a href= "#" > First grade Class 4 </A> </LI> <li><a href= "#" > First grade 5 </A> </li& Gt;</ul></li> <li><a href= "#" > Second grade </A> <UL> <li><a href= "#" > Second grade Class 1 </A> </LI> <li><a href= "#" > Second grade 2 </A> </LI> <li><a href= "#" > Second Grade 3 < /a> </LI> <li><a href= "#" > Grade 4 </A> &LT;/li> <li><a href= "#" > Grade 5 </A> </LI></UL></LI> <li><a href= "#" > Third grade </A> <UL> <li><a href= "#" > Third Grade 1 </A> </LI> <li><a href= "#" > Class 2 </A> </LI> <li><a href= "#" > Third Grade 3 </A> </LI> <li><a href= "#" > Class 4 </A> </LI> <li><a href= "#" > Third grade 5 </A> </LI></UL></LI> <li ><a href= "#" > Four grade </A> <UL> <li><a href= "#" > Four Grade 1 </A> </LI> <LI> <a href= "#" > Grade 2 </A> </LI> <li><a href= "#" > Four Grade 3 </A> </LI> <LI>< A href= "#" > Grade 4 </A> </LI> <li><a href= "#" > Four Grade 5 </A> </li></ul></li > <li><a href= "#" > Five grade </A> <UL> <li><a href= "#" > Five Grade 1 </A> </LI> ; Li><a href= "#" > Grade 2 </A> </LI> <li&gt<a href= "#" > Grade 3 </A> </LI> <li><a href= "#" > Five grade 4 </A> </LI> <LI> <a href= "#" > Grade 5 </A> </LI></UL></LI> <li><a href= "#" > Six grade </A> < Ul> <li><a href= "#" > Six Grade 1 class </A> </LI> <li><a href= "#" > Six Grade 2 class </A> </li
 > <li><a href= "#" > Six Grade 3 class </A> </LI> <li><a href= "#" > Six Grade 4 class </A> </LI> <li><a href= "#" > Six grade Class 5 </A> </LI></UL></LI> <li><a href= "#" > Seven grade </ a> <UL> <li><a href= "#" > Seven Grade 1 class </A> </LI> <li><a href= "#" > Seven Grade 2 class </A> </LI> <li><a href= "#" > Seven Grade 3 class </A> </LI> <li><a href= "#" > Seven Grade 4 class </A> <

 /li> <li><a href= "#" > Seven grade Class 5 </A> </LI></UL></LI> </UL> </DIV>

I hope this article will help you with your jquery programming.