Heim >Web-Frontend >js-Tutorial >仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery

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

不言
不言Original
2018-05-29 09:59:232375Durchsuche

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在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 
 
 
 


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn