jQuery는 Jingdong Mall_jquery를 모방한 왼쪽 메뉴 효과 코드를 간단하게 구현합니다.
- WBOY원래의
- 2016-05-16 15:39:553416검색
이 기사의 예에서는 Jingdong Mall을 모방한 왼쪽 메뉴 효과 코드의 jQuery 간단한 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jQuery 플러그인을 기반으로 한 매우 아름다운 왼쪽 메뉴 효과이지만 아직 완벽하지는 않으며 깜박임이 일부 있습니다. 전문가들이 조언을 해주고 수정해 줬으면 좋겠습니다. JD.com 스타일을 모방한 메뉴입니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/
구체적인 코드는 다음과 같습니다.
<!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>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.