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基础教程之数据类型 (字符串 String)
Jan 18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
vue中v-model动态生成的实例详解
Oct 27 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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 array_walk() 数组函数
2011/07/12 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
python中Genarator函数用法分析
2015/04/08 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
学校安全工作制度
2014/01/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
2014年宣传工作总结
2014/11/18 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年教务工作总结
2015/05/23 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Python学习之异常中的finally使用详解
2022/03/16 Python
java开发双人五子棋游戏
2022/05/06 Java/Android
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers