本文實現了一個分類導航的菜單,和大多數流行的電子商務網站類似. 菜單的實現難點主要在CSS的編寫上,並沒有用到太多的JS. 下面只介少幾處關鍵點,詳細的實作可以直接查看原始碼.所有的程式碼都在一個sidebar.html檔案中.
(1) 在圖片中的標號1的開口如何實現? 開口右邊是一個postion被設定成absolute的p, 這個p向左剛好偏移了1px, 使得左邊的選單欄壓住其邊框,而選中的選單又邊框是白色,就形成了缺口.
(2) 在圖片中標號2處如何實現每個連線不會中間換行? 可以把 元素設display 屬性設定成inline-block .這在大多數瀏覽器中都有效. 針對IE7 可以加入下面一段條件註解來達到同樣效果
複製程式碼 程式碼如下:
<!--[if IE 7]>
<style type="text/css">
#sidebar-menu p.menu-panel p.link-wrapper {
display : inline;
zoom : 1;
}
</style>
<![endif]-->(3) 在途中看到前兩個選單有圖示,實際上每個選單都可以加入圖示, 沒個選單有兩個圖示, 一個是初始狀態, 一個是滑鼠滑過狀態. 它們的命名規則是, 如果初始狀態是tubiao. jpg , 則滑鼠滑過圖示必須是tubiao-hover.jpg. 圖示的大小必須是220px * 25px. 那如何指定每個選單的圖示呢? 可以在HTML裡面指定. 例如在隨後的程式碼中能看到.
複製代碼 代碼如下:
<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> <span>图书音像</span> </p>
這時初始狀態的圖片地址,滑鼠滑過圖片不用指定,但要和初始圖片在同一目錄下. 
下面是完整的源代碼檔案sidebar.html
<!--[if IE 7]>
<style type="text/css">
#sidebar-menu p.menu-panel p.link-wrapper {
display : inline;
zoom : 1;
}
</style>
<![endif]-->
Side bar demo
