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

传统的侧边菜单的问题

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

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



 大致原理到这里就结束了，还有一些具体细节请看附件：