javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：2105 次日期：2016-07-19 13:47:47

溫馨提示：易賢網(wǎng)小編為您整理了“javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細介紹了javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

效果圖：

實現(xiàn)代碼：

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

.ul{position:relative;width:200px;height:auto;}

.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}

.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}

.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}

.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}

.ul li div dl dd{float:left; width:100px;}

.ul .liname div{display:block;}

</style>

window.onload=function(){

var aLi=document.getElementsByTagName("li");

for(var i=0;aLi.length>i;i++){

aLi[i].i=i;

aLi[i].onmouseover=function(){

this.className="liname";

var h1=this.i*25;

var h2=this.getElementsByTagName("div")[0].offsetHeight;

if(h2<h1){

this.getElementsByTagName("div")[0].style.top=h1+'px';

}

aLi[i].onmouseout=function(){

this.className="";

}

</script>

</head>

<body>

<li>

<dl>

</dl>

</div>

</li>

<li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

</ul>

</body>

</html>

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

更多信息請查看網(wǎng)絡(luò)編程

上一篇：javascript函數(shù)命名的三種方式及區(qū)別介紹

下一篇：JS中多種方式創(chuàng)建對象詳解

易賢網(wǎng)手機網(wǎng)站地址：javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

最新信息

2025年安寧市公益性崗位招聘公告（第六期）

2025年紅河州元陽縣國有資本運營集團有限公司招聘法務(wù)公告

2025年德宏州芒市工業(yè)信息化和科學(xué)技術(shù)局招聘公益性崗位人員公告

2025年宣威市倘塘鎮(zhèn)中心學(xué)校招聘編制外學(xué)齡前教育有關(guān)輔助人員實施方案

2025年麗江市寧蒗彝族自治縣博物館公益性崗位招聘公告

2025年8月昭通市永善縣人社局招聘城鎮(zhèn)公益性崗位工作人員通告

2025年楚雄州姚安縣人社局招聘城鎮(zhèn)公益性崗位人員公告

2025年昆明市呈貢區(qū)審計局編外合同制審計專員筆試成績及資格復(fù)審安排公告

2025年云南黃金礦業(yè)集團股份有限公司第二次招聘公告

2025年8月昆明市盤龍區(qū)東華街道社區(qū)服務(wù)中心見習(xí)崗位招錄公告

公考類

云南公務(wù)員貴州公務(wù)員四川公務(wù)員廣西公務(wù)員各省公務(wù)員國家公務(wù)員選調(diào)遴選

招聘類

事業(yè)單位教師招聘特崗教師三支一扶志愿者銀行招聘國企招聘

各類考試

學(xué)歷升學(xué) 會計考試職業(yè)資格外語考試醫(yī)學(xué)考試工程考試教師資格

工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號

聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權(quán)所有:易賢網(wǎng)

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合