使用CSS实现侧边Tab菜单栏

侧边Tab菜单栏和常规菜单栏的对比

常规菜单栏


侧边Tab菜单栏的特点

侧边Tab菜单栏与一般菜单栏的区别在于菜单项与左边内容栏的贯通效果,这样做的好处在于用户通过菜单就能看出当前所在的页面,无需记忆或在页面上查找.Gmail和Google Group都采取了这种直观式的设计.
如果采用表格实现首页的效果比较困难,而使用CSS对DIV和无序列表加以限制就比较容易了,本文将逐步讲述这一过程.

左右分栏

从图上可见,左边的白色内容区与右边的菜单区分居左右,自然他们分属不同的DIV.内容区处于leftContent中,而菜单区处于rightMenu中,而两个DIV处于一个固定宽度的DIV content中,让leftContent向左浮动, rightMenu向右浮动就实现左右分栏的效果.
页面定义如右:

<div id="content">
  <div id="leftContent">
   .
  </div>
  <div id="rightMenu">    
    
  </div>
</div>

leftContent, rightMenu, content三个DIV的CSS定义

#content{}{
  width:924px;
  height:500px;
  background:#fff7c6;
}

#leftContent{}{
  width:624px;
  height:500px;
  float:left;
}

#rightMenu{}{
  width:300px;
  float:right;
  height:500px;
}

leftContent的边框效果

仔细观察可以发现, leftContent的左,上,下边框右边框是固定的,而右边框却是组合成的,确切的说视觉上的leftContent的右边框事实上是rightMenu的左边框.
rightMenu的左边框比较复杂,我们还是把leftContent的CSS定义完成了再说.

#leftContent{}{
  width:624px;
  height:500px;
  float:left;
  background:#f8f8f8;
  border-left:1px solid #ffcc31;
  border-right:0px solid #ffcc31;
  border-top:1px solid #ffcc31;
  border-bottom:1px solid #ffcc31;
}

rightMenu中的组成部分

一般来说导航栏和菜单栏时下流行用无序列表实现,这次也不例外.而视觉上的rightMenu的左边框效果当然主要交给无序列表中的li项目来完成.
因为无序列表高度有限,要实现与rightMenu等高的边框需要别的DIV的帮助,这里我采用了在齐下放置一个高度为100%单元格的方式填充无序列表剩下的部分,另为美观考虑,在无序列表上方实现了一个固定高度的单元格.
代码如右:

<div id="rightMenu">    
  <table border=0 cellspacing="0" cellpadding="0" height="100%" width=100%>
  <tr height="2"><td>   
    <div id="rightMenuTop">   
    </div>
  </td></tr>
  <tr><td>    
  <ul>
    ……
  </ul>
  </td></tr>
  <tr height="100%"><td>    
    <div id="rightMenuBottom">    
    </div>
  </td></tr>
  </table>
</div>

rightMenuTop和rightMenuBottom的CSS设置

#rightMenuTop{}{
  height:100%;
  background:#fff7c6;
  border-left:1px solid #ffcc31;
  border-right:0px solid #ffcc31;
  border-top:0px solid #ffcc31;
  border-bottom:0px solid #ffcc31;
}
#rightMenuBottom{}{
  height:100%;
  background:#fff7c6;
  border-left:1px solid #ffcc31;
  border-right:0px solid #ffcc31;
  border-top:0px solid #ffcc31;
  border-bottom:0px solid #ffcc31;
}

视觉上当前菜单项与非当前菜单项的区别

仔细观察当前菜单项与非当前菜单项,你会发现以下特点:
1.当前菜单项有上,右,下三个方向的边框,唯独没有左边框.
2.当前菜单项的背景色和内容区一致.
以上两点造成了当前菜单项与左边内容区的”打通”效果.
与之相反,非当前菜单项的特点是:
3.有左边框,无上,右,下三个方向的边框.
4.背景色为黄色.
上述这两个特点与前面两个DIV:rightMenuTop和rightMenuBottom是一致的,它们在一起形成了视觉上的菜单栏的左边框.

页面上的当前菜单项和非当前菜单项

<ul>
  <li><a href="#">天下风云出我辈</a></li>
  <li><a href="#" class="currentLink">一入江湖岁月催</a></li>
  <li><a href="#">皇图霸业谈笑中</a></li>
  <li><a href="#">不胜人生一场醉</a></li>
  <li><a href="#">提剑跨骑挥鬼雨</a></li>
  <li><a href="#">白骨如山鸟惊飞</a></li>
  <li><a href="#">尘事如潮人如水</a></li>
  <li><a href="#">只叹江湖几人回</a></li>
</ul> 

对当前菜单项和非当前菜单项的CSS定义

当前:
#rightMenu ul a.currentLink{}{
  color:#000000;
  background:#f8f8f8;
  display:block;
  padding-left:20px;
  text-align:left;
  text-decoration:none;
  width:300px;
  padding-top:5px;
  padding-bottom:5px; 

  border-left:0px solid #ffcc31;
  border-right:1px solid #ffcc31;
  border-top:1px solid #ffcc31;
  border-bottom:1px solid #ffcc31;
}

非当前:
#rightMenu ul a{}{
  color:#0000cc;
  background:#fff7c6;
  display:block;
  padding-left:20px;
  text-align:left;
  text-decoration:none;
  width:300px;
  padding-top:1px;
  padding-bottom:1px; 

  border-left:1px solid #ffcc31;
  border-right:0px solid #ffcc31;
  border-top:0px solid #ffcc31;
  border-bottom:0px solid #ffcc31;
}

动态效果的实现

以上代码实现了静态效果,动态效果还需要jsp的辅助.示例代码如下:
 

<% 
  String curr=request.getParameter("curr");
  if(curr.equals("0")){
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=0' class='currentLink'>天下风云出我辈</a></li>");
  }
  else{
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=0'>天下风云出我辈</a></li>");
  }
  
  if(curr.equals("1")){
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=1' class='currentLink'>一入江湖岁月催</a></li>");
  }
  else{
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=1'>一入江湖岁月催</a></li>");
  }
.
  
  if(curr.equals("7")){
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=7' class='currentLink'>只叹江湖几人回</a></li>");
  }
  else{
    out.print("<li><a href='ShowPage?page=sideLabel2&&curr=7'>只叹江湖几人回</a></li>");
  }
%>