脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery向下滑出的二级导航下滑菜单

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

 更新时间：2015年08月25日 11:15:32   作者：企鹅  
这篇文章主要介绍了jquery实现向下滑出的二级导航下滑菜单效果,涉及jquery实现页面结点样式动态变换效果的实现技巧,非常具有实用价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jquery实现适用于门户站的导航下拉菜单效果代码

    jquery实现适用于门户站的导航下拉菜单效果代码

    这篇文章主要介绍了jquery实现适用于门户站的导航下拉菜单效果代码,可实现鼠标滑过菜单项实现下拉列表显示效果的功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态
    2014-11-11
  • 深入理解jquery中的each用法

    深入理解jquery中的each用法

    本文主要对jquery中的each用法进行介绍，相信会对大家学习each方法会很有帮助，下面就跟小编一起来看下吧
    2016-12-12
  • jQuery中on方法使用注意事项详解

    jQuery中on方法使用注意事项详解

    本文主要介绍jQuery中on方法使用注意事项。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • jquery实现滑动图片自己测试的例子

    jquery实现滑动图片自己测试的例子

    最近使用jquery写了一个图片滑动的插件，虽然还是有些问题存在，用法很简单，希望对大家有所帮助
    2013-11-11
  • 基于jQuery实现动态搜索显示功能

    基于jQuery实现动态搜索显示功能

    这篇文章主要介绍了基于jQuery实现动态搜索显示功能的相关资料,输入数值自动匹配相关信息，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JQuery省市联动效果实现过程详解

    JQuery省市联动效果实现过程详解

    这篇文章主要介绍了JQuery省市联动效果实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • jquery动态赋值id与动态取id方法示例

    jquery动态赋值id与动态取id方法示例

    这篇文章主要给大家介绍了关于jquery动态赋值id与动态取id的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • jquery tools 系列 scrollable（2）

    jquery tools 系列 scrollable（2）

    本文详细介绍scrollable中方法使用及本文完整示例。
    2009-09-09
  • 基于jquery的可多选的下拉列表框

    基于jquery的可多选的下拉列表框

    同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG，反正多选下拉列表框实现也很简单，与其看那些结构混乱的代码，不如自己重新实现一个
    2012-07-07

最新评论