js,jq,css多方面实现简易下拉菜单功能

2019-11-19 16:35:14

字体：大中小

来源：转载

供稿：网友

效果图预览

这里写图片描述

一、css实现

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>内容一</li>     <li>内容一</li>     <li>内容一</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>内容二</li>     <li>内容二</li>     <li>内容二</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>内容三</li>     <li>内容三</li>     <li>内容三</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实现

html和js部分（实现方法一）

<!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>内容一</li>     <li>内容一</li>     <li>内容一</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>内容二</li>     <li>内容二</li>     <li>内容二</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>内容三</li>     <li>内容三</li>     <li>内容三</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部分（实现方法二）

<!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">内容一</div>    <div>内容二</div>    <div>内容三</div>    <div>内容四</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实现

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>内容一</li>     <li>内容一</li>     <li>内容一</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>内容二</li>     <li>内容二</li>     <li>内容二</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>内容三</li>     <li>内容三</li>     <li>内容三</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三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教。希望大家对武林网网站的支持！

上一篇：Ext JS 实现建议词模糊动态搜索功能

下一篇：NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解