加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,496
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

第三款菜单 横二级润滑 竖二级折叠菜单

(2010-04-07 11:51:29)
标签:

杂谈

分类: JS学习班
第三款菜单 <wbr>横二级润滑 <wbr>竖二级折叠菜单

第三款菜单 <wbr>横二级润滑 <wbr>竖二级折叠菜单
<!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=gb2312" />
<title>横二级润滑 竖二级折叠菜单 01</title>
<style type="text/css">
<!--
body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;}
body { font:12px "Arial","宋体";color:#333;background:#FFF;}
a{border:none; text-decoration:none;}
#menu { width:980px; margin:30px auto;}
    #menu dl { padding-left:10px; height:29px;overflow:hidden;}
    #menu dl dd { float:left; padding-right:5px;}
    #menu dl dd a {display:block; padding-left:10px; background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat 0 -61px;}
    #menu dl dd a span {
        display:block;
        color:#630;
        width:50px;
        height:30px;
        text-align:center;
        line-height:34px;
        font-size:14px;
        padding-right:10px;
        background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat right -61px;
        overflow:hidden;
    }
    #menu dl dd a:hover,
    #menu dl dd.ok a {background-position: 0 -91px;}
    #menu dl dd a:hover span,
    #menu dl dd.ok a span { cursor:pointer; font-weight:bold; color:#FFF;background-position: right -91px;}
    
    #menu ol {clear:both; height:30px; background:url("../91/da/c2/3194480/0/menu.jpg") repeat-x 0 0;}
    #menu ol li { float:left;}
    #menu ol li a { color:#FFF; display:block; width:70px; text-align:center; height:30px; line-height:32px; overflow:hidden;}
    #menu ol li a:hover,
    #menu ol li.ok a,
    #menu ol li.ol a{ font-weight:bold; background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat 0 -30px;}
    
    #menu ol li span { width:150px;position:absolute;background-color:#FEFEFE;}
    #menu ol li span h1 {font:12px "宋体"; float:none; display:block; background-color:#E6E6E6;}
    #menu ol li span h1 a,
    #menu ol li.ok span h1 a,
    #menu ol li.ok span ul a{
        color:#333;
        width:148px;
        text-indent:10px;
        height:24px;
        line-height:26px;
        text-align:left;
        font-weight:normal;
        border-top:#FFF 1px solid;
        border-bottom:#A0A0A0 1px solid;
        border-right:#A0A0A0 1px solid;
        background-image:none;
    }
    #menu ol li span h1 a:hover,
    #menu ol li span h1.ok a {color:#930; font-weight:bold; background-image:none; background-color:#D9D9D9;}
    #menu ol li.ok span ul {width:147px; border:#E6E6E6 1px solid; border-top:none;overflow:hidden;}
    #menu ol li.ok span ul a {border:none;}
    #menu ol li.ok span ul a:hover { color:#930; font-weight:bold; text-indent:15px; background-image:none;}
.no,.ol span { display:none;}
-->
</style>
<script language="javascript">
<!--//
function ShowMenu(obj,n){
    var dd = obj.parentNode.getElementsByTagName_r("dd");
    for(var i=0;i<dd.length;i++){dd[i].className = "";}
    dd[n].className = "ok";
    var ol = document.getElementByIdx("menu").getElementsByTagName_r("ol");
    for(var i=0;i<ol.length;i++){ol[i].className = "no";}
    ol[n].className = "";
}
function ShowSpan(obj,n){
    var span = obj.parentNode.getElementsByTagName_r("span");
    for(var i=0;i<span.length;i++){span[i].className = "no";}
    span[n].className = "";
    var li = obj.parentNode.getElementsByTagName_r("li")
    li[n].className = "ok";
    for(var i=0;i<li.length;i++){
        if(i!=n){li[i].className = "";}
        li[i].onmouseout = function(){this.className = "ol";}
    }
}
function ShowUl(obj,n){
    var ul = obj.parentNode.getElementsByTagName_r("ul");
    var h1 = obj.parentNode.getElementsByTagName_r("h1");
    for(var i=0; i<h1.length;i++){
        h1[i].innerHTML = h1[i].innerHTML.replace("-","+");
        h1[i].className = "";
    }
    if(ul[n].className == "no"){
        ul[n].className = "";
        obj.className = "ok";
        obj.innerHTML = obj.innerHTML.replace("+","-");
    }else{
        ul[n].className = "no";
        return;
    }
    for(var i=0; i<ul.length;i++){if(i!=n){ ul[i].className = "no";}}
}
//-->
</script>
</head>
<body>
<div id="menu">
    <dl>
        <dd class="ok" onmouseover="javascript:ShowMenu(this,0);"><a href="javascript:void(0);"><span>菜单A</span></a></dd>
        <dd onmouseover="javascript:ShowMenu(this,1);"><a href="javascript:void(0);"><span>菜单B</span></a></dd>
        <dd onmouseover="javascript:ShowMenu(this,2);"><a href="javascript:void(0);"><span>菜单C</span></a></dd>
    </dl>
    
    <ol>
        <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单A_0</a>
            <span class="no">
                <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_0_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单A_0_0_0</a>
                    <a href="javascript:void(0);">菜单A_0_0_1</a>
                    <a href="javascript:void(0);">菜单A_0_0_2</a>
                    <a href="javascript:void(0);">菜单A_0_0_3</a>
                </ul>
                <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_0_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单A_0_1_0</a>
                    <a href="javascript:void(0);">菜单A_0_1_1</a>
                    <a href="javascript:void(0);">菜单A_0_1_2</a>
                    <a href="javascript:void(0);">菜单A_0_1_3</a>
                </ul>
            </span>
        </li>
    </ol>
    
    <!-- ol 0 End -->
    
    <ol class="no">
        <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单B_0</a>
            <span class="no">
                <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_0_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单B_0_0_0</a>
                    <a href="javascript:void(0);">菜单B_0_0_1</a>
                    <a href="javascript:void(0);">菜单B_0_0_2</a>
                    <a href="javascript:void(0);">菜单B_0_0_3</a>
                </ul>
                <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_0_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单B_0_1_0</a>
                    <a href="javascript:void(0);">菜单B_0_1_1</a>
                    <a href="javascript:void(0);">菜单B_0_1_2</a>
                    <a href="javascript:void(0);">菜单B_0_1_3</a>
                </ul>
            </span>
        </li>
        <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单B_1</a>
            <span class="no">
                <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_1_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单B_1_0_0</a>
                    <a href="javascript:void(0);">菜单B_1_0_1</a>
                    <a href="javascript:void(0);">菜单B_1_0_2</a>
                    <a href="javascript:void(0);">菜单B_1_0_3</a>
                </ul>
                <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_1_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单B_1_1_0</a>
                    <a href="javascript:void(0);">菜单B_1_1_1</a>
                    <a href="javascript:void(0);">菜单B_1_1_2</a>
                    <a href="javascript:void(0);">菜单B_1_1_3</a>
                </ul>
            </span>
        </li>
    </ol>
    
    <!-- ol 1 End -->
    
    <ol class="no">
        <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单C_0</a>
            <span class="no">
                <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_0_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单C_0_0_0</a>
                    <a href="javascript:void(0);">菜单C_0_0_1</a>
                    <a href="javascript:void(0);">菜单C_0_0_2</a>
                    <a href="javascript:void(0);">菜单C_0_0_3</a>
                </ul>
                <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_0_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单C_0_1_0</a>
                    <a href="javascript:void(0);">菜单C_0_1_1</a>
                    <a href="javascript:void(0);">菜单C_0_1_2</a>
                    <a href="javascript:void(0);">菜单C_0_1_3</a>
                </ul>
            </span>
        </li>
        <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单C_1</a>
            <span class="no">
                <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_1_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单C_1_0_0</a>
                    <a href="javascript:void(0);">菜单C_1_0_1</a>
                    <a href="javascript:void(0);">菜单C_1_0_2</a>
                    <a href="javascript:void(0);">菜单C_1_0_3</a>
                </ul>
                <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_1_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单C_1_1_0</a>
                    <a href="javascript:void(0);">菜单C_1_1_1</a>
                    <a href="javascript:void(0);">菜单C_1_1_2</a>
                    <a href="javascript:void(0);">菜单C_1_1_3</a>
                </ul>
            </span>
        </li>
        <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单C_2</a>
            <span class="no">
                <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_2_0</a></h1>
                <ul>
                    <a href="javascript:void(0);">菜单C_2_0_0</a>
                    <a href="javascript:void(0);">菜单C_2_0_1</a>
                    <a href="javascript:void(0);">菜单C_2_0_2</a>
                    <a href="javascript:void(0);">菜单C_2_0_3</a>
                </ul>
                <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_2_1</a></h1>
                <ul class="no">
                    <a href="javascript:void(0);">菜单C_2_1_0</a>
                    <a href="javascript:void(0);">菜单C_2_1_1</a>
                    <a href="javascript:void(0);">菜单C_2_1_2</a>
                    <a href="javascript:void(0);">菜单C_2_1_3</a>
                </ul>
            </span>
        </li>
    </ol>
</div>
</body>
</html>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有