摘要：使用了之前的三级下拉菜单 增加了下划线的随机色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &nb
使用了之前的三级下拉菜单 增加了下划线的随机色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
<style type="text/css">
/* 去除默认边距效果 */
*{
margin: 0;
padding: 0;
}
/* 去除a连接效果 */
a{
text-decoration: none;
color: #fff;
}
/* 出去li标签样式 */
li{
list-style: none;
color: #fff;
width: 150px;
height: 50px;
background: #21252B;
line-height: 50px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
/* 设置body背景色 */
body{
background: #282C34;
}
/* 设置div宽度 */
.div1{
width: 800px;
margin: 10px auto;
}
/* 向左浮动 */
.lf{
float: left;
}
/* 左分割线 */
.zfgx{
border-left: 1px solid #fff;
}
/* 清除浮动 */
.clear{
clear: both;
}
/* 相对定位 */
.pr{
position:relative;
}
/* 猫 三级绝对定位 */
.pam{
position: absolute;
top: 2px;
left: 152px;
}
/* 狗 三级绝对定位 */
.pag{
position: absolute;
top: 2px;
left: 152px;
}
.gb{
width: 150px;
height: 2px;
position: absolute;
top: 48px;
z-index: 5;
background: #fff;
}
</style>
<title>三级下拉菜单案例</title>
</head>
<body>
<div>
<ul class="one pr">
<li name="0">首页</li>
<li class="lf zfgx"name="1">介绍</li>
<li class="lf zfgx"name="2">产品
<ul>
<li>猫
<ul class="pam three">
<li>猫粮</li>
<li>玩具</li>
<li>衣服</li>
</ul>
</li>
<li>狗
<ul class="pag three">
<li>狗粮</li>
<li>玩具</li>
<li>衣服</li>
</ul>
</li>
<li>猪</li>
<li>鼠</li>
</ul>
</li>
<li class="lf zfgx"name="3">客服</li>
<li class="lf zfgx"name="4">建议</li>
<div</div>
<div></div>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 隐藏二级菜单
$('.two').hide();
// 隐藏三级菜单
$('.three').hide();
// 鼠标移动上显示二级菜单 移出隐藏
$('.one>li').hover(function(){
$(this).find('.two').show(1000);
},
function(){
$(this).find('.two').hide(500);
}
)
//鼠标移动上显示三级菜单 移出隐藏
$('.two>li').hover(function(){
$(this).find('.three').show(1000);
},
function(){
$(this).find('.three').hide(500);
}
)
//鼠标移上变化效果
$('li').hover(function(){
var r = parseInt(Math.random()*257).toString(16);
var g = parseInt(Math.random()*257).toString(16);
var b= parseInt(Math.random()*257).toString(16);
var col='#'+r+g+b;
$(this).css({'background':'#555A64','color':'#B4D3F0'});
//使用name值 *151来控制下换线位置
var x=parseInt($(this).attr('name'))*151;
$('.gb').stop().animate({left:x+'px'},500).css('background',col);
},
function(){
$(this).css({'background':'#21252B','color':'#fff',});
$('.gb').stop().animate({left:'0px'},500);
}
)
})
</script>
</body>
</html>
代码中内容已经全部掌握 ,不过有些需要琢磨下 逻辑上还不能快速完成 总之还是 慢
批改老师：天蓬老师批改时间：2019-04-04 11:11:14
老师总结：全部掌握了, 不容易, jquery的自定义动画功能还是很强大的, 多做些练习
