这篇文章主要介绍了jquery实现向下滑出的二级导航下滑菜单效果,涉及jquery实现页面结点样式动态变换效果的实现技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果。分享给大家供大家参考。具体如下：
这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效，带颜色的是一级主菜单，点击后会展开向上滑出二级的子菜单，再次点击主菜单，会合拢子菜单，就菜单所能展现的功能来说，适用于企业网站产品分类、新闻类文章栏目导航等，目前本款菜单支持两级，有兴趣的可自己扩展更多级的菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/jquery-down-show-nav-menu-codes/
具体代码如下：
向下滑动展开的JS下滑菜单 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;}
希望本文所述对大家的jquery程序设计有所帮助。
以上就是jquery实现向下滑出的二级导航下滑菜单效果的详细内容，更多请关注本站其它相关文章！
