JS+CSS相对定位实现的下拉菜单


Posted in Javascript onOctober 06, 2015

本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下:

这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰。

运行效果截图如下:

JS+CSS相对定位实现的下拉菜单

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>非定位CSS+Js下拉菜单</title>
<style>
#menu {
  position: absolute;
  font-family: sans-serif;
  font-size: 9pt;
}
#menu li {
  float: left;
  list-style-type: none;
  width: 102px;
  background-color: skyblue;
  border: 1px solid #0066cc;
  text-indent: 0px;
  margin-left: 3px;
}
#menu li a {
  color: blue;
  text-decoration: none;
  width: 100%;
  display: block;
}
#menu li a:hover {
  color: white;
}
#menu li ul {
  background-color: skyblue;
  margin: 0px;
  padding: 0px;
}
#menu li ul li {
  padding: 0px;
  margin: 0px;
  float: none;
  list-style-type: none;
  width: 100px;
  text-indent: 0px;
  border: none;
}
#menu li ul li a{
  color: black;
  text-decoration: none;
}
#menu li ul li a:hover{
  color: black;
  background-color: aqua;
}</style>
<script language="javascript" type="text/javascript">
var t=false,current;
function SetupMenu() {
  if (!document.getElementsByTagName) return;
  items=document.getElementsByTagName("li");
  for (i=0; i<items.length; i++) {
   if (items[i].className != "menu") continue;
   thelink=findChild(items[i],"A");
   thelink.onmouseover=ShowMenu;
   thelink.onmouseout=StartTimer;
   if (ul=findChild(items[i],"UL")) {
     ul.style.display="none";
     for (j=0; j<ul.childNodes.length; j++) {
      ul.childNodes[j].onmouseover=ResetTimer;
      ul.childNodes[j].onmouseout=StartTimer;
     }
   }
  } 
}
function findChild(obj,tag) {
  cn = obj.childNodes;
  for (k=0; k<cn.length; k++) {
   if (cn[k].nodeName==tag) return cn[k];
  }
  return false;
}
function ShowMenu(e) {
  if (!e) var e = window.event;
  thislink = (e.target) ? e.target: e.srcElement;
  ResetTimer();
  if (current) HideMenu(current);
  thislink = thislink.parentNode;
  current=thislink;
  ul = findChild(thislink,"UL");
  if (!ul) return;
  ul.style.display="block";
}
function HideMenu(thelink) {
  ul = findChild(thelink,"UL");
  if (!ul) return;
  ul.style.display="none";
}
function ResetTimer() {
  if (t) window.clearTimeout(t);
}
function StartTimer() {
  t = window.setTimeout("HideMenu(current)",200);
}
window.onload=SetupMenu;
</script>
</head>
<body>
<h1>Menu Test</h1>
<ul id="menu">
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Products</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Support</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Employment</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Contact Us</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
</ul>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 #Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 #Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 #Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 #Javascript
You might like
基于laravel where的高级使用方法
2019/10/10 PHP
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
详解python UDP 编程
2020/08/24 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
保护环境倡议书100字
2014/05/19 职场文书
保护环境倡议书300字
2014/05/19 职场文书
国防教育标语
2014/10/08 职场文书
铣工实训报告
2014/11/05 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers