JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果
更新時間：2020年11月20日 14:48:14 作者：我是Dreamer啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript（js）網(wǎng)頁–下拉菜單制作
在網(wǎng)頁的設(shè)計中，經(jīng)常會出現(xiàn)二級下拉菜單，當鼠標經(jīng)過時，顯示二級菜單，鼠標離開時隱藏。例如新浪網(wǎng)
鼠標放到微博、博客或郵箱上面時，會出現(xiàn)一個二級菜單，鼠標離開則隱藏。
設(shè)計簡單的下拉菜單欄
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜單</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
div {
width: 1200px;
height: 30px;
margin: 0px auto;
background-color: blanchedalmond;
}
li {
list-style: none;
}
div li {
position: relative;
float: right;
text-align: center;
border: 1px solid black;
line-height: 30px;
width: 80px;
height: 30px;
}
div ul {
position: absolute;
top:30px;
display: none;
}
div ul li{
float: left;
width: 120px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<li><a href="#" >郵箱</a>
<ul>
<li><a href="#" >免費郵箱</a></li>
<li><a href="#" >VIP郵箱</a></li>
<li><a href="#" >企業(yè)郵箱</a></li>
<li><a href="#" >新浪郵箱客戶端</a></li>
</ul>
</li>
<li><a href="#" >博客</a>
<ul>
<li><a href="#" >博客評論</a></li>
<li><a href="#" >來讀提醒</a></li>
</ul>
</li>
<li><a href="#" >微博</a>
<ul>
<li><a href="#" >私信</a></li>
<li><a href="#" >評論</a></li>
<li><a href="#" >@我</a></li>
</ul>
</li>
<li ><a href="#" >登錄</a></li>
</div>
<script>
var div = document.querySelector('div');
var lis = div.children;
for (var i=0;i<lis.length;i++){
//鼠標經(jīng)過，出現(xiàn)下拉菜單
lis[i].onmouseover=function(){
this.children[1].style.display='block';
}
//鼠標離開，隱藏下拉菜單
lis[i].onmouseout=function(){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了對于防止按鈕重復(fù)點擊的嘗試，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
typescript返回值類型和參數(shù)類型的具體使用
本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
prototype.js簡單實現(xiàn)ajax功能示例
這篇文章主要介紹了prototype.js簡單實現(xiàn)ajax功能,結(jié)合實例形式分析了prototype.js前臺實現(xiàn)ajax與后臺struts的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
3種js實現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實現(xiàn)string的substring方法，需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)硪黄c擊按鈕出現(xiàn)60秒倒計時的簡單js代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實例形式分析了微信小程序通過事件響應(yīng)、動態(tài)操作元素屬性來實現(xiàn)dom操作效果,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了在JavaScript中判斷整型的N種方法,需要的朋友可以參考下2014-06-06
看過黑客帝國的朋友或許都對開頭的字幕效果很熟悉，自從影片播放以來，網(wǎng)頁設(shè)計者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對我們學習研究JS還是挺有幫助的哦，下面跟著小編一起學習JS 黑客帝國文字下落效果吧2015-09-09
這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個測試套件執(zhí)行特定代碼庫的全面程度。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何通過JS實現(xiàn)日歷簡單算法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10