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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
js仿360开机效果
Dec 26 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
推荐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与php MySQL 之间的关系
2009/07/17 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
解析yii数据库的增删查改
2013/06/20 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php post换行的方法
2020/02/03 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python BS4库的安装与使用详解
2018/08/08 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python3 pygame实现接小球游戏
2019/05/14 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书