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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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在Web开发领域的优势
2006/10/09 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
Linux常见面试题
2013/03/18 面试题
公司离职证明标准范本
2014/10/05 职场文书
委托培训协议书
2014/11/17 职场文书
同学聚会感言一句话
2015/07/30 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python