使用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%单元格的方式填充无序列表剩下的部分,另为美观考虑,在无序列表上方实现了一个固定高度的单元格.
代码如右:
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是一致的,它们在一起形成了视觉上的菜单栏的左边框.
页面上的当前菜单项和非当前菜单项
对当前菜单项和非当前菜单项的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("
天下风云出我辈");
}
else{
out.print("
天下风云出我辈");
}
if(curr.equals("1")){
out.print("
一入江湖岁月催");
}
else{
out.print("
一入江湖岁月催");
}
.
if(curr.equals("7")){
out.print("
只叹江湖几人回");
}
else{
out.print("
只叹江湖几人回");
}
%>
代码下载:
http://www.blogjava.net/Files/sitinspring/SideTab20080505153119.rar