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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
javascript操作文本框readOnly
May 15 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
django用户登录和注销的实现方法
2018/07/16 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
关于Python作用域自学总结
2019/06/10 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
pytorch实现查看当前学习率
2020/06/24 Python
五年级科学教学反思
2014/02/05 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
物业工程部岗位职责
2015/02/11 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Spring Boot实现文件上传下载
2022/08/14 Java/Android