這篇文章主要介紹了js怎么制作可以延時(shí)消失的菜單,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
目前創(chuàng)新互聯(lián)建站已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、依蘭網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
具體內(nèi)容如下:
代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style> *{padding:0;margin:0;} ul{list-style:none;} a{text-decoration:none;} #menu{height:200px;border:1px solid #ccc;margin:40px auto;position:relative;} #title{position:absolute;left:0;top:0;height:50px;border:1px solid yellow;background:blue;} #title li{text-align:center;width:80px;height:30px;line-height:30px;float:left;background:#f1f1f1;border-radius:10px;color:#000;font-weight:bold;margin:10px 5px;cursor:pointer;} #subtitle{height:30px;;border:1px solid #ccc;border-radius:10px;position:absolute;top:60px;left:10px;} #subtitle:before{content:'';position:absolute;border-top:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #ccc;border-left:7px solid transparent;top:-16px;left:30px;} #subtitle:after{content:'';position:absolute;border-top:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #fff;border-left:7px solid transparent;top:-15px;left:30px;} #subtitle a{display:inline-block;height:20px;line-height:20px;margin:5px 5px;float:left;} #subtitle a:hover{text-decoration:underline;} </style> <script> window.onload = function () { var title = document.getElementById('title'); var subtitle = document.getElementById('subtitle'); var aA = subtitle.getElementsByTagName('a'); var aLi = title.getElementsByTagName('li'); var arr = [ { title : '首頁', subtitle : ['首頁1','首頁2','首頁3']}, { title : '關(guān)于我們', subtitle : ['關(guān)于我們1','關(guān)于我們2','關(guān)于我們3','關(guān)于我們4','關(guān)于我們5']}, { title : '課程', subtitle : ['課程1','課程2','課程3']}, { title : '新聞', subtitle : ['新聞1','新聞2']}, ]; var timer = null; for ( var i = 0; i < arr.length; i++ ) { var oLi = document.createElement('li'); oLi.innerHTML = arr[i].title; oLi.index = i; oLi.onmouseover = function () { var width = parseInt(getStyle(this,'width')); var marginRight = parseInt(getStyle(this,'marginRight')); clearTimeout(timer); subtitle.innerHTML = ''; createA(this.index); subtitle.style.left = 10 + (width + marginRight) * this.index + 'px'; subtitle.style.display = 'block'; } oLi.onmouseout = function () { timer = setTimeout(function () { subtitle.style.display = 'none'; }, 100); } title.appendChild(oLi); } subtitle.onmouseover = function () { clearTimeout(timer); this.style.display = 'block'; } subtitle.onmouseout = function () { this.style.display = 'none'; } createA(0); function createA(index){ for ( var j = 0; j < arr[index].subtitle.length; j++ ){ var oA = document.createElement('a'); oA.innerHTML = arr[index].subtitle[j]; subtitle.appendChild(oA); } } function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,0)[attr]; } } </script> </head> <body> <div id="menu"> <ul id="title"> </ul> <div id="subtitle"> </div> </div> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js怎么制作可以延時(shí)消失的菜單”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
文章名稱:js怎么制作可以延時(shí)消失的菜單
URL鏈接:http://muchs.cn/article4/johsoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)