快捷導(dǎo)航

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)下拉菜單效果

更新時(shí)間：2020年11月20日 14:48:14 作者：我是Dreamer啊

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JavaScript（js）網(wǎng)頁(yè)–下拉菜單制作

在網(wǎng)頁(yè)的設(shè)計(jì)中，經(jīng)常會(huì)出現(xiàn)二級(jí)下拉菜單，當(dāng)鼠標(biāo)經(jīng)過時(shí)，顯示二級(jí)菜單，鼠標(biāo)離開時(shí)隱藏。例如新浪網(wǎng)

鼠標(biāo)放到微博、博客或郵箱上面時(shí)，會(huì)出現(xiàn)一個(gè)二級(jí)菜單，鼠標(biāo)離開則隱藏。

設(shè)計(jì)簡(jiǎn)單的下拉菜單欄

<!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="#" >免費(fèi)郵箱</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="#" >博客評(píng)論</a></li>
    <li><a href="#" >來讀提醒</a></li>
   </ul>
  </li>
  <li><a href="#" >微博</a>
   <ul>
    <li><a href="#" >私信</a></li>
    <li><a href="#" >評(píng)論</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++){
   //鼠標(biāo)經(jīng)過，出現(xiàn)下拉菜單
   lis[i].onmouseover=function(){
    this.children[1].style.display='block';
   }
   //鼠標(biāo)離開，隱藏下拉菜單
   lis[i].onmouseout=function(){
    this.children[1].style.display='none';
   }
  }

 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解
這篇文章主要介紹了對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
typescript返回值類型和參數(shù)類型的具體使用
本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
prototype.js簡(jiǎn)單實(shí)現(xiàn)ajax功能示例
這篇文章主要介紹了prototype.js簡(jiǎn)單實(shí)現(xiàn)ajax功能,結(jié)合實(shí)例形式分析了prototype.js前臺(tái)實(shí)現(xiàn)ajax與后臺(tái)struts的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
3種js實(shí)現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實(shí)現(xiàn)string的substring方法，需要的朋友可以參考下
2015-11-11
點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
下面小編就為大家?guī)硪黄c(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
微信小程序dom操作的替代思路實(shí)例分析
這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實(shí)例形式分析了微信小程序通過事件響應(yīng)、動(dòng)態(tài)操作元素屬性來實(shí)現(xiàn)dom操作效果,需要的朋友可以參考下
2018-12-12
在JavaScript中判斷整型的N種方法示例介紹
這篇文章主要介紹了在JavaScript中判斷整型的N種方法,需要的朋友可以參考下
2014-06-06
JS實(shí)現(xiàn)黑客帝國(guó)文字下落效果
看過黑客帝國(guó)的朋友或許都對(duì)開頭的字幕效果很熟悉，自從影片播放以來，網(wǎng)頁(yè)設(shè)計(jì)者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對(duì)我們學(xué)習(xí)研究JS還是挺有幫助的哦，下面跟著小編一起學(xué)習(xí)JS 黑客帝國(guó)文字下落效果吧
2015-09-09
深入了解JavaScript代碼覆蓋
這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個(gè)測(cè)試套件執(zhí)行特定代碼庫(kù)的全面程度。,需要的朋友可以參考下
2019-06-06
如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
這篇文章主要介紹了如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10