首页
所有分类
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 相关文章推荐
JavaScript 高级篇之函数 （四）
Apr 07 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
浅谈javascript的分号的使用
May 12 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
菲律宾购物网站(13) 新西兰购物网站(42) 卡塔尔购物网站(3) 波兰购物网站(52) 奥地利购物网站(28) 智利购物网站(5) 斯洛伐克购物网站(7) 沙特阿拉伯购物网站(9) 捷克购物网站(26) 阿联酋购物网站(26)
You might like
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
php实现session共享的实例方法
2019/09/19 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[04:17]DOTA2完美盛典，rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
极简的Python入门指引
2015/04/01 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python实现井字棋小游戏
2020/03/09 Python
python实现梯度下降法
2020/03/24 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
梅西百货官网：Macy’s
2020/08/04 全球购物
2014年会计人员工作总结
2014/12/10 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2016新年慰问信范文
2015/03/25 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
电工生产实习心得体会
2016/01/22 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android