一个css与js结合的下拉菜单支持主流浏览器


Posted in Javascript onOctober 08, 2014

首先声明:

本人虽然在web前端岗位干了好多年,但无奈岗位对技术要求不高。html,css用的比较多,JavaScript自己原创的很少,基本都是copy修改,所以自己真正动手写时,发现基础很不牢固,边学习边实践,收获很大。

效果图:

一个css与js结合的下拉菜单支持主流浏览器

不废话了,贴码了

1、css代码

a:link{color:white;text-decoration:none;} 

a:visited{color:white;text-decorative:none;} 

a:hover{color:white;text-decorative:none;} 

a:active{color:white;text-decorative:none;} 

li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;} 

.limouseover{background-color:#0033ff;color:red;} 

.limouseout{background-color:#003366;color:black;} 

li ul{display:none;width:120px;position:absolute;left:0;top:30px;} 

li ul li{margin:0px auto;border-top:1px solid #006699;}

2、JavaScript代码

<script language=javascript> 

function menu(menu1){ 

//鼠标移入移出classname切换和子菜单隐藏、显示切换。 

if (document.getElementById(menu1)){ 

var menu_ul=document.getElementById(menu1); 

if (menu_ul.getElementsByTagName("li").length){ 

var menu_li=menu_ul.getElementsByTagName("li"); 

for (i in menu_li){ 

menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}} 

menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}} 

} 

} 

} 

} 
</script>

3、html代码

<ul id=menu1> 

<li><a href="">首页</a></li> 

<li><a href="">菜单1菜单1</a> 

<ul> 

<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li> 

<li><a href="">子菜单2</a></li> 

</ul> 

</li> 

<li><a href="">菜单2</a> 

<ul> 

<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li> 

<li><a href="">子菜单2</a></li> 

</ul> 

</li> 

</ul>

<script>var menu1=new menu("menu1");</script>

说明:

1、考虑到ul和li页面用的比较多,可以在css前加入#menu1,以对菜单样式进行范围限制。

2、js主要是对鼠标移入和移除事件进行了侦听,对应切换到limouseover和limouseout样式;同时对子菜单的display属性进行更改,达到显示隐藏的功能。

3、同一个页面可以重复调用,不冲突,html代码中的JavaScript代码是调用实例,前面的menu1为任意变量名,括号内的menu1为html页面中的id。

本例的缺点:

1、菜单li的mouseover、mouseout和子菜单li的样式一样,即同一个颜色和字体,没有实现单独设置。

2、由于要兼容Ie6和ie7,所以其中采用position:absolute的同时,增加了left和top属性,top要根据菜单li的整体高度设定。

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 #Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 #Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 #Javascript
javascript学习笔记(八)正则表达式
Oct 08 #Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 #Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 #Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 #Javascript
You might like
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
onpropertypchange
2006/07/01 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python生成验证码实例
2014/08/21 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python科学计算之Pandas详解
2017/01/15 Python
基于python 字符编码的理解
2017/09/02 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python学生信息管理系统(完整版)
2020/04/05 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
详解Python设计模式之策略模式
2020/06/15 Python
python爬取天气数据的实例详解
2020/11/20 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
医学生实习自我鉴定
2013/09/27 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
硕士论文致谢范文
2015/05/14 职场文书
详解Django的MVT设计模式
2021/04/29 Python
解析MySQL索引的作用
2022/03/03 MySQL
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers