仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在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]--> 
 
 
 
 
 
 
<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> 
<span>图书音像</span> 
</p> 
 
 
 
高考图书
 
 
|物理习题
 
|生物
 
|高考复习题
 
|语文作文大全
 
|政治时事
 
|历年高考真题解析与答案
 
|考试题
 
|化学实验测试
 
|生物测试
 
 
 
 
 
专辑
 
 
|郑智化专辑
 
|台湾伍佰
 
|大陆张含韵
 
|刘德华
 
|成龙
 
|王菲
 
|最新歌曲排行榜
 
 
 
 
 
生活图书
 
 
|领悟人生
 
|天文地理
 
|旅游百科
 
|炒菜一本通
 
 
 
 
 
 
 
 
 
生活类 
 
 
 
 
炒菜宝典
 
 
|领悟人生
 
|天文地理
 
|旅游百科
 
|炒菜一本通
 
 
 
 
 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容...... 
 
 
 
 
商品分类 
 
 
商品分类内容......