使用CSS实现侧边Tab菜单栏

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

2、ontent 中 ,而菜单区处于 rightMenu 中 ,而两个 DIV 处于一个固定宽度的 DIV content 中 ,让 leftContent 向左浮动 , rightMenu 向右浮动就实现左右分栏的效果 .页面定义如右 :.leftContent, rightMenu, content三个 DIV 的 CSS 定义#contentwidth:924px;height:500px;background:#fff7c6;#leftContentwidth:624px;height:500px;float:left;#rightMenuwidth:300px;float:right;h

3、eight:500px;leftContent的边框效果仔细观察可以发现, leftContent的左 ,上 ,下边框右边框是固定的 ,而右边框却是组合成的,确切的说视觉上的leftContent的右边框事实上是rightMenu的左边框 .rightMenu的左边框比较复杂,我们还是把leftContent的CSS 定义完成了再说.#leftContentwidth:624px;height:500px;float:left;background:#f8f8f8;border-left:1px solid #ffcc31;border-right:0px solid #ffcc31;bord

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

5、ightMenuTopheight:100%;background:#fff7c6;border-left:1px solid #ffcc31;border-right:0px solid #ffcc31;border-top:0px solid #ffcc31;border-bottom:0px solid #ffcc31;#rightMenuBottomheight:100%;background:#fff7c6;border-left:1px solid #ffcc31;border-right:0px solid #ffcc31;border-top:0px solid #ffcc31

6、;border-bottom:0px solid #ffcc31;视觉上当前菜单项与非当前菜单项的区别仔细观察当前菜单项与非当前菜单项,你会发现以下特点:1. 当前菜单项有上,右 ,下三个方向的边框,唯独没有左边框.2. 当前菜单项的背景色和内容区一致.以上两点造成了当前菜单项与左边内容区的” 打通” 效果 .与之相反 ,非当前菜单项的特点是:有左边框 ,无上 ,右 ,下三个方向的边框 .背景色为黄色 .上述这两个特点与前面两个DIV:rightMenuTop和rightMenuBottom是一致的 ,它们在一起形成了视觉上的菜单栏的左边框 .页面上的当前菜单项和非当前菜单项天下风云出我辈一入

7、江湖岁月催 皇图霸业谈笑中不胜人生一场醉提剑跨骑挥鬼雨白骨如山鸟惊飞尘事如潮人如水只叹江湖几人回对当前菜单项和非当前菜单项的CSS 定义当前 :#rightMenu ul a.currentLinkcolor:#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 sol

8、id #ffcc31; border-top:1px solid #ffcc31;border-bottom:1px solid #ffcc31;非当前 :#rightMenu ul acolor:#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(天下风云出我辈);elseout.print(天下风云出我辈);i