欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年11月20日 14:48:14   作者：我是Dreamer啊  
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

設(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++){
   //鼠標(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>

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

相關(guān)文章

  • 對于防止按鈕重復(fù)點擊的嘗試詳解

    對于防止按鈕重復(fù)點擊的嘗試詳解

    這篇文章主要介紹了對于防止按鈕重復(fù)點擊的嘗試，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • typescript返回值類型和參數(shù)類型的具體使用

    typescript返回值類型和參數(shù)類型的具體使用

    本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • prototype.js簡單實現(xiàn)ajax功能示例

    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種js實現(xiàn)string的substring方法

    這篇文章主要介紹了3種javascript實現(xiàn)string的substring方法，需要的朋友可以參考下
    2015-11-11
  • 點擊按鈕出現(xiàn)60秒倒計時的簡單js代碼(推薦)

    點擊按鈕出現(xiàn)60秒倒計時的簡單js代碼(推薦)

    下面小編就為大家?guī)硪黄c擊按鈕出現(xiàn)60秒倒計時的簡單js代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 微信小程序dom操作的替代思路實例分析

    微信小程序dom操作的替代思路實例分析

    這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實例形式分析了微信小程序通過事件響應(yīng)、動態(tài)操作元素屬性來實現(xiàn)dom操作效果,需要的朋友可以參考下
    2018-12-12
  • 在JavaScript中判斷整型的N種方法示例介紹

    在JavaScript中判斷整型的N種方法示例介紹

    這篇文章主要介紹了在JavaScript中判斷整型的N種方法,需要的朋友可以參考下
    2014-06-06
  • JS實現(xiàn)黑客帝國文字下落效果

    JS實現(xiàn)黑客帝國文字下落效果

    看過黑客帝國的朋友或許都對開頭的字幕效果很熟悉，自從影片播放以來，網(wǎng)頁設(shè)計者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對我們學(xué)習(xí)研究JS還是挺有幫助的哦，下面跟著小編一起學(xué)習(xí)JS 黑客帝國文字下落效果吧
    2015-09-09
  • 深入了解JavaScript代碼覆蓋

    深入了解JavaScript代碼覆蓋

    這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個測試套件執(zhí)行特定代碼庫的全面程度。,需要的朋友可以參考下
    2019-06-06
  • 如何通過JS實現(xiàn)日歷簡單算法

    如何通過JS實現(xiàn)日歷簡單算法

    這篇文章主要介紹了如何通過JS實現(xiàn)日歷簡單算法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10

最新評論