[封装插件]酒仙网和京东左侧动态菜单栏案例
2024-06-07 17:45:03
酒仙网老式动态菜单栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>老式左侧导航栏</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
*{margin:0;
padding:0;
}/*顶部开始*/
.top_img{width:100%;
text-align: center;
overflow: hidden; /*裁剪父元素,使其不会出现下方滚动框*/
cursor: pointer;
margin-bottom: 50px;
}.top_img-inner{background: yellow;
/* 原始写法
position:absolute;
left:50%;
margin-left:-960px;
*/
/*
margin: 0 -100%
*/
margin: 0 -100%}.warp{height: 34px;
background: #980001;
}.warp .warp_in{height: 500px;
width: 1200px;
margin:0 auto;
/*background: blue;*/
position: relative;
}.warp .warp_in .nav{width: 100%;
height: 34px;
list-style: none;
line-height: 34px;
}.nav_li li{float: left;
/*background:purple;*/
list-style: none;
margin-left: 30px;
color:#fff;
text-align:center;
cursor: pointer;
}.warp .nav li:first-child{background: #cd171f;
width: 150px;
margin:0;
}/*横幅*/
.banner{height: 470px;
background: url("banner1.jpg");
margin-left: -220px;
}/*开始左侧导航栏*/
.warp .menu{width: 1200px;
height: 300px;
/*background:yellow;*/
position: relative;
}.warp .menu ul{width: 150px;
height: 470px;
background: #fff;
}.warp .menu ul li{height: 30px;
line-height: 30px;
list-style: none;
cursor: pointer;
}.warp .menu ul li span{margin-left: 40px;
}.warp .menu .right{width:1050px;
height: 470px;
position: absolute;
top:0;
left:150px;
background: #fdb823;
display: none;
}</style>
</head>
<body>
<!--顶部图片栏-->
<div class="top_img">
<!--顶部图片-->
<img src="top.jpg" class="top_img-inner">
</img>
</div>
<!--横向导航栏-->
<div class="warp">
<div class="warp_in">
<div class="nav">
<ul class="nav_li">
<li>全部商品分类</li>
<li>首页</li>
<li>领券中心</li>
<li>值得买</li>
<li>葡萄酒馆</li>
<li>洋酒馆</li>
<li>酒仙甄选</li>
<li>清仓</li>
<li>新品</li>
<li>CLUB会员</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<span>白酒</span>
<div class="right">
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,</div>
</li>
<li>
<span>葡萄酒</span>
<div class="right">
我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,
我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,
我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,
我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,</div>
</li>
<li>
<span>洋酒</span>
<div class="right">
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,</div>
</li>
<li>
<span>啤酒</span>
<div class="right">
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒,
我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,
我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒,我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,</div>
</li>
<li>
<span>食尚</span>
<div class="right">
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚,我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,
我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,</div>
</li>
</ul>
</div>
</div>
</div>
<!--banner图片和左侧菜单栏-->
<div class="banner">
</div>
<!--占位符-->
<div>
<ul>
<li>
<h1>00000000001</h1>
</li>
<li>
<h1>00000000002</h1>
</li>
<li>
<h1>00000000003</h1>
</li>
<li>
<h1>00000000004</h1>
</li>
<li>
<h1>00000000005</h1>
</li>
<li>
<h1>00000000006</h1>
</li>
<li>
<h1>00000000007</h1>
</li>
<li>
<h1>00000000008</h1>
</li>
<li>
<h1>00000000009</h1>
</li>
<li>
<h1>00000000010</h1>
</li>
<li>
<h1>00000000011</h1>
</li>
<li>
<h1>00000000012</h1>
</li>
<li>
<h1>00000000013</h1>
</li>
<li>
<h1>00000000014</h1>
</li>
<li>
<h1>00000000015</h1>
</li>
<li>
<h1>00000000016</h1>
</li>
<li>
<h1>00000000017</h1>
</li>
<li>
<h1>00000000018</h1>
</li>
<li>
<h1>00000000019</h1>
</li>
<li>
<h1>00000000020</h1>
</li>
<li>
<h1>00000000021</h1>
</li>
<li>
<h1>00000000022</h1>
</li>
<li>
<h1>00000000023</h1>
</li>
<li>
<h1>00000000024</h1>
</li>
<li>
<h1>00000000025</h1>
</li>
<li>
<h1>00000000026</h1>
</li>
<li>
<h1>00000000027</h1>
</li>
<li>
<h1>00000000028</h1>
</li>
<li>
<h1>00000000029</h1>
</li>
<li>
<h1>00000000030</h1>
</li>
</ul>
</div>
<script>
/**
* 思路 :
* 鼠标一移动到 li元素上边 (1):改变其背景色
* (2):改变其li元素下方的div元素显示为block
* 鼠标一移开 li元素 (1):背景色改变为原来的颜色
* (2):下方的div元素显示设置为none
*/
$(".menu li").mouseenter(function(){//鼠标移动到li元素上边,就把li的背景色变为红色,因为div原本就设置有颜色,所以移动到上边不会改变其原本颜色
$(this).css({"background":"red"});
//获取li里的 span元素相对于外部容器的坐标,就可以做出酒仙网那种跟随li元素移动的样式
x = $(this).position().left;
y = $(this).position().top;
//获取完坐标后,把坐标的值 赋值给div块的定位
$(this).find(".right").css({"display":"block","top":y});
//另一种方法是获取li元素的find里边的div元素
// var index = $(this).index();
// $(".menu .right").eq(index).css({"display":"block"});
});
$(".menu li").mouseleave(function(){$(this).css({"background":"#fff"})$(this).find(".right").css({"display":"none"});
// 另一种方式使用索引的方式获取下边的div元素
// var index = $(this).index();
// $(".menu .right").eq(index).css({"display":"none"});
});
//使用hover的方式将更加简单
/**
$(".menu li").hover(
function(){
$(this).css({"background":"red"});
$(this).find(".right").css({"display":"block"});
},
function(){
$(this).css({"background":"#fff"});
$(this).find(".right").css({"display":"none"});
}
);
*/
</script>
</body>
</html>
京东和酒仙网新式左侧导航栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>老式左侧导航栏</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
*{margin:0;
padding:0;
}/*顶部开始*/
.top_img{width:100%;
text-align: center;
overflow: hidden; /*裁剪父元素,使其不会出现下方滚动框*/
cursor: pointer;
margin-bottom: 50px;
}.top_img-inner{background: yellow;
/* 原始写法
position:absolute;
left:50%;
margin-left:-960px;
*/
/*
margin: 0 -100%
*/
margin: 0 -100%}.warp{height: 34px;
background: #980001;
}.warp .warp_in{height: 500px;
width: 1200px;
margin:0 auto;
/*background: blue;*/
position: relative;
}.warp .warp_in .nav{width: 100%;
height: 34px;
list-style: none;
line-height: 34px;
}.nav_li li{float: left;
/*background:purple;*/
list-style: none;
margin-left: 30px;
color:#fff;
text-align:center;
cursor: pointer;
}.warp .nav li:first-child{background: #cd171f;
width: 150px;
margin:0;
}/*横幅*/
.banner{height: 470px;
background: url("banner1.jpg");
margin-left: -220px;
}/*开始左侧导航栏*/
.warp .menu{width: 1200px;
height: 300px;
/*background:yellow;*/
position: relative;
}.warp .menu ul{width: 150px;
height: 470px;
background: #fff;
}.warp .menu ul li{height: 30px;
line-height: 30px;
list-style: none;
cursor: pointer;
}.warp .menu ul li span{margin-left: 40px;
}.warp .menu .right{width:1050px;
height: 470px;
position: absolute;
top:0;
left:150px;
background: #fdb823;
display: none;
}</style>
</head>
<body>
<!--顶部图片栏-->
<div class="top_img">
<!--顶部图片-->
<img src="top.jpg" class="top_img-inner">
</img>
</div>
<!--横向导航栏-->
<div class="warp">
<div class="warp_in">
<div class="nav">
<ul class="nav_li">
<li>全部商品分类</li>
<li>首页</li>
<li>领券中心</li>
<li>值得买</li>
<li>葡萄酒馆</li>
<li>洋酒馆</li>
<li>酒仙甄选</li>
<li>清仓</li>
<li>新品</li>
<li>CLUB会员</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<span>白酒</span>
<div class="right">
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,</div>
</li>
<li>
<span>葡萄酒</span>
<div class="right">
我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,
我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,
我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,
我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,</div>
</li>
<li>
<span>洋酒</span>
<div class="right">
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,</div>
</li>
<li>
<span>啤酒</span>
<div class="right">
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,</div>
</li>
<li>
<span>食尚</span>
<div class="right">
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,</div>
</li>
</ul>
</div>
</div>
</div>
<!--banner图片和左侧菜单栏-->
<div class="banner">
</div>
<!--占位符-->
<div>
<ul>
<li>
<h1>00000000001</h1>
</li>
<li>
<h1>00000000002</h1>
</li>
<li>
<h1>00000000003</h1>
</li>
<li>
<h1>00000000004</h1>
</li>
<li>
<h1>00000000005</h1>
</li>
<li>
<h1>00000000006</h1>
</li>
<li>
<h1>00000000007</h1>
</li>
<li>
<h1>00000000008</h1>
</li>
<li>
<h1>00000000009</h1>
</li>
<li>
<h1>00000000010</h1>
</li>
<li>
<h1>00000000011</h1>
</li>
<li>
<h1>00000000012</h1>
</li>
<li>
<h1>00000000013</h1>
</li>
<li>
<h1>00000000014</h1>
</li>
<li>
<h1>00000000015</h1>
</li>
<li>
<h1>00000000016</h1>
</li>
<li>
<h1>00000000017</h1>
</li>
<li>
<h1>00000000018</h1>
</li>
<li>
<h1>00000000019</h1>
</li>
<li>
<h1>00000000020</h1>
</li>
<li>
<h1>00000000021</h1>
</li>
<li>
<h1>00000000022</h1>
</li>
<li>
<h1>00000000023</h1>
</li>
<li>
<h1>00000000024</h1>
</li>
<li>
<h1>00000000025</h1>
</li>
<li>
<h1>00000000026</h1>
</li>
<li>
<h1>00000000027</h1>
</li>
<li>
<h1>00000000028</h1>
</li>
<li>
<h1>00000000029</h1>
</li>
<li>
<h1>00000000030</h1>
</li>
</ul>
</div>
<script>
/**
* 思路 :
* 鼠标一移动到 li元素上边 (1):改变其背景色
* (2):改变其li元素下方的div元素显示为block
* 鼠标一移开 li元素 (1):背景色改变为原来的颜色
* (2):下方的div元素显示设置为none
*/
$(".menu li").hover(function(){$(this).css({"background":"red"});
$(this).find(".right").css({"display":"block"});
},
function(){$(this).css({"background":"#fff"});
$(this).find(".right").css({"display":"none"});
});
</script>
</body>
</html>
第三种方式:点击出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新式左侧导航栏</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
*{margin:0;
padding:0;
}/*顶部开始*/
.top_img{width:100%;
text-align: center;
overflow: hidden; /*裁剪父元素,使其不会出现下方滚动框*/
cursor: pointer;
margin-bottom: 50px;
}.top_img-inner{background: yellow;
/* 原始写法
position:absolute;
left:50%;
margin-left:-960px;
*/
/*
margin: 0 -100%
*/
margin: 0 -100%}.warp{height: 34px;
background: #980001;
}.warp .warp_in{height: 500px;
width: 1200px;
margin:0 auto;
/*background: blue;*/
position: relative;
}.warp .warp_in .nav{width: 100%;
height: 34px;
list-style: none;
line-height: 34px;
}.nav_li li{float: left;
/*background:purple;*/
list-style: none;
margin-left: 30px;
color:#fff;
text-align:center;
cursor: pointer;
}.warp .nav li:first-child{background: #cd171f;
width: 150px;
margin:0;
}/*横幅*/
.banner{height: 470px;
background: url("banner1.jpg");
margin-left: -220px;
}/*开始左侧导航栏*/
.warp .menu{width: 1200px;
height: 300px;
/*background:yellow;*/
position: relative;
}.warp .menu ul{width: 150px;
height: 470px;
background: #fff;
}.warp .menu ul li{height: 30px;
line-height: 30px;
list-style: none;
cursor: pointer;
}.warp .menu ul li:hover{background: red;
}.warp .menu ul li span{margin-left: 40px;
}.warp .menu .right{width:1050px;
height: 470px;
position: absolute;
top:0;
left:150px;
background: #fdb823;
display: none;
}</style>
</head>
<body>
<!--顶部图片栏-->
<div class="top_img">
<!--顶部图片-->
<img src="top.jpg" class="top_img-inner">
</img>
</div>
<!--横向导航栏-->
<div class="warp">
<div class="warp_in">
<div class="nav">
<ul class="nav_li">
<li>全部商品分类</li>
<li>首页</li>
<li>领券中心</li>
<li>值得买</li>
<li>葡萄酒馆</li>
<li>洋酒馆</li>
<li>酒仙甄选</li>
<li>清仓</li>
<li>新品</li>
<li>CLUB会员</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<span>白酒</span>
<div class="right">
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,
我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒,我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,
我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,
我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,我是白酒,我是白酒,我是白酒,我是白酒, 我是白酒,我是白酒,</div>
</li>
<li>
<span>葡萄酒</span>
<div class="right">
我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,我是葡萄酒, 我是葡萄酒,我是葡萄酒,我是葡萄酒,
我是葡萄酒,我是葡萄酒,</div>
</li>
<li>
<span>洋酒</span>
<div class="right">
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,
我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒,
我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,
我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,
我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,我是洋酒,
我是洋酒,我是洋酒,我是洋酒, 我是洋酒,我是洋酒,</div>
</li>
<li>
<span>啤酒</span>
<div class="right">
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,
我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒,我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,
我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,
我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,我是啤酒,
我是啤酒,我是啤酒,我是啤酒, 我是啤酒,我是啤酒,</div>
</li>
<li>
<span>食尚</span>
<div class="right">
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,
我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚,
我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,
我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,
我是食尚,我是食尚, 我是食尚,我是食尚,我是食尚, 我是食尚,我是食尚,</div>
</li>
</ul>
</div>
</div>
</div>
<!--banner图片和左侧菜单栏-->
<div class="banner">
</div>
<!--占位符-->
<div>
<ul>
<li>
<h1>00000000001</h1>
</li>
<li>
<h1>00000000002</h1>
</li>
<li>
<h1>00000000003</h1>
</li>
<li>
<h1>00000000004</h1>
</li>
<li>
<h1>00000000005</h1>
</li>
<li>
<h1>00000000006</h1>
</li>
<li>
<h1>00000000007</h1>
</li>
<li>
<h1>00000000008</h1>
</li>
<li>
<h1>00000000009</h1>
</li>
<li>
<h1>00000000010</h1>
</li>
<li>
<h1>00000000011</h1>
</li>
<li>
<h1>00000000012</h1>
</li>
<li>
<h1>00000000013</h1>
</li>
<li>
<h1>00000000014</h1>
</li>
<li>
<h1>00000000015</h1>
</li>
<li>
<h1>00000000016</h1>
</li>
<li>
<h1>00000000017</h1>
</li>
<li>
<h1>00000000018</h1>
</li>
<li>
<h1>00000000019</h1>
</li>
<li>
<h1>00000000020</h1>
</li>
<li>
<h1>00000000021</h1>
</li>
<li>
<h1>00000000022</h1>
</li>
<li>
<h1>00000000023</h1>
</li>
<li>
<h1>00000000024</h1>
</li>
<li>
<h1>00000000025</h1>
</li>
<li>
<h1>00000000026</h1>
</li>
<li>
<h1>00000000027</h1>
</li>
<li>
<h1>00000000028</h1>
</li>
<li>
<h1>00000000029</h1>
</li>
<li>
<h1>00000000030</h1>
</li>
</ul>
</div>
<script>
/**
* 思路 :
* 鼠标一移动到 li元素上边 (1):改变其背景色
* (2):改变其li元素下方的div元素显示为block
* 鼠标一移开 li元素 (1):背景色改变为原来的颜色
* (2):下方的div元素显示设置为none
*/
$(".menu li").click(function(){
// $(this).find(".right").toggle();
$(this).find(".right").css({"display":"block"});
$(".right").not($(this).find(".right")).css({"display":"none"});
});
</script>
</body>
</html>
[封装插件]酒仙网和京东左侧动态菜单栏案例相关推荐
- 从1.0到4.0，酒类新零售还能跑出几个1919和酒仙网？
酒文化在中华文化历史中占比可谓不低,<诗经·小雅·吉日>中就有"以御宾客,且以酌醴"的描写,描写了酒品作为待客用品的使用地位.而后无论是"痛饮狂歌" ...
- WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习 课程介绍 WEB前端项目实战/酒仙网开发 课程收益 WEB前端项目实战/酒仙网开发 讲师介绍 李强强 更多讲师课程 ...
- jquery-9 京东和酒仙网左侧导航如何实现
jquery-9 京东和酒仙网左侧导航如何实现 一.总结 一句话总结:布局的话多用定位,由底往上一层层的来布. 1.如何实现导航向div的平滑滑动? 右侧div和左侧的li一定要放在一起 127 &l ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- c语言欧几里得算法求素数,jrs直播(无插件) -官网
题目: 最近完成的一个项目是参加第九届英特尔杯的参赛作品. 这个参赛作品的名称叫做Training4Fun,是一个台球综合训练jrs直播(无插件) -官网系统.我们的选题动机:台球辅助训练缺乏.我们可 ...
- 【SDCC 2016】蘑菇街、华为、阿里巴巴、58到家、同程旅游、链家网、京东的架构变迁与技术演进...
[CSDN现场报道]2016年11月18日-20日,由CSDN重磅打造的年终技术盛会 -- "2016中国软件开发者大会"(Software Developer Conferenc ...
- 数据、运营相关试题（二）【牛客网：京东2019春招产品运营类试卷】
试题来源:牛客网 试题答案仅供参考.其中前半部分偏向产品运营类试题,后半部分偏向综合测试类试题. 数据.运营相关内容,一起好好学习,天天向上吧! 数据.运营相关案例问答题(一)[牛客网:数据分析试题广 ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
2019独角兽企业重金招聘Python工程师标准>>> 仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特 ...
- Chrome插件：网易云音乐听歌识曲
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
最新文章
- iOS动画：UIView动画和CALayer动画（CABasicAnimation、CAKeyframeAnimation的使用）
- 函数参数的传递问题（一级指针和二级指针）
- 【网络流24题】星际转移问题（最大流）
- git clone 指定分支的内容
- 关于Spring AOP，除了动态代理、CGLIB，你还知道什么？
- 信息学奥赛一本通 2055：【例3.5】收费
- PyTorch 1.0 中文官方教程：词嵌入：编码形式的词汇语义
- 毕业5年，我把前后端好的书籍整理了一下，希望能帮到你（建议收藏）
- 大华GigE工业相机VS2022+GigeVison SDK配置
- 基于FPGA的OV5640摄像头驱动
- 相似图片搜索——感知哈希算法
- SVN服务器搭建和使用
- 在虚拟机里安装windows
- 如何让手机自带路由器，24小时wifi跟着你！知道后你就是大神！
- 特斯拉DTC运营解读
- python 游戏(记忆拼图Memory_Puzzle)
- PHP 版 微信小程序商城 源码和搭建
- 币圈的8大女神都是谁？-千氪
- Detours库APIHook演示抓取微信界面绘制文字函数
- 深度至尊GHOST_XPSP3快速装机专业版V8.0