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

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

传统的侧边菜单的问题

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