一个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 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
js转换对象为xml
Feb 17 Javascript
js操作二进制数据方法
Mar 03 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
构建简单的Webmail系统
2006/10/09 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python六大开源框架对比
2015/10/19 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python web基础之加载静态文件实例
2018/03/20 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
报效祖国演讲稿
2014/09/15 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android