Posted on 2008-05-05 15:29
博学精思慎言笃行 阅读(1546)
评论(8) 编辑 收藏 所属分类:
CSS 、
Web开发
使用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>");
}
%>
代码下载:
http://www.blogjava.net/Files/sitinspring/SideTab20080505153119.rar