使用CSS实现侧边Tab菜单栏 侧边Tab菜单栏和常规菜单栏的对比
侧边Tab菜单栏与一般菜单栏的区别在于菜单项与左边内容栏的贯通效果,这样做的好处在于用户通过菜单就能看出当前所在的页面,无需记忆或在页面上查找.Gmail和Google Group都采取了这种直观式的设计. 左右分栏 从图上可见,左边的白色内容区与右边的菜单区分居左右,自然他们分属不同的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的右边框事实上是rightMenu的左边框.
#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的左边框效果当然主要交给无序列表中的li项目来完成.
<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; }
仔细观察当前菜单项与非当前菜单项,你会发现以下特点: 页面上的当前菜单项和非当前菜单项 <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./Files/sitinspring/SideTab20080505153119.rar |
|