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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
微信小程序 跳转传递数据的实例
Jul 06 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
js表头排序实现方法
2015/01/16 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python 获取图片分辨率的方法
2019/01/08 Python
python打开windows应用程序的实例
2019/06/28 Python
python标准库OS模块详解
2020/03/10 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
this关键字的作用
2016/01/30 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
安徽导游词
2015/02/12 职场文书
继续教育个人总结
2015/03/03 职场文书
企业工会工作总结2015
2015/05/13 职场文书
大学学生会辞职信
2015/05/13 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Python利用capstone实现反汇编
2022/04/06 Python