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

更新时间：2020-05-12 05:12:02 作者：startmvc

效果图预览一、css实现html代码部分<!DOCTYPEhtml><html><head><metacharset="UTF-8"><

效果图预览

这里写图片描述

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