春天里,百花香...
传统的侧边菜单的问题 工字型布局中都有一个侧边菜单栏目用以导航,它们存在的一个普遍问题是:用户无法迅速的找到自己所处页面在整个网站中的位置。 当菜单项较多时这会演变成一个大问题,当用户需要刻意寻找网页标志来确定自己所处位置时,这已经说明网站给了客户一种迷宫的感觉,有流失客户的潜在可能性。 解决这个问题只要将用户选择的菜单项突出显示即可,下面是gmail的解决方案。
Gmail的侧边菜单栏
将要实现的效果
如何实现菜单与左边内容区的连通效果
要将左侧内容区和右边选中的菜单项连通起来,需要将菜单栏分成两个类别,选中和未选中的样式如右。
大家注意看选中项和未选中项的边框和底色设置。 CSS渲染后的菜单项HTML代码:
渲染的效果图如下:
如何翻页后得知上次点击的菜单项
剩下的问题是如何在翻页后得知上次点击的菜单项,这很简单,从reuqest中取出请求参数curr,它代表了选中菜单项的记号,然后在jsp页面中用scriptlet逐个判断即可。
导航菜单上下边的修补工作 全部工作到这里还未结束,还要在导航菜单上下部增加一些细节,要不菜单上下会缺失边缘。 我采用了表格防止上边,菜单和下边三项,下面是HTML代码:
sideBlank的CSS设置如下:
这样,菜单上下的边就封上了,视觉效果也要好一些,位置示意图如下: 大致原理到这里就结束了,还有一些具体细节请看代码: http://www.blogjava.net/Files/sitinspring/PoemCollection20081012113047.rar
posted on 2008-10-12 10:10 sitinspring 阅读(4371) 评论(2) 编辑 收藏 所属分类: HTML,CSS&JS
写的很好,但判断当前选择时麻烦了点,消耗服务器端资源,可以把判断过程放到客户端浏览器中用js修改css完成 <script> if (curr!=0){ $("li[@name="+curr+"]").class="selected"; } </script> 以上是大致意思 回复 更多评论
@good 如果做成Ajax应用吧,这么做工程量就大了。 回复 更多评论
Powered by: BlogJava Copyright © sitinspring