一个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 相关文章推荐
jquery 无限级联菜单案例分享
Mar 26 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
javascript中如何判断类型汇总
May 14 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JS实现轮播图效果
Jan 11 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判断一个数组是否为有序的方法
2015/03/27 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
python中while循环语句用法简单实例
2015/05/07 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python微信操控itchat的方法
2019/05/31 Python
python程序如何进行保存
2020/07/03 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
后勤岗位职责
2013/11/26 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
五年级学生期末评语
2014/12/26 职场文书
学校计划生育责任书
2015/05/09 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
导师鉴定意见
2015/06/05 职场文书
晚会开幕词范文
2016/03/04 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS