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

赞 (0)

相关推荐

  • jQuery实现简单的列表式导航菜单效果代码

    jQuery实现简单的列表式导航菜单效果代码

    本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h

  • jQuery实现淡入淡出二级下拉导航菜单的方法

    jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

  • jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes

  • jQuery实现的背景动态变化导航菜单效果

    jQuery实现的背景动态变化导航菜单效果

    本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

  • jquery实现美观的导航菜单鼠标提示特效代码

    jquery实现美观的导航菜单鼠标提示特效代码

    本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jQuery+css实现的蓝色水平二级导航菜单效果代码

    jQuery+css实现的蓝色水平二级导航菜单效果代码

    本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jquery实现红色竖向多级向右展开的导航菜单效果

    jquery实现红色竖向多级向右展开的导航菜单效果

    本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • jquery实现简单的二级导航下拉菜单效果

    jquery实现简单的二级导航下拉菜单效果

    本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl

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

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

    本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类.新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery

  • jQuery实现向下滑出的平滑下拉菜单效果

    jQuery实现向下滑出的平滑下拉菜单效果

    本文实例讲述了jQuery实现向下滑出的平滑下拉菜单效果.分享给大家供大家参考.具体如下: 这里演示的jQuery向下滑出的下拉平滑菜单,可添加多个菜单选项,修改起来比较灵活的下滑菜单,颜色风格自己可修改,不多介绍了,感兴趣的运行一下代码看效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xlph-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • jquery实现鼠标滑过显示二级下拉菜单效果

    jquery实现鼠标滑过显示二级下拉菜单效果

    本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

  • jQuery实现向下滑出的二级菜单效果实例

    jQuery实现向下滑出的二级菜单效果实例

    本文实例讲述了jQuery实现向下滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这里用jQuery实现向下滑出的二级菜单代码,滑出菜单,鼠标放在主菜单的任意一项上,就会向下滑出二级的子菜单.当然本代码只是一个演示,有些菜单是随便弄的,经过测试,兼容IE8.火狐和Chrome等浏览器,有兴趣的你可以自己试下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/ 具体代码如下

  • jquery实现平滑的二级下拉菜单效果

    jquery实现平滑的二级下拉菜单效果

    本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>

  • jQuery实现的精美平滑二级下拉菜单效果代码

    jQuery实现的精美平滑二级下拉菜单效果代码

    本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

  • jQuery实现灰蓝风格标准二级下拉菜单效果代码

    jQuery实现灰蓝风格标准二级下拉菜单效果代码

    本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载

    jquery+css实现绚丽的横向二级下拉菜单-附源码下载

    首先给大家展示下效果图: 查看效果 源码下载 html代码部分: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • Android仿今日头条APP实现下拉导航选择菜单效果

    Android仿今日头条APP实现下拉导航选择菜单效果

    本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

随机推荐