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小tip资料
Nov 23 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
javascript基础知识讲解
Jan 11 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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
php 数组的指针操作实现代码
2011/02/08 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP时间函数使用详解
2019/03/21 PHP
php实现图片压缩处理
2020/09/09 PHP
js单例模式的两种方案
2013/10/22 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python 切分数组实例解析
2019/11/07 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
英文商务邀请信
2014/01/22 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
初中学习计划书范文
2014/09/15 职场文书
2014年保管员工作总结
2014/11/18 职场文书
邀请函的格式
2015/01/30 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏