溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js怎么制作可以延時消失的菜單，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下：
代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</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 : '關于我們', subtitle : ['關于我們1','關于我們2','關于我們3','關于我們4','關于我們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>感謝你能夠認真閱讀完這篇文章，希望小編分享的“js怎么制作可以延時消失的菜單”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
