js实现横向伸展开的二级导航菜单代码


Posted in Javascript onAugust 28, 2015

本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下:

这是一款js实现的横向伸展开二级导航菜单,鼠标放在一级菜单的第四个菜单项上,就能展开二级的菜单,菜单没有过多美化,只是一般的修饰,使用的朋友可根据您自己的网站风格重新美化菜单风格。

运行效果截图如下:

js实现横向伸展开的二级导航菜单代码

在线演示地址如下:

具体代码如下:

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>横向伸展开来的二级导航菜单</title>
 <style type="text/css">
  .suckerdiv { }
  .suckerdiv ul { width: 120px; position: relative; }
  .suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }
   /*All subsequent sub menu levels offset */
  .suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }
   /* menu links style */
  .suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; }
  .suckerdiv ul li a:visited { color: black; }
  .suckerdiv ul li a:hover{ color: white; background-color: #97c839; }
  .suckerdiv .subfolderstyle { }
  .suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
 </style>
</head>
<body>
<script type="text/javascript">
 var menuids = ["suckertree1"]
 function buildsubmenus() {
  for (var i = 0; i < menuids.length; i++) {
   var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
   for (var t = 0; t < ultags.length; t++) {
    ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
    ultags[t].parentNode.onmouseover = function () {
     this.getElementsByTagName("ul")[0].style.display = "block";
     this.firstChild.style.backgroundColor = 'green';
    }
    ultags[t].parentNode.onmouseout = function () {
     this.getElementsByTagName("ul")[0].style.display = "none"
     this.firstChild.style.backgroundColor = '';
    }
   }
  }
 }
 if (window.addEventListener)
  window.addEventListener("load", buildsubmenus, false)
 else if (window.attachEvent)
  window.attachEvent("onload", buildsubmenus)
</script>
<div class="suckerdiv">
 <ul id="suckertree1">
  <li><a href="#">腾讯新闻</a></li>
  <li><a href="#">腾讯汽车</a></li>
  <li><a href="#">腾讯科技</a></li>
  <li><a href="#">腾讯手机</a>
   <ul>
    <li><a href="#">HTC</a></li>
    <li><a href="#">联想</a></li>
    <li><a href="#">华为</a></li>
    <li><a href="#">中兴</a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 #Javascript
jQuery表单验证功能实例
Aug 28 #Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 #Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 #Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 #Javascript
jquery图片滚动放大代码分享(2)
Aug 28 #Javascript
You might like
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python属于解释型语言么
2020/06/15 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
运动会通讯稿50字
2014/01/30 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
教师一岗双责责任书
2014/04/16 职场文书
芙蓉镇观后感
2015/06/10 职场文书