jQuery simply implements the left menu effect code imitating Jingdong Mall

jQuery simply implements the left menu effect code imitating Jingdong Mall_jquery

WBOY

Release： 2016-05-16 15:39:55

Original

3414 people have browsed it

The example in this article describes the jQuery simple implementation of the left menu effect code imitating Jingdong Mall. Share it with everyone for your reference. The details are as follows:

This is a very beautiful left menu effect, based on the jQuery plug-in, but it is not really perfect yet, and there is some flickering. I hope experts can give me some advice and correct it. Menu imitating JD.com style.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左侧菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$().ready(function(){$(".testbox ul li").hover(function(){$(this).find(".boxshow").show();},function(){$(this).find(".boxshow").hide();});});
</script>
<style type="text/css">
<!--
* {
 padding:0;
 list-style:none;
 margin:0
}
body {
 background:#666;
}
.testbox {
 margin-top: 10px;
 margin-left: 10px;
 width: 200px;
}
.testbox ul li a {
 color: #FFF;
 font-size: 12px;
 text-decoration: none;
 background-color: #333;
 padding: 8px;
 margin: 4px;
 float: left;
 border: 1px solid #FFF;
 position: relative;
 width: 100px;
}
.testbox ul li a:hover {
 color: #000;
 font-size: 12px;
 text-decoration: none;
 background-color: #CCC;
 padding: 8px;
 float: left;
 position: relative;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #FFF;
 border-bottom-color: #FFF;
 border-left-color: #FFF;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #CCC;
 z-index: 2;
 width: 87px;
}
.testbox ul li .boxshow {
 background-color: #ccc;
 height: 330px;
 width: 300px;
 position: absolute;
 left: 118px;
 border: 1px solid #FFF;
 font-size: 12px;
 color: #000;
 padding: 10px;
 top: 14px;
 display: none;
 z-index: 1;
}
-->
</style>
</head>
<body>
<div class="testbox">
 <ul>
 <li><a href="#">测试分类标题1</a>
 <div class="boxshow">分类标题1的内容</div>
 </li>
 <li><a href="#">测试分类标题2</a>
 <div class="boxshow">分类标题2的内容</div>
 </li>
 <li><a href="#">测试分类标题3</a>
 <div class="boxshow">分类标题3的内容</div>
 </li>
 <li><a href="#">测试分类标题4</a>
 <div class="boxshow">分类标题4的内容</div>
 </li>
 <li><a href="#">测试分类标题5</a>
 <div class="boxshow">分类标题5的内容</div>
 </li>
 <li><a href="#">测试分类标题6</a>
 <div class="boxshow">分类标题6的内容</div>
 </li>
 <li><a href="#">测试分类标题7</a>
 <div class="boxshow">分类标题7的内容</div>
 </li>
 <li><a href="#">测试分类标题8</a>
 <div class="boxshow">分类标题8的内容</div>
 </li>
 <li><a href="#">测试分类标题9</a>
 <div class="boxshow">分类标题9的内容</div>
 </li>
 </ul>
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.