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>
<title>JS实现的简单横向伸展二级菜单_网页代码站(www.webdm.cn)</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>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
</body>
</html>
JS实现的简单横向伸展二级菜单的更多相关文章
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...
- 用js写的简单的下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android学习笔记之横向二级菜单实现
PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图... 这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下 ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 省市联动_简单的Demo,适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- js运动:多div变宽、二级菜单
定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
随机推荐
- Perl爬取铁路违章旅客信息
#! /usr/bin/perl use strict; use Encode qw(encode decode); binmode(STDIN,":encoding(utf8)" ...
- paramiko模块-2
如何用paramiko模块模拟登入服务器,并记录操作日志,起到审计的作用? 各个client ---(连接跳转机)--->(跳转机)------>各自的目标服务器. 目前我们公司的跳转机, ...
- windbg学习----.process
.process 命令指定要用作进程上下文的进程(Set Process Context) .process显示当前进程的EPROCESS,这里显示当前进程为test.exe kd> .proc ...
- IOS系列swift语言之课时六
这节课需要讲的就是协议,方法,委托模式(依赖倒转) 代码刷起中...... // // main.swift // ExAndProtocol // // Created by David on 23 ...
- VS C#开发中WinForm中Setting.settings的作用
.定义 在Settings.settings文件中定义配置字段.把作用范围定义为:User则运行时可更改,Applicatiion则运行时不可更改.可以使用数据网格视图,很方便: .读取配置值 tex ...
- 从零构建一个简单的 Python Web框架
为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...
- tcl学习
variables(变量) 语法:set varname value 例如:set a 5 注意:大小写敏感,任意长度,任意字符 使用之前无需申明 substitution(替换) 1 变量值替换 $ ...
- 字符串截取函数-c语言
1 #include<stdio.h> 2 #include<stdlib.h> 3 4 char* substring(char* ch,int pos,int length ...
- table边框单线的实现方法
1.实现方法一: <table border="0" cellspacing="1" style=" 实现原理:利用table的单元 ...
- 使用NSScanner,将十六进制字符串转十进制
例子: NSString * numStr = [@"0x110" substringFromIndex:2]; unsigned long long result = 0; N ...