サマリー：哎 一直拖了好久,關(guān)鍵是浮動跟定位沒有掌握好 ,做完了訓練營的作業(yè) ,再回來做這個三級菜單就他感覺輕車熟路了,但是jQuery又給忘光了...... 看了一早晨筆記,可算是有點眉目了 代碼先是使用div內(nèi)部套ul li標簽,實現(xiàn)基本頁面,然后使用css給元素定義樣式,最后使用浮動跟定位,將基本頁面完成,前陣子一直卡在這塊 耽誤了好久,然后使用jquery語言,.h
哎 一直拖了好久,關(guān)鍵是浮動跟定位沒有掌握好 ,做完了訓練營的作業(yè) ,再回來做這個三級菜單就他感覺輕車熟路了,但是jQuery又給忘光了...... 看了一早晨筆記,可算是有點眉目了
代碼先是使用div內(nèi)部套ul li標簽,實現(xiàn)基本頁面,然后使用css給元素定義樣式,最后使用浮動跟定位,將基本頁面完成,前陣子一直卡在這塊 耽誤了好久,然后使用jquery語言,.hover觸發(fā)事件,基本功能就完成了
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(){
// 基本功能實現(xiàn)
$('.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>產(chǎn)品</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="">智力開發(fā)</li>
</ul>
</li>
<li class="f li_l">新聞</li>
<li class="f li_l">信息</li>
<li class="f li_l">關(guān)于我們</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;
}
效果圖:
感謝老師
添削の先生：查無此人添削時間：2019-03-18 09:30:30
先生のまとめ：js每行語句都增加;號。 做的還不錯，做了1，2年，想忘就不容易了。繼續(xù)加油