搜尋

首頁 >web前端 >js教程 >仿當網淘寶網等主流電子商務網站商品分類導航選單_jquery

仿當網淘寶網等主流電子商務網站商品分類導航選單_jquery

不言
不言原創
2018-05-29 09:59:232396瀏覽

本文實現了一個分類導航的菜單,和大多數流行的電子商務網站類似. 菜單的實現難點主要在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>

這時初始狀態的圖片地址,滑鼠滑過圖片不用指定,但要和初始圖片在同一目錄下.
仿當網淘寶網等主流電子商務網站商品分類導航選單_jquery 
下面是完整的源代碼檔案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
複製代碼


複製代碼複製代碼複製代碼 程式碼如下:
css html JS display
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Jquery實現圖片左右自動滾動範例_jquery下一篇：Jquery實現圖片左右自動滾動範例_jquery

相關文章

看更多