<!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实现的简单横向伸展二级菜单的更多相关文章

  1. 第十五篇 JS 移入移出事件 模拟一个二级菜单

    JS 移入移出事件 模拟一个二级菜单   老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...

  2. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  3. 用js写的简单的下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Android学习笔记之横向二级菜单实现

    PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图...   这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下 ...

  5. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  6. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  7. js运动：多div变宽、二级菜单

    定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...

  8. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  9. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

随机推荐

  1. JMS介绍【转载】

    什么是JMS JMS(Java Message Service) 即Java消息服务.它提供标准的产生.发送.接收消息的接口简化企业 应用的开发.它是J2EE规范的一部分,定义的接口标准,针对不同的厂 ...

  2. mvc 导入excel表格

    <script> $(function () { $("#Attachment").change(function () { var att = $("#At ...

  3. Net分布式系统之一：系统整体框架介绍

    一.设计目的 从事.Net平台开发系统已有8年多了,一直思考搭建.Net分布式系统架构.基于window平台搭建的大型分布式系统不多,之前了解过myspace.stackoverflow等大型网站.搭 ...

  4. Acadia Lab 6 轮盘游戏机

    WRTnode 肯定不是亲生的... 果断转投Acadia —.— 不是国军不给力,奈何共军有高达 为啥不转树莓派?因为选做实验肯定有很多人用树莓派做...我抢不过他们,只能挑点冷门的蹭分_(:з」 ...

  5. java.util.regex.PatternSyntaxException: Dangling meta character '*' near index 0

    使用repalceAll 方法出现java.util.regex.PatternSyntaxException: Dangling meta character '*' near index 0异常 ...

  6. U-Mail邮件网关提醒：谨防像素图片钓鱼窃密

    垃圾邮件和病毒的日益猖獗,既因为邮件在商务往来中扮演着越来越重要的角色,也因为犯罪成本低收益高.近年来,不少为非作歹者致力于通过邮件诈骗牟利,想出了种种奇思妙计,导致相关服务商在安全领域逐年加大研发投 ...

  7. XdbxAnalysis

    Tree: TXdbxAnalysis; FDataStream: TMemoryStream; {FDataStream:= TMemoryStream.Create;    FDataStream ...

  8. cocos2dx中常见设计模式

    1.单例设计模式:导演类 2.观察者模式: 被观察者含有一个数组,里边存放了所有观察者的引用,在被观察者的状态发生改变的时候,通过调用观察者的函数来通知观察者,实现了信息的传递.  事件监听器:就是采 ...

  9. java的Iterator源码浅析

    在java的集合中,List接口继承Collection接口,AbstractList类实现了List接口,在AbstractList中的内部类Itr实现了Iterator接口 ArrayList实现 ...

  10. redis 的消息发布订阅

    redis支持pub/sub功能(可以用于消息服务器),这个功能类似mq,这里做一个简单的介绍 Pub/Sub Pub/Sub 从字面上理解就是发布(Publish)与订阅(Subscribe),在R ...