滑动菜单示例
滑动菜单多用于菜单项目较多且菜单可归纳到少数类别的场合,点击类别滑动条会上下滑动以隐藏或显示其下的子菜单.其典型应用便是Visio中滑动菜单样式(上图).
本人在Web中实现了类似的控件(下图),拿出来希望和大家一起交流一下.
滑动效果的实现
本文中使用无序列表作为滑动条下的子菜单的实现,出现滑动效果实际是控制子菜单的隐藏和显示.
控制子菜单的隐藏和显示改变UL的display属性即可,当其为block时显示菜单,其为none时不显示,我们可以用JS来实现这一效果.
滑动块和菜单的页面代码示例如下:
实现效果之一
滑动块和菜单的页面代码示例
诗歌
");
![16915_1686279_3.gif](http://image2.360doc.com/DownloadImg/2008/9/28/16915_1686279_3.gif)
![16915_1686279_3.gif](http://image2.360doc.com/DownloadImg/2008/9/28/16915_1686279_3.gif)
![16915_1686279_3.gif](http://image2.360doc.com/DownloadImg/2008/9/28/16915_1686279_3.gif)
![16915_1686279_3.gif](http://image2.360doc.com/DownloadImg/2008/9/28/16915_1686279_3.gif)
注意这里用了UL来实现滑动块,你可以换成DIV.
点击滑动块显示或隐藏菜单的JavaScript代码
functionshowHideUL(ulId)
{
//取得无序列表
varul=document.getElementById(ulId);
//原隐藏即显示,原显示即隐藏
if(ul.style.display=="block"||ul.style.display=="")
{
ul.style.display="none";
}
else
{
ul.style.display="block";
}
}
//-->
如何在点击菜单项翻页后保持展开状态
现在剩下的问题是点击菜单项翻页后保持展开状态,如果使用Ajax左边可以不变,但右边内容区的代码全要通过Ajax实现有些费力不讨好,这里还是采用JSP的实现方法.
具体做法就是在连接中将UL的id传出去,翻页再得到它与诸菜单项比较,如果id相等则展开,不相等则关闭.
示例代码如下:
用于翻页保持展开状态