使用CSS实现侧边Tab菜单栏

来源：百度文库 编辑：神马文学网 时间：2024/04/24 17:33:00

使用CSS实现侧边Tab菜单栏

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



常规菜单栏


侧边Tab菜单栏的特点

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

左右分栏

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

 


  
   .
  


      
    
  

 

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%单元格的方式填充无序列表剩下的部分,另为美观考虑,在无序列表上方实现了一个固定高度的单元格.
代码如右: