球拍式导航菜单效果的实现

传统的侧边菜单的问题

工字型布局中都有一个侧边菜单栏目用以导航，它们存在的一个普遍问题是：用户无法迅速的找到自己所处页面在整个网站中的位置。
当菜单项较多时这会演变成一个大问题，当用户需要刻意寻找网页标志来确定自己所处位置时，这已经说明网站给了客户一种迷宫的感觉，有流失客户的潜在可能性。
解决这个问题只要将用户选择的菜单项突出显示即可，下面是gmail的解决方案。

Gmail的侧边菜单栏

将要实现的效果

如何实现菜单与左边内容区的连通效果

要将左侧内容区和右边选中的菜单项连通起来，需要将菜单栏分成两个类别，选中和未选中的样式如右。

#sidebar li a.unselect{

text-decoration: none;

width:100%;

height:10px;

font-weight:bold;

color:#0000cc;

border-left: 1px solid #7799dd;

border-right: 0px solid #7799dd;

border-top: 0px solid #7799dd;

border-bottom: 0px solid #7799dd;

padding-left:15px;

padding-right:15px;

padding-top:5px;

padding-bottom:5px;

}

#sidebar li a.selected{

text-decoration: none;

width:100%;

height:10px;

font-weight:bold;

background:#ffffff;

color:#000000;

border-left: 0px solid #7799dd;

border-right: 1px solid #7799dd;

border-top: 1px solid #7799dd;

border-bottom: 1px solid #7799dd;

padding-left:15px;

padding-right:15px;

padding-top:5px;

padding-bottom:5px;

}

大家注意看选中项和未选中项的边框和底色设置。

CSS渲染后的菜单项HTML代码：

<ul>

</ul>

渲染的效果图如下：

如何翻页后得知上次点击的菜单项

剩下的问题是如何在翻页后得知上次点击的菜单项，这很简单，从reuqest中取出请求参数curr，它代表了选中菜单项的记号，然后在jsp页面中用scriptlet逐个判断即可。

<ul>

String curr=request.getParameter("curr");

if(curr==null){

curr="0";

}

if(curr.equals("0")){

out.print("<li><a href='ShowPage?page=add&&curr=0' class='selected'>新增诗歌</a></li>");

}

else{

out.print("<li><a href='ShowPage?page=add&&curr=0' class='unselect'>新增诗歌</a></li>");

}

if(curr.equals("1")){

out.print("<li><a href='ViewPoems?curr=1' class='selected'>全部诗歌</a></li>");

}

else{

out.print("<li><a href='ViewPoems?curr=1' class='unselect'>全部诗歌</a></li>");

}

// 显示作者列表

PoemSumaryService service=new PoemSumaryService();

List<PoemSummary> ls=service.getAll();

for(PoemSummary ps:ls){

if(curr.equals(ps.getId())){

out.print("<li><a href='ShowAuthorPoem?curr="+ps.getId()+"&&author="+ps.getAuthor()+"&&count="+ps.getCount()+"' class='selected'>"+ps.getAuthor()+"("+ps.getCount()+")</a></li>");

}

else{

out.print("<li><a href='ShowAuthorPoem?curr="+ps.getId()+"&&author="+ps.getAuthor()+"&&count="+ps.getCount()+"' class='unselect'>"+ps.getAuthor()+"("+ps.getCount()+")</a></li>");

}

</ul>

导航菜单上下边的修补工作
全部工作到这里还未结束，还要在导航菜单上下部增加一些细节，要不菜单上下会缺失边缘。
我采用了表格防止上边，菜单和下边三项，下面是HTML代码：

</div>

</td>

</tr>

<ul>

</ul>

</td>

</tr>

</div>

</td>

</tr>

</table>

sideBlank的CSS设置如下：

.sideBlank{

width:100%;

height:100%;

border-left: 1px solid #7799dd;

border-right: 0px solid #7799dd;

border-top: 0px solid #7799dd;

border-bottom: 0px solid #7799dd;

}

这样，菜单上下的边就封上了，视觉效果也要好一些，位置示意图如下：

大致原理到这里就结束了，还有一些具体细节请看代码：
http://www.blogjava.net/Files/sitinspring/PoemCollection20081012113047.rar

posted on 2008-10-12 10:10 sitinspring 阅读(4373) 评论(2) 编辑收藏所属分类: HTML,CSS&JS

# re: 球拍式导航菜单效果的实现 2008-10-14 11:35 good

写的很好，但判断当前选择时麻烦了点，消耗服务器端资源，可以把判断过程放到客户端浏览器中用js修改css完成
<script>
if (curr!=0){
$("li[@name="+curr+"]").class="selected";
}
</script>
以上是大致意思回复更多评论

# re: 球拍式导航菜单效果的实现 2008-10-14 11:57 sitinspring

@good

如果做成Ajax应用吧，这么做工程量就大了。

回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: 树状侧边菜单栏示例滑动侧边菜单栏示例球拍式导航菜单效果的实现四种CSS链接按钮示例使用CSS设置表格二使用CSS设置表格使用无序列表制作导航菜单 CSS固定宽度两栏居中示例 CSS可变宽度两栏式布局例子按钮按下效果的左侧导航栏实现

# re: 球拍式导航菜单效果的实现 2008-10-14 11:35 good

# re: 球拍式导航菜单效果的实现 2008-10-14 11:57 sitinspring

春风博客

导航

统计

公告

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

球拍式导航菜单效果的实现

评论