正文
Jquery学习笔记（8）--京东导航菜单（2）增加弹框
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
margin: 0;
}
#head img{
position: absolute;
left: 50%;
margin-left:-595px;
}
#head{
position: relative;
width: 100%;
height: 80px;
background-color: #f00;
}
.clear{
clear: both;
}
#nav li{
list-style: none;
float: left;
border: 1px solid #000;
font-family: 微软雅黑;
font-weight: bold;
cursor: pointer;
margin-left: 10px; }
#nav{
margin-left: 200px;
}
#left li{
list-style: none;
margin-top: 0px;
border: 1px solid #000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
font-family: 微软雅黑;
color: #fff;
} #left ul{
background-color: #888;
width: 190px;
height: 480px;
margin-left: 50px;
margin-top: 10px;
padding-top: 10px;
padding-left: 0px;
}
#left span{
cursor: pointer;
}
#left{
float: left;
position: relative; }
#images{
margin-left: 10px;
float: left;
position: relative; }
#largeImg{
/*margin-left: 10px;*/
margin-top: 10px;
}
#smallImg{
margin-top: 10px;
/*margin-left: 10px;*/ }
#welcom{
width: 190px;
height: 480px;
background-color: #00f;
margin-top: 10px;
margin-left: 10px;
float: left;
position: relative; }
#main{
position: relative;
/*position: absolute;*/
left: 50%;
margin-left: -595px; }
.right{
position: absolute;
top: 10px;
width: 800px;
height: 480px;
margin-left: 180px;
margin-top: 0px;
border: 1px solid #000;
z-index: 3;
color: #000;
background-color: #eee;
display: none;
}
</style>
</head>
<body>
<!-- 广告 -->
<div id="head"><img src="head.jpg"></div>
<!-- main把三个div合到一起 -->
<div id="main">
<!-- 上侧导航 -->
<div id="nav">
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>闪购</li>
<li>拍卖</li>
</ul>
</div>
<div class="clear"></div>
<!-- 左侧导航 -->
<div id="left">
<ul>
<li><span>家用电器</span>
<div class="right">
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
</div>
</li>
<li><span>手机/数码</span>
<div class="right">
<div>手机/对讲机/数码相机</div>
</div>
</li>
<li><span>男装/女装</span>
<div class="right">
<div>羽绒服/棉服/羊毛衫</div>
</div>
</li>
<li><span>电脑/办公</span>
<div class="right">
<div>笔记本/平板/显示器</div>
</div>
</li>
</ul>
</div>
<!-- 右侧广告 -->
<div id="images">
<div id="largeImg">
<img src="1.jpg" alt="">
</div>
<!-- <div class="clear"></div> -->
<div id="smallImg">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
</div>
</div>
<!-- 最右侧充话费 -->
<div id="welcom">
<div>注册</div>
<div>登录</div>
</div>
</div> </body>
<script>
$('#nav li').hover(
function(){
$(this).css({"color":"#f00"});
},
function(){
$(this).css({"color":"#000"});
}
);
$('#left li').hover(
function(){
$(this).css({"background-color":"#ddd"});
$(this).children('.right').show(); },
function(){
$(this).css({"background-color":"#888"});
$(this).children('.right').hide(); }
);
$('#left span').hover(
function(){
$(this).css({"color":"#f00"}); },
function(){
$(this).css({"color":"#fff"}); }
); </script>
</html>
