課程
/前端開發(fā)
/HTML/CSS
/JS實現(xiàn)京東無延遲菜單效果
單單那些目錄就要手打若干小時~~~
2017-06-10
源自:JS實現(xiàn)京東無延遲菜單效果 2-1
正在回答
京東官網(wǎng)歡迎您
ThinkSummer 提問者
<!doctype html>
<html>
?<head>
? <meta charset="UTF-8">
? <meta name="Generator" content="EditPlus?">
? <meta name="Author" content="">
? <meta name="Keywords" content="">
? <meta name="Description" content="">
? <title>menu制作</title>
? <style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
position:relative;
width:200px;
left:50px;
top:50px;
ul{
padding: 15px 0;
margin:9px;
lise-style:0;
background: #6c6669;
color: #fff;
border-right-width: 0;
ul li{
display: block;
line-height: 30px;
padding-left: 15px;
cursor: pointer;
font-size: 14px;
position: relative;
li.active{
background: #FFFF00;
li span:hover{
color:red;
.none{
display:none;
#sub{
width:600px;
position:absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow:5px 0px 5px rgba(0,0,0,.3);
left:200px;
top:0;
box-sizing:border-box;
margin:0;
padding:10px;
.sub_content a{
font-size:12px;
text-decoration:none;
color:#666;
.sub_content dd a{
border:1px solid #e0e0e0;
padding:0 10px;
margin:4px 0;
.sub_content dl{
overflow:hidden;
.sub_content dt{
float:left;
width:70px;
font-weight:bold;
clear:left;
.sub_content dd{
margin-left:5px;
border-top:1px solid #eee;
margin-bottom:5px;
.sub_content dt i{
width:4px;
height:14px;
font:400 9px/14px consolas;
right:5px;
top:5px;
</style>
?</head>
?<body>
? <div>
<ul>
<li date-id="a"><span>
家用電器
</span></li>
<li date-id="b"><span>
手機/運營商/數(shù)碼
<li date-id="c"><span>
電腦/辦公
<li date-id="d"><span>
家具/廚具
</ul>
<div id="sub">
<div id="a" class="sub_content ">
<dl>
<dt><a href="#" >電視<i>></i></a></dt>
<dd><a herf="#">合資企業(yè)</a></dd>
<dd><a herf="#">國民企業(yè)</a></dd>
</dl>
</div>
?</body>
</html>
自己動手敲吧
舉報
JS模擬京東商城無延遲菜單效果,學(xué)習(xí)菜單結(jié)構(gòu)和樣式處理
1 回答老師能把代碼發(fā)給我參考參考嗎?
1 回答為什么會占滿屏幕啊
3 回答跟著老師碼的代碼,顯示效果不一樣,請各位大牛幫忙看看哪出了問題
4 回答列表充滿全屏。
3 回答這個有源碼嗎
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-10-20
京東官網(wǎng)歡迎您
2017-12-13
<!doctype html>
<html>
?<head>
? <meta charset="UTF-8">
? <meta name="Generator" content="EditPlus?">
? <meta name="Author" content="">
? <meta name="Keywords" content="">
? <meta name="Description" content="">
? <title>menu制作</title>
? <style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
position:relative;
width:200px;
left:50px;
top:50px;
}
ul{
padding: 15px 0;
margin:9px;
lise-style:0;
background: #6c6669;
color: #fff;
border-right-width: 0;
}
ul li{
display: block;
line-height: 30px;
padding-left: 15px;
cursor: pointer;
font-size: 14px;
position: relative;
}
li.active{
background: #FFFF00;
}
li span:hover{
color:red;
}
.none{
display:none;
}
#sub{
width:600px;
position:absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow:5px 0px 5px rgba(0,0,0,.3);
left:200px;
top:0;
box-sizing:border-box;
margin:0;
padding:10px;
}
.sub_content a{
font-size:12px;
text-decoration:none;
color:#666;
}
.sub_content dd a{
border:1px solid #e0e0e0;
padding:0 10px;
margin:4px 0;
}
.sub_content dl{
overflow:hidden;
}
.sub_content dt{
float:left;
width:70px;
font-weight:bold;
clear:left;
position:relative;
}
.sub_content dd{
float:left;
margin-left:5px;
border-top:1px solid #eee;
margin-bottom:5px;
}
.sub_content dt i{
width:4px;
height:14px;
font:400 9px/14px consolas;
position:absolute;
right:5px;
top:5px;
}
</style>
?</head>
?<body>
? <div>
<ul>
<li date-id="a"><span>
家用電器
</span></li>
<li date-id="b"><span>
手機/運營商/數(shù)碼
</span></li>
<li date-id="c"><span>
電腦/辦公
</span></li>
<li date-id="d"><span>
家具/廚具
</span></li>
</ul>
<div id="sub">
<div id="a" class="sub_content ">
<dl>
<dt><a href="#" >電視<i>></i></a></dt>
<dd><a herf="#">合資企業(yè)</a></dd>
<dd><a herf="#">國民企業(yè)</a></dd>
</dl>
<dl>
<dt><a href="#" >電視<i>></i></a></dt>
<dd><a herf="#">合資企業(yè)</a></dd>
<dd><a herf="#">國民企業(yè)</a></dd>
</dl>
<dl>
<dt><a href="#" >電視<i>></i></a></dt>
<dd><a herf="#">合資企業(yè)</a></dd>
<dd><a herf="#">國民企業(yè)</a></dd>
</dl>
<dl>
<dt><a href="#" >電視<i>></i></a></dt>
<dd><a herf="#">合資企業(yè)</a></dd>
<dd><a herf="#">國民企業(yè)</a></dd>
</dl>
</div>
</div>
</div>
?</body>
</html>
2017-06-14
自己動手敲吧