首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网络编程 / JavaScript 阅读数： 1984
收藏 0 赞 0 分享

效果图预览

这里写图片描述

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

更多精彩内容其他人还在看

jQuery 行级解析读取XML文件（附源码）

项目中应用jQuery解析读取XML语言配置文件来实现语言的调度。这是jQuery解析读取XML文件功能的测试源码，现拿出来分享。
收藏 0 赞 0 分享

JS 文件本身编码转换 图文教程

JS编码转换，这句话本身就是一句具有二重义的话。通常理解为JS文件里能转换编码的代码，但是，我所碰到的问题并不是这样的，是要解决JS文件本身的编码问题，它是UTF-8编码的还是ANSI编码的？
收藏 0 赞 0 分享

jQuery Ajax之$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或者是后面要讲解到的$.ajax方法）。
收藏 0 赞 0 分享

jQuery Ajax之load()方法

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是laod()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。
收藏 0 赞 0 分享

JavaScript 核心参考教程 内置对象

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
收藏 0 赞 0 分享

JavaScript 核心参考教程 RegExp对象

JavaScript 核心参考教程RegExp对象,学习正则表达式的朋友可以参考下。
收藏 0 赞 0 分享

javascript hashtable实现代码

javascript中没有像c#,java那样的哈希表(hashtable), 然而，javascript中的Array也只有一些类似于'哈希表'的非常简单功能。
收藏 0 赞 0 分享

百度留言本js 大家可以参考下

百度留言本js 大家可以参考下。
收藏 0 赞 0 分享

javascript 判断某年某月有多少天的实现代码 推荐

以前写网页的时候，经常碰到选择日期的问题，其实就是判断某年某月有多少天。
收藏 0 赞 0 分享

让iframe子窗体取父窗体地址栏参数(querystring)

突然用到，记录一下，对地址栏字符串用正则处理最好，有时间研究一下。 主要是思路。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22