首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 13, 2017

效果图预览

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

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

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

- Author -

404_noEsponse

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
javascript操作referer详细解析
Mar 10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 #Javascript
web.js.字符串与正则表达式操作
May 13 #Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 #Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
vue.js 初体验之Chrome 插件开发实录
May 13 #Javascript
JS中cookie的使用及缺点讲解
May 13 #Javascript
欢迎词(65) 创业计划书(312) 证婚词(21) 推荐信(292) 求职信(1029) 演讲稿(869) 岗位职责(1324) 思想汇报(404) 职业生涯规划书(234) 心得体会(660)
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
在服务端进行目录建立、删除，文件上传、删除的过程的php代码
2008/09/10 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
（推荐一个超好的JS函数库）S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
微信小程序（三）：网络请求
2017/01/13 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python实现简单点对点（p2p）聊天
2017/09/13 Python
Django 2.0版本的新特性抢先看！
2018/01/05 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
GWT （Google Web Toolkit）有哪些主要的原件组成？
2015/06/08 面试题
创先争优标语
2014/06/27 职场文书
争先创优心得体会
2014/09/12 职场文书
党员作风建设整改方案
2014/10/27 职场文书
《孙子兵法》：欲成大事者，需读懂这些致胜策略
2019/08/23 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
Python+Tkinter制作专属图形化界面
2022/04/01 Python