jquery实现向下滑出的二级导航下滑菜单效果


Posted in Javascript onAugust 25, 2015

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

这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类、新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单。

运行效果截图如下:

jquery实现向下滑出的二级导航下滑菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>

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

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
jQuery实现图片左右滚动特效
Apr 20 #Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 #Javascript
jquery图片滚动放大代码分享(1)
Aug 25 #Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 #Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 #Javascript
You might like
去除php注释和去除空格函数分享
2014/03/13 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
详解 Python 与文件对象共事的实例
2017/09/11 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
会计电算化专业求职信
2014/06/10 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
护士2014年终工作总结
2014/11/11 职场文书
高中政治教师教学反思
2016/02/23 职场文书