javascript实现控制的多级下拉菜单
2015-07-05 11:22
751 查看
最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .navi ul { padding: 0; list-style-type: none; } .navi ul li { text-align: center; float: left; position: relative; width: 200px; background-color: #0F8CFF; } a { color: #086808; text-decoration: none; } .navi ul li a { display: block; border: 1px solid #fff; } .navi ul li ul { display: none; left: 0; } .navi ul li ul li ul{ position: absolute; left:200px; top: 0; } .navi ul li:hover ul a { color: yellow; } </style> <script type="text/javascript"> function showNextMenu(obj){ var nextMenu = obj.getElementsByTagName("ul")[0]; nextMenu.style.display = "block"; } function hideNextMenu(obj){ var nextMenu = obj.getElementsByTagName("ul")[0]; nextMenu.style.display = "none"; } </script> </head> <body> <div class="navi"> <ul > <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"> <a href="javascript:;" >游戏</a> <ul> <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"> <a href="javascript:;" >传奇</a> <ul> <li> <a href="javascript:;" >1</a> </li> <li> <a href="javascript:;" >2</a> </li> <li> <a href="javascript:;" >3</a> </li> </ul> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> </ul> </div> </body> </html>
效果图如下:
以上所述就是本文的全部内容了,希望大家能够喜欢。
您可能感兴趣的文章:
- Javascript动态伸缩+淡出淡入
- JavaScript 下拉菜单实现代码
- 通用的二级菜单代码(css+javascript)
- javascript 静态树菜单实现代码
- javascript仿qq界面的折叠菜单实现代码
- javascript改变position值实现菜单滚动至顶部后固定
- javascript 树形导航菜单实例代码
- JavaScript伸缩的菜单简单示例
- 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
- javascript实现树形菜单的方法
- javascript手风琴下拉菜单实现代码
- javascript伸缩菜单栏实现代码分享
- javascript伸缩型菜单实现代码
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa