js,jq,css多方面实现简易下拉菜单功能
时间:2019-03-30
本文章向大家介绍js,jq,css多方面实现简易下拉菜单功能,主要包括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三个方式实现简易下拉菜单的写法,有更好的写法欢迎你的指教。希望大家对脚本之家网站的支持!
- go实现西瓜视频花椒直播等平台智能答题
- 主备切换的准备工作(二) (r7笔记第85天)
- 49. 访问PostgreSQL数据库增删改查 | 厚土Go学习笔记
- Golang中Interface类型详解
- Go语言的网络编程简介
- 一条关于swap争用的报警邮件分析(二)(r8笔记第4天)
- Golang泛型编程初体验
- 厚土Go学习笔记 | 14. switch 的条件写的有点灵活,不过风格还是go的一贯风格
- Go语言·我的性能我做主
- 47. 访问MySql数据库实现增删改查 | 厚土Go学习笔记
- system表空间不足的问题分析(二) (r8笔记第5天)
- golang基于redis lua封装的优先级去重队列
- python基础知识——内置数据结构(元组)
- python基础知识——控制语句
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现水波纹控件的方法
- Android中GridView布局实现整体居中方法示例
- Android SharedPreferences四种操作模式使用详解
- Ubuntu18.04下将 磁盘挂载在某目录下
- Android编程之绘图canvas基本用法示例
- Android 编译出错版本匹配问题解决办法
- Linux(CentOS7)使用 RPM 安装 mysql 8.0.11的教程
- Android Adapter里面嵌套ListView实例详解
- Centos7 安装达梦数据库的教程
- Android开发使用Handler实现图片轮播功能示例
- 简单实现Android刮刮卡效果
- CentOS7.4下 安装JDK1.8的图文教程
- Android Studio中导入JNI生成的.so库的实现方法
- Android实现文件上传和下载倒计时功能的圆形进度条
- 使用Apache ab进行http性能测试