春风博客

春天里,百花香...

导航

<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

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

传统的侧边菜单的问题

工字型布局中都有一个侧边菜单栏目用以导航,它们存在的一个普遍问题是:用户无法迅速的找到自己所处页面在整个网站中的位置。
当菜单项较多时这会演变成一个大问题,当用户需要刻意寻找网页标志来确定自己所处位置时,这已经说明网站给了客户一种迷宫的感觉,有流失客户的潜在可能性。
解决这个问题只要将用户选择的菜单项突出显示即可,下面是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>
<li><href='ShowPage?page=add&&curr=0' class='unselect'>新增诗歌</a></li>
<li><href='ViewPoems?curr=1' class='unselect'>全部诗歌</a></li>
<li><href='ShowAuthorPoem?curr=ps1&&author=崇祯皇帝&&count=1' class='unselect'>崇祯皇帝(1)</a></li>
<li><href='ShowAuthorPoem?curr=ps2&&author=苏轼&&count=2' class='selected'>苏轼(2)</a></li>
<li><href='ShowAuthorPoem?curr=ps3&&author=辛弃疾&&count=1' class='unselect'>辛弃疾(1)</a></li>
</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代码:

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
  
<tr height="10" valign="top">         
    
<td width="100%">
      
<div class="sideBlank">
      
</div>
    
</td>
  
</tr>
  
<tr valign="top">         
    
<td width="100%">
      
<ul>
        
<%
          
        
%>
      
</ul>
    
</td>
  
</tr>
  
  
<tr height="100%" valign="top">         
    
<td width="100%">
      
<div class="sideBlank">
      
</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 阅读(4371) 评论(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应用吧,这么做工程量就大了。

  回复  更多评论   


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


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.