search

Home >Web Front-end >JS Tutorial >Imitation of the product classification navigation menu of mainstream e-commerce websites such as Dangdang.com and Taobao_jquery

Imitation of the product classification navigation menu of mainstream e-commerce websites such as Dangdang.com and Taobao_jquery

不言
不言Original
2018-05-29 09:59:232400browse

This article implements a category navigation menu, similar to most popular e-commerce websites. The difficulty in implementing the menu is mainly in the writing of CSS, and not much JS is used. Here are just a few key points. , for detailed implementation, you can directly view the source code. All codes are in a sidebar.html file.

(1) How to implement the opening labeled 1 in the picture? On the right side of the opening is a postion set to Absolute p, this p is exactly 1px offset to the left, causing the menu bar on the left to press its border, and the selected menu has a white border, forming a gap.

(2) Mark in the picture How to achieve No. 2 without line breaks in each connection? You can set the display attribute of the element to inline-block. This is effective in most browsers. For IE7, you can add the following conditional comment to achieve the same effect.

Copy code The code is as follows: 

<!--[if IE 7]> 
<style type="text/css"> 
#sidebar-menu p.menu-panel p.link-wrapper { 
display : inline; 
zoom : 1; 
} 
</style> 
<![endif]-->

(3) Watch on the way The first two menus have icons. In fact, each menu can add icons. Each menu has two icons, one is the initial state and the other is the mouse-over state. Their naming rules are, if the initial state is tubiao. jpg, then the mouse-over icon must be tubiao-hover.jpg. The size of the icon must be 220px * 25px. So how to specify the icon of each menu? It can be specified in HTML. For example, you can see it in the subsequent code.

Copy code The code is as follows: 

<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> 
<span>图书音像</span> 
</p>

At this time, the image address in the initial state does not need to be specified when the mouse slides over the image. But it must be in the same directory as the initial image.
Imitation of the product classification navigation menu of mainstream e-commerce websites such as Dangdang.com and Taobao_jquery
The following is the complete source code file sidebar.html

Copy the code The code is as follows: 

 
 
 
 
 
 
 
<!--[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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Jquery implements automatic left and right scrolling example of images_jqueryNext article：Jquery implements automatic left and right scrolling example of images_jquery

Related articles

See more