abstract：哎 一直拖了好久,关键是浮动跟定位没有掌握好 ,做完了训练营的作业 ,再回来做这个三级菜单就他感觉轻车熟路了,但是jQuery又给忘光了...... 看了一早晨笔记,可算是有点眉目了 代码先是使用div内部套ul li标签,实现基本页面,然后使用css给元素定义样式,最后使用浮动跟定位,将基本页面完成,前阵子一直卡在这块 耽误了好久,然后使用jquery语言,.h
哎 一直拖了好久,关键是浮动跟定位没有掌握好 ,做完了训练营的作业 ,再回来做这个三级菜单就他感觉轻车熟路了,但是jQuery又给忘光了...... 看了一早晨笔记,可算是有点眉目了
代码先是使用div内部套ul li标签,实现基本页面,然后使用css给元素定义样式,最后使用浮动跟定位,将基本页面完成,前阵子一直卡在这块 耽误了好久,然后使用jquery语言,.hover触发事件,基本功能就完成了
html:
<!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">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
<title>导航条 三级下拉菜单</title>
</head>
<body>
<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(){
$(this).css('background','#111213')
},function(){
$(this).css('background','#21292E')
})
})
</script>
<div>
<ul>
<li class="f ">首页</li>
<li><p>产品</p>
<ul>
<li class="">图书</li>
<li class="">玩具</li>
<li class="">宠物</li>
<li>宠物用品
<ul class="three pa">
<li>狗粮</li>
<li>猫粮</li>
<li>玩具</li>
<li>窝</li>
</ul>
</li>
<li class="">智力开发</li>
</ul>
</li>
<li class="f li_l">新闻</li>
<li class="f li_l">信息</li>
<li class="f li_l">关于我们</li>
</ul>
<div></div>
</div>
</body>
</html>
CSS:
/* 清除边距 */
*{
margin: 0;
padding: 0;
}
/* 去除li标签效果 */
li{
list-style: none;
color: #fff;
}
/* 背景色 */
body{
background: #1C2121;
}
/* 清除浮动 */
.clear
{
clear: both;
}
/* 浮动 */
.f{
float: left;
}
/* 绝对定位 */
.pr{
position: relative;
}
/* 相对定位 */
.pa{
position: absolute;
top:-60px;
left: 120px;
}
/* div设置 */
.box1{
width: 600px;
height: 60px;
margin: 0 auto;
}
/* li标签设置 */
li{
width: 118px;
line-height: 60px;
font-size: 20px;
font-weight:bold;
text-align: center;
background: #21292E;
}
/* 左边框 */
.li_l{
border-left: 1px solid #fff;
}
效果图:
感谢老师
Correcting teacher：查无此人Correction time：2019-03-18 09:30:30
Teacher's summary：js每行语句都增加;号。 做的还不错，做了1，2年，想忘就不容易了。继续加油