1、使用 CSS 實現(xiàn)側(cè)邊 Tab 菜單欄使用 CSS 實現(xiàn)側(cè)邊 Tab 菜單欄側(cè)邊 Tab 菜單欄和常規(guī)菜單欄的對比常規(guī)菜單欄側(cè)邊Tab菜單欄的特點側(cè)邊 Tab 菜單欄與一般菜單欄的區(qū)別在于菜單項與左邊內(nèi)容欄的貫通效果,這樣做的好處在于用戶通過菜單就能看出當(dāng)前所在的頁面 ,無需記憶或在頁面上查找 .Gmail 和 Google Group 都采取了這種直觀式的設(shè)計 .如果采用表格實現(xiàn)首頁的效果比較困難,而使用 CSS 對 DIV和無序列表加以限制就比較容易了,本文將逐步講述這一過程.左右分欄從圖上可見 ,左邊的白色內(nèi)容區(qū)與右邊的菜單區(qū)分居左右,自然他們分屬不同的 DIV. 內(nèi)容區(qū)處于 leftC

2、ontent 中 ,而菜單區(qū)處于 rightMenu 中 ,而兩個 DIV 處于一個固定寬度的 DIV content 中 ,讓 leftContent 向左浮動 , rightMenu 向右浮動就實現(xiàn)左右分欄的效果 .頁面定義如右 :.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的邊框效果仔細(xì)觀察可以發(fā)現(xiàn), leftContent的左 ,上 ,下邊框右邊框是固定的 ,而右邊框卻是組合成的,確切的說視覺上的leftContent的右邊框事實上是rightMenu的左邊框 .rightMenu的左邊框比較復(fù)雜,我們還是把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中的組成部分一般來說導(dǎo)航欄和菜單欄時下流行用無序列表實現(xiàn),這次也不例外 .而視覺上的rightMenu的左邊框效果當(dāng)然主要交給無序列表中的li 項目來完成 .因為無序列表高度有限,要實現(xiàn)與rightMenu等高的邊框需要別的 DIV 的幫助 ,這里我采用了在齊下放置一個高度為100% 單元格的方式填充無序列表剩下的部分,另為美觀考慮,在無序列表上方實現(xiàn)了一個固定高度的單元格.代碼如右 :rightMenuTop和 rightMenuBottom的 CSS 設(shè)置#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;視覺上當(dāng)前菜單項與非當(dāng)前菜單項的區(qū)別仔細(xì)觀察當(dāng)前菜單項與非當(dāng)前菜單項,你會發(fā)現(xiàn)以下特點:1. 當(dāng)前菜單項有上,右 ,下三個方向的邊框,唯獨沒有左邊框.2. 當(dāng)前菜單項的背景色和內(nèi)容區(qū)一致.以上兩點造成了當(dāng)前菜單項與左邊內(nèi)容區(qū)的” 打通” 效果 .與之相反 ,非當(dāng)前菜單項的特點是:有左邊框 ,無上 ,右 ,下三個方向的邊框 .背景色為黃色 .上述這兩個特點與前面兩個DIV:rightMenuTop和rightMenuBottom是一致的 ,它們在一起形成了視覺上的菜單欄的左邊框 .頁面上的當(dāng)前菜單項和非當(dāng)前菜單項天下風(fēng)云出我輩一入

7、江湖歲月催 皇圖霸業(yè)談笑中不勝人生一場醉提劍跨騎揮鬼雨白骨如山鳥驚飛塵事如潮人如水只嘆江湖幾人回對當(dāng)前菜單項和非當(dāng)前菜單項的CSS 定義當(dāng)前 :#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;非當(dāng)前 :#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;動態(tài)效果的實現(xiàn)以上代碼實現(xiàn)了靜態(tài)效果,動態(tài)效果還需要jsp 的輔助 .示例代碼如下 :%String curr=request.getParameter(curr); if(curr.equals(0)out.print(天下風(fēng)云出我輩);elseout.print(天下風(fēng)云出我輩);i