jquery实现简单的二级导航下拉菜单效果


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下:

jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧。

运行效果截图如下:

jquery实现简单的二级导航下拉菜单效果

在线演示地址如下:

具体代码如下:

<title>jquery二级导航菜单</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
}
.ddsmoothmenu 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: 0px
}
.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></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:['rightarrowclass', '']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enabled: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 $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
 $menucontainer.html("Loading Menu...")
 $.ajax({
  url: setting.contentsource[1], //path to external menu file
  async: true,
  error:function(ajaxrequest){
   $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
  },
  success:function(content){
   $menucontainer.html(content)
   ddsmoothmenu.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(function(i){
  var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
  var $subul=$(this).find('ul:eq(0)').css({display:'block'})
  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
   '<img src="'+ (this.istopheader? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
   +'" class="' + (this.istopheader? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
   + '" style="border:0;" />'
  )
  if (smoothmenu.shadow.enabled){
   this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
   if (this.istopheader)
    $parentshadow=$(document.body)
   else{
    var $parentLi=$curobj.parents("li:eq(0)")
    $parentshadow=$parentLi.get(0).$shadow
   }
   this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></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:$(this).offset().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.css({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 shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y
      if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
       this.$shadow.css({opacity:1})
      }
      this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'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.transition.outtime)
    if (smoothmenu.shadow.enabled){
     if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in 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()
 $mainmenu.find("ul").css({display:'none', visibility:'visible'})
},
init:function(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 custom 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 instance(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="#">首页</A> 
 </LI>
 <LI><A href="#">一年级</A> 
 <UL>
 <LI><A href="#">一年级1班</A> </LI>
 <LI><A href="#">一年级2班</A> </LI>
 <LI><A href="#">一年级3班</A> </LI>
 <LI><A href="#">一年级4班</A> </LI>
 <LI><A href="#">一年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">二年级</A> 
 <UL>
 <LI><A href="#">二年级1班</A> </LI>
 <LI><A href="#">二年级2班</A> </LI>
 <LI><A href="#">二年级3班</A> </LI>
 <LI><A href="#">二年级4班</A> </LI>
 <LI><A href="#">二年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">三年级</A> 
 <UL>
 <LI><A href="#">三年级1班</A> </LI>
 <LI><A href="#">三年级2班</A> </LI>
 <LI><A href="#">三年级3班</A> </LI>
 <LI><A href="#">三年级4班</A> </LI>
 <LI><A href="#">三年级5班</A> 
 </LI></UL></LI>
<LI><A href="#">四年级</A> 
 <UL>
 <LI><A href="#">四年级1班</A> </LI>
 <LI><A href="#">四年级2班</A> </LI>
 <LI><A href="#">四年级3班</A> </LI>
 <LI><A href="#">四年级4班</A> </LI>
 <LI><A href="#">四年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">五年级</A> 
 <UL>
 <LI><A href="#">五年级1班</A> </LI>
 <LI><A href="#">五年级2班</A> </LI>
 <LI><A href="#">五年级3班</A> </LI>
 <LI><A href="#">五年级4班</A> </LI>
 <LI><A href="#">五年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">六年级</A> 
 <UL>
 <LI><A href="#">六年级1班</A> </LI>
 <LI><A href="#">六年级2班</A> </LI>
 <LI><A href="#">六年级3班</A> </LI>
 <LI><A href="#">六年级4班</A> </LI>
 <LI><A href="#">六年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">七年级</A> 
 <UL>
 <LI><A href="#">七年级1班</A> </LI>
 <LI><A href="#">七年级2班</A> </LI>
 <LI><A href="#">七年级3班</A> </LI>
 <LI><A href="#">七年级4班</A> </LI>
 <LI><A href="#">七年级5班</A> 
 </LI></UL></LI>
</UL>
</DIV>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
js实现录音上传功能
Nov 22 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
js的三种继承方式详解
2017/01/21 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
python制作最美应用的爬虫
2015/10/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python安装scipy的步骤解析
2019/09/28 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
python re模块和正则表达式
2021/03/24 Python
会计专业毕业生自荐信范文
2013/12/20 职场文书
环保公益广告语
2014/03/13 职场文书
英文邀请函
2015/02/02 职场文书
药房管理制度范本
2015/08/06 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS