search

Home  >  Article  >  Web Front-end  >  jQuery simply implements the left menu effect code imitating Jingdong Mall_jquery

jQuery simply implements the left menu effect code imitating Jingdong Mall_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:553413browse

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>

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

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：js implements 3D picture carousel slideshow special effects code sharing_javascript skillsNext article：js implements 3D picture carousel slideshow special effects code sharing_javascript skills

Related articles

See more