一个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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
复制js对象方法(详解)
Jul 08 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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数据库配置文件一般做法分享
2012/07/07 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php常用数组函数实例小结
2016/12/29 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
php查询内存信息操作示例
2019/05/09 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python 12306抢火车票脚本
2018/02/07 Python
Python3实现转换Image图片格式
2018/06/21 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
采购员岗位职责
2013/11/15 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
中国梦口号
2014/06/13 职场文书
国际金融专业自荐信
2014/07/05 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
vue动态绑定style样式
2022/04/20 Vue.js