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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
jQuery事件用法详解
Oct 06 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 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遍历解析xml字符串的方法
2016/05/05 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
python输出指定月份日历的方法
2015/04/23 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
营业经理岗位职责
2013/11/10 职场文书
工程部经理岗位职责
2015/02/02 职场文书
业务员岗位职责
2015/02/03 职场文书
自主招生英文自荐信
2015/03/25 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
召开会议通知范文
2015/04/15 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python