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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php使用curl存储cookie的示例
2014/03/31 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
一百多行python代码实现抢票助手
2018/09/25 Python
利用python求积分的实例
2019/07/03 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
J2EE模式面试题
2016/10/11 面试题
优秀大学生的自我评价
2014/01/16 职场文书
大学校园招聘会感想
2015/08/10 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle