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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
vue实现跨域的方法分析
May 21 Javascript
jquery实现下载图片功能
Jul 18 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
vue使用element-ui实现表单验证
Dec 13 Vue.js
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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
初识laravel5
2015/03/02 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
js倒计时简单实现方法
2015/12/17 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
Javascript的比较汇总
2016/07/25 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
就业推荐表自我鉴定
2013/10/29 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
简单租房协议书
2014/10/21 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python