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

2019-11-20 11:43:32

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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程序设计有所帮助。

上一篇：14款经典网页图片和文字特效的jQuery插件-前端开发必备

下一篇：jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果