html点击收缩展开菜单栏,jquery实现点击向下展开菜单项(伸缩导航)效果 | 您所在的位置:网站首页 › html收缩展开 › html点击收缩展开菜单栏,jquery实现点击向下展开菜单项(伸缩导航)效果 |
本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS、css和jquery部分。 运行效果如下图所示: 在线演示地址如下: 具体代码如下: 可折叠展开的导航条body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;} form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} input,select{font-size:12px;line-height:16px;} img{border:0;} ul,li{list-style-type:none;} a {color:#00007F;text-decoration:none;} a:hover {color:#bd0a01;text-decoration:underline;} .box { width: 15 |
CopyRight 2018-2019 实验室设备网 版权所有 |