Imitation Dangdang Taobao, such as mainstream E-commerce website merchandise category navigation menu _jquery

This article implements a category navigation menu, similar to most popular ecommerce sites. The implementation of the menu is mainly in the CSS writing, and did not use too much JS. Below are only a few key points, detailed implementation can directly view the source code. All the code is in a sidebar.html file.

(1) How does the opening of the label 1 in the picture be achieved? Opening to the right is a postion is set to absolute Div, this div left just offset 1px, so that the left side of the menu bar to press its border, and the selected menu and the border is white, forming a gap.

(2) in the picture of the label 2 How to achieve each connection will not be wrapped in the middle? You can set the display property of the <a> element to Inline-block. This works in most browsers. For IE7 You can add the following conditional annotation to achieve the same effect

Copy Code code as follows:

<!--[if IE 7]>
<style type= "Text/css" >
#sidebar-menu Div.menu-panel Div.link-wrapper {
Display:inline;
Zoom:1;
}
</style>
<! [endif]-->

(3) on the way to see the first two menu has an icon, in fact, each menu can add icons, no menu has two icons, one is the initial state, one is the mouse over the state. Their naming rule is that if the initial state is tubiao.jpg, the mouse over the icon must be tubiao-hover.jpg. The size of the icon must be 220px * 25px. So how do you specify the icon for each menu? Can be specified inside the HTML. As you can see in the code that follows.

Copy Code code as follows:

<div class= "Menu-item" style= "Background-image:url (images/tubiao.jpg);" >
<span> Books and Audio </span>
</div>

At this point the initial state of the picture address, the mouse to slide over the picture without specifying, but to and the original picture in the same directory.

Here is the complete source code file sidebar.html

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<style type= "Text/css" >
#sidebar-menu {
/* Currently required width is 238px, height is 332px, the left frame +width just 238, after the need to be able to modify * *
border-left:1px solid #F93;
width:237px;
/* HEIGHT:332PX; */
margin:0;
padding:0;
Background: #FFF7F0;
}
#sidebar-menu > UL {
List-style:none;
padding:0;
margin:0;
}
#sidebar-menu > Ul > li {
List-style:none;
padding:0;
margin:0;
border-bottom:1px solid #FDEADB;
position:relative;
}
#sidebar-menu > ul > li.selected {
Background: #FFF;
border-top:1px solid #F93;
border-bottom:1px solid #F93;
}
#sidebar-menu > ul > Li.first {
border-top:1px solid #F93;
}
#sidebar-menu > ul > Li.last {
border-bottom:1px solid #F93;
}

#sidebar-menu. Menu-item {
Background: #FFF7F0 No-repeat left center;
height:32px; /** control the width of each line in the menu, there are two more to be modified **/
border-right:1px solid #F93;
z-index:10000;
position:relative;
}

#sidebar-menu > Ul > li.selected menu-item {
border-right:1px solid #FFF;
Background: #FFF No-repeat left center;
}
#sidebar-menu. Menu-item span {
font-size:13px;
Font-weight:bold;
height:32px;
line-height:32px;
padding-left:35px;
padding-top:2px;
Display:inline-block;
}

#sidebar-menu. Menu-panel {
padding:10px 20px;
Display:none;
border:1px solid #F93;
width:560px;
Position:absolute;
left:236px;
Top: -1px;
z-index:5000;
min-height:50px;
box-shadow:1px 1px 4px #888888;
}

#sidebar-menu div.menu-panel.selected {
Display:block;
}

/*panel inside the link list * *
#sidebar-menu Div.menu-panel ul {
List-style:none;
padding:0;
margin:0;
}
#sidebar-menu Div.menu-panel ul li {
List-style:none;
padding:5px 0px;
margin:0;
}

#sidebar-menu DIV.MENU-PANEL&GT;UL&GT;LI&GT;H2 {
margin:0;
padding:0;
padding-top:2px;
font-size:13px;
color:red;
Float:left;
width:60px;
}
#sidebar-menu Div.menu-panel>ul>li>div.link-list {
Float:left;
padding-left:10px;
width:450px;
}
#sidebar-menu Div.menu-panel Div.link-wrapper {
Display:inline-block;
PADDING:3PX 0px;
}
#sidebar-menu Div.menu-panel div.link-wrapper span {
font-size:13px;
Color: #888;
padding-right:4px;
}
#sidebar-menu Div.menu-panel div.link-list a {
font-size:13px;
Color: #888;
Text-decoration:none;
}
#sidebar-menu Div.menu-panel div.link-list a:hover {
Text-decoration:underline;
}
#sidebar-menu Div.clear {
Clear:both;
height:0;
line-height:0;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#sidebar-menu > Ul > Li"). Hover (function () {
$ (this). AddClass ("selected");
$ (". Menu-panel", this). AddClass ("selected");
var bgimg = $ (". Menu-item", this). CSS ("Background-image");
bgimg = Bgimg.replace (".", "-hover.");
$ (". Menu-item", this). CSS ("Background-image", bgimg);
}, function () {
$ (this). Removeclass ("selected");
$ (". Menu-panel", this). Removeclass ("selected");
var bgimg = $ (". Menu-item", this). CSS ("Background-image");
bgimg = Bgimg.replace ("-hover.", ".");
$ (". Menu-item", this). CSS ("Background-image", bgimg);
});
});
</script>
<!--[if IE 7]>
<style type= "Text/css" >
#sidebar-menu Div.menu-panel Div.link-wrapper {
Display:inline;
Zoom:1;
}
</style>
<! [endif]-->
<title>side Bar Demo</title>
<body>
<div id= "Sidebar-menu" >
<ul>
<li class= "a" >
<div class= "Menu-item" style= "Background-image:url (images/tubiao.jpg);" >
<span> Books and Audio </span>
</div>
<div class= "Menu-panel" >
<ul>
<li>
<div class= "Link-list" >
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Physics Exercise </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Biology </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Review questions </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Chinese writing Daquan </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Political Affairs </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Analysis and Answers to the questions of the college entrance examination in the past years </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Exam Questions </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Chemical Test </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Bio-Test </a></div>
</div>
<div class= "Clear" ></div>
</li>
<li>
<div class= "Link-list" >
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Zheng album </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Taiwan Wu Bai </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Continental Zhang contain rhyme </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Andy Lau </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Jackie Chan </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Faye Wong </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Latest Song rankings </a></div>
</div>
<div class= "Clear" ></div>
</li>
<li>
<div class= "Link-list" >
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Comprehend Life </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Astronomy Geography </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Tourism Encyclopedia </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Stir-fry one-pass </a></div>
</div>
<div class= "Clear" ></div>
</li>
</ul>
</div>
</li>
<li>
<div class= "Menu-item" style= "Background-image:url (images/tubiao.jpg);" >
<span> Living Class </span>
</div>
<div class= "Menu-panel" >
<ul>
<li>
<div class= "Link-list" >
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Comprehend Life </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Astronomy Geography </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Tourism Encyclopedia </a></div>
<div class= "Link-wrapper" ><span>|</span><a href= "#" > Stir-fry one-pass </a></div>
</div>
<div class= "Clear" ></div>
</li>
</ul>
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li>
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
<li class= "Last" >
<div class= "Menu-item" >
<span> Product Classification </span>
</div>
<div class= "Menu-panel" >
Product category ...
</div>
</li>
</ul>
</div>
</body>