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

js,jq,css多方面實現(xiàn)簡易下拉菜單功能

 更新時間：2017年05月13日 15:57:35   作者：404_noEsponse  
這篇文章主要介紹了js,jq,css多方面實現(xiàn)簡易下拉菜單功能,需要的朋友可以參考下

效果圖預(yù)覽

這里寫圖片描述

一 、css實現(xiàn)

html代碼部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>html+css下拉菜單</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>
 <body>
  <ul class="menu">
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a>
    <ul>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a>
    <ul>
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a>
    <ul>
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a>
   </li>
  </ul>
 </body>
</html>

css部分

*{
 padding: 0;
 margin: 0;
}
a{
 text-decoration: none;
 color: #000;
}
ul,li{
 list-style: none;
}
.menu{
 margin: 50px auto;
 width: 500px;
 height: 35px;
 background-color: #ccc;
 text-align: center;
 line-height: 35px;
}
.menu li{
 float: left;
 width: 20%;
 position: relative;
}
.menu li:hover ul{
 display: block;
}
.menu li a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

二、js實現(xiàn)

html和js部分（實現(xiàn)方法一）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>JS下拉菜單</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>
 <body>
  <ul class="menu" id="menu">
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a>
    <ul>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a>
    <ul class="show">
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a>
    <ul class="hide">
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a>
   </li>
  </ul>
  <script type="text/javascript">    
   window.onload = function(){ 
    function $(id){
     return typeof id == "string"?document.getElementById(id):id; 
    }
    var menu_li = $("menu").getElementsByTagName("li");    
    for(var i = 0; i < menu_li.length; i++){
     menu_li[i].onmouseover = function(){
      var ss = this.getElementsByTagName("ul")[0];
      if(ss != undefined){
       ss.style.display = "block";
      }
     }
    }
    for(var j = 0; j < menu_li.length; j++){
     menu_li[j].onmouseout = function(){
      var ssa = this.getElementsByTagName("ul")[0];
      if(ssa != undefined){
       ssa.style.display = "none";
      }     
     }
    }    
   }         
  </script>
 </body>
</html>

html和js部分（實現(xiàn)方法二）

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
   * {
    padding: 0;
    margin: 0;
   }
   li {
    list-style: none;
    float: left;
   }
   #tabCon {
    clear: both;
   }
   #tabCon div {
    display: none;
   }
   #tabCon div.fdiv {
    display: block;
   }
  </style>
 </head>
 <body>
  <div id="tanContainer">
   <div id="tab">
    <ul>
     <li class="fli">標題一</li>
     <li>標題二</li>
     <li>標題三</li>
     <li>標題四</li>
    </ul>
   </div>
   <div id="tabCon">
    <div class="fdiv">內(nèi)容一</div>
    <div>內(nèi)容二</div>
    <div>內(nèi)容三</div>
    <div>內(nèi)容四</div>
   </div>
  </div>
 </body>
 <script>
  function $(id){
   return typeof id=="string"?document.getElementById(id):id;
  }
  var EventUtil = {
   addHandler: function(element, type, handler) {
    if(element.addEventListener) {
     element.addEventListener(type, handler, false);
    } else if(element.attachEvent) {
     element.attachEvent("on" + type + handler);
    } else {
     element["on" + type] = handler;
    }
   },
   removeHandler: function(element, type, handler) {
    if(element.removeEventListener) {
     element.removeEventListener(type, handler, false);
    } else if(element.detachEvent) {
     element.detachEvent("on" + type + handler);
    } else {
     element["on" + type] = null;
    }
   }
  }
  var tabs = $("tab").getElementsByTagName("li");
  var divs = $("tabCon").getElementsByTagName("div"); 
  for(var i = 0; i < tabs.length; i++) {
   var set = function() {
    change(this);
   }
   EventUtil.addHandler(tabs[i], "click", set);
   //tabs[i].onclick=function(){change(this);}
  }
  function change(obj) {
   console.log(obj);
   for(var i = 0; i < tabs.length; i++) {
    if(tabs[i] == obj) {console.log(tabs[i]);
//     tabs[i].style.display = "block";
     divs[i].style.display = "block";
    } else {
//     tabs[i].style.display = "none";
     divs[i].style.display = "none";
    }
   }
  }
 </script>
</html>

css部分

*{
 padding: 0;
 margin: 0;
}
a{
 text-decoration: none;
 color: #000;
}
ul,li{
 list-style: none;
}
.menu{
 margin: 50px auto;
 width: 500px;
 height: 35px;
 background-color: #ccc;
 text-align: center;
 line-height: 35px;
}
.menu li{
 float: left;
 width: 20%;
 position: relative;
}
.menu li a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
 left: 0;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

三、JQ實現(xiàn)

html和jq部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>JS下拉菜單</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>
 <body>
  <ul class="menu" id="menu">
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a>
    <ul>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
     <li>內(nèi)容一</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a>
    <ul class="show">
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
     <li>內(nèi)容二</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a>
    <ul class="hide">
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
     <li>內(nèi)容三</li>
    </ul>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a>
   </li>
  </ul>
  <script type="text/javascript" src="../../jq/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">    
   $(function(){
    $(".menu li").hover(function(){
     $(this).children("ul").show();
    },function(){
     $(this).children("ul").hide();
    });
   });
  </script>
 </body>
</html>

css部分

*{
 padding: 0;
 margin: 0;
}
a{
 text-decoration: none;
 color: #000;
}
ul,li{
 list-style: none;
}
.menu{
 margin: 50px auto;
 width: 500px;
 height: 35px;
 background-color: #ccc;
 text-align: center;
 line-height: 35px;
}
.menu li{
 float: left;
 width: 20%;
 position: relative;
}
.menu li a{
 display: block; 
}
.menu li a:hover{
 background-color: burlywood;
}
.menu li ul{
 display: none;
 position: absolute;
 left: 0;
}
.menu li ul li{
 width: 100%;
 margin-top: 2px;
 background-color: darkgray;
}
.menu li ul li:hover{
 cursor: pointer;
 background-color: chartreuse;
}

以上就是通過css,js,jq三個方式實現(xiàn)簡易下拉菜單的寫法，有更好的寫法歡迎你的指教。希望大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 使用javascript實現(xiàn)判斷當前瀏覽器

    使用javascript實現(xiàn)判斷當前瀏覽器

    這篇文章主要介紹了使用javascript實現(xiàn)判斷當前瀏覽器的類型及版本，雖然不是很全面，但是還是推薦給大家，簡單學(xué)下方法和思路。
    2015-04-04
  • JS this作用域以及GET傳輸值過長的問題解決方法

    JS this作用域以及GET傳輸值過長的問題解決方法

    專IE7瀏覽器，IE URL參數(shù)過長問題，引發(fā)HTTP Status 122報錯；this作用域問題，對應(yīng)的解決方法如下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-08
  • js實現(xiàn)簡單模態(tài)窗口，背景灰顯

    js實現(xiàn)簡單模態(tài)窗口，背景灰顯

    昨天中午做項目需要一個模態(tài)窗口，想起上一個公司的項目經(jīng)理曾經(jīng)做過一個比較牛的模態(tài)窗口，至今沒用搞清楚實現(xiàn)原理，平時也沒有時間去分析，試著自己做了一個，用了一天的時間終于完成了，給大家一起分享， 也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。
    2008-11-11
  • JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)

    JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)

    發(fā)現(xiàn)原來的方法還有是有幾個問題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒有被設(shè)置為水平居中，而是在JS中更改left值使其居中
    2013-09-09
  • 微信小程序計算器實例詳解

    微信小程序計算器實例詳解

    這篇文章主要為大家詳細介紹了微信小程序計算器實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-07-07
  • JS獲得一個對象的所有屬性和方法實例

    JS獲得一個對象的所有屬性和方法實例

    下面小編就為大家?guī)硪黄狫S獲得一個對象的所有屬性和方法實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 文字垂直滾動之javascript代碼

    文字垂直滾動之javascript代碼

    這篇文章主要應(yīng)用javascript代碼實現(xiàn)文字垂直滾動的效果,需要的朋友可以參考下
    2015-07-07
  • Wordpress ThickBox 點擊圖片顯示下一張圖的修改方法

    Wordpress ThickBox 點擊圖片顯示下一張圖的修改方法

    Wordpress自帶的ThickBox特效中，單擊圖片會調(diào)用 tb_remove 以關(guān)閉特效窗口，現(xiàn)將修改其動作為顯示下一張圖。
    2010-12-12
  • 小程序中this.setData的使用和注意事項

    小程序中this.setData的使用和注意事項

    這篇文章主要介紹了微信小程序中this.setData的使用和注意事項,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-08-08
  • JS中video標簽自動播放音視頻并繪制波形圖效果

    JS中video標簽自動播放音視頻并繪制波形圖效果

    html中的<video>標簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下
    2023-09-09

最新評論