Fatal编程技术网
  • css/
  • CSS手风琴/树菜单，带100%宽度分隔符

CSS手风琴/树菜单，带100%宽度分隔符

css tree

CSS手风琴/树菜单，带100%宽度分隔符,css,tree,accordion,Css,Tree,Accordion,我想创建一个CSS/JS手风琴菜单，HTML如下： <ul> <li><a href="#">First Link</a> <ul> <li><a href="#">Child One</a></li> <li><a href="#">Child Two</a></li>

我想创建一个CSS/JS手风琴菜单，HTML如下：

<ul>
    <li><a href="#">First Link</a>
        <ul>
            <li><a href="#">Child One</a></li>
            <li><a href="#">Child Two</a></li>
        </ul>
    </li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
</ul>

    

  • 

      

    • 

    • 

    

    • 

  • 

  •
导航结构可以有N个级别的深度，每个子菜单将从其父菜单缩进。我希望在所有导航元素（包括第n级子元素）之间有一个跨越100%宽度的边框。像这样：

在我的一生中，如果不使用JavaScript，我无法找到一种简单的方法来实现这一点，但我觉得这应该是可能的。（我将使用JS展开/折叠导航树）

分隔行的平铺背景图像与调整大小并不矛盾（至少在使用sane CSS渲染器时不应该如此）。

这对于我的口味来说是相当草率的，但基本上它需要
文本缩进
而不是
填充
或
边距
来实现嵌套。但随后要使用精灵图像作为


    

  • 

  • 

      

    • 

        

      • 

      • 

      

      • 

    • 

    

    • 




  • 

  • 


    
但老实说，也许您更愿意只使用背景图像，并在调整文本大小时使其看起来丑陋/破损。css对于我的口味来说有点“黑客”，尤其是由于
    锚定
    和
    li
    必须是兄弟姐妹而需要的所有填充补偿
    
我已经在Firefox 3.5、Safari 4和Opera 9.6中对此进行了测试。我现在没有其他途径，所以它可能不太好看
    
不用说，在所有IE版本中可能都是彻底的失败。对不起…这只是我自己的小测试，看看我是否能胜任这项任务
    

    编辑：它可以用于页面缩放和文本大小调整，但同样，IE支持（？）。
    您需要在
    

    a{文本装饰：无；}
ul{宽度：240px；填充：0；列表样式：无；边框顶部：1px实心#000；}
ul，ul{边框顶部：0；}
LIA{边框底部：1px实心#000；显示：块；左填充：0px；}
LiLiA{左填充：40px；}
li{左填充：80px；}

      

    • 

        

      • 

      • 

          

        • 

        • 

        

        • 

      

      • 

    • 

    • 

    

    我曾考虑对分隔行使用平铺bg图像，但随后无法调整文本大小（据我所知…）我想他是说，在纯文本缩放上，效果会中断，因为图像不会缩放。当然，页面缩放不会显示任何问题。

    <html>
<head>    
    <style>
        body {font: normal 11px Arial;}

        a:link, a:visited {color: #888; text-decoration: none;}
        a:hover, a:active {color: #000; text-decoration: none;}

        div {width: 250px; border-top: 1px solid #888; overflow: hidden;}

        ul {
            width: 100%;
            margin: 0; padding: 0;
            list-style-type: none;
        }

        li {
            padding: 5px 0;
            border-bottom: 1px solid #888;
        }

        li a {
            display: block;
        }

        .two_deep li a {
            padding-left: 25px;
        }

        .three_deep li a {
            padding-left: 50px;
        }

        .four_deep li a {
            padding-left: 75px;
        }

        .expanded {
            display: block;
            width: 100%;
            border-bottom: 1px solid #888;
            margin: -5px 0 5px;
            padding: 5px 0;
        }

        li > ul {margin: -5px 0 -6px;}
    </style>
</head>
<body>
    <div>
    <ul>
        <li><a class="expanded" href="#">First Link</a>
            <ul class="two_deep">
                <li><a href="#">Child One</a></li>
                <li>
                    <a class="expanded" href="#">Child Two</a>
                    <ul class="three_deep">
                        <li>
                            <a class="expanded" href="#">Child One of Child Two</a>
                            <ul class="four_deep">
                                <li><a href="#">Child One of . . .</a></li>
                                <li><a href="#">Child Two of . . .</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Child Two of Child Two</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
    </ul>
    </div>
</body>
</html>

    

    a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}


<ul>
    <li><a href="#">First Link</a>
        <ul>
            <li><a href="#">Child One</a></li>
            <li><a href="#">Child Two</a>
                <ul>
              <li><a href="#">Child Two One</a></li>
              <li><a href="#">Child Two Two</a></li>
              </ul>
          </li>
        </ul>
    </li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
</ul>