Question

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

<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％。像这样：

alt text http://files.getdropbox.com/u/64548/nested-nav.png

我不能为我的生活找到一个简单的方法来做到这一点，而不使用JavaScript，但感觉应该是可能的东西。（我将使用JS来扩展/折叠导航树）。

Answer 1

您需要在<a>上设置边框和填充，并且必须设置为display:block。这会给整个<li>区域带来额外的好处。

ul中不需要额外的标记。只需定义css中的最大子列表数量即可。

Example here

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>

Answer 2

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

Answer 3

这对我的口味来说非常草率，但基本上需要text-indent而不是padding或margin才能实现嵌套。但是，然后使用精灵图像作为<a>的子弹，您必须最终获取该级别的当前text-indent并将精灵图像碰到那么多px，减去精灵图像宽度。

我已将其更改为使用padding-left上的anchor，但这需要父overflow: hidden上的div隐藏被推送到的额外边框每个嵌套的权利。

当然，将.two_deep，.expanded等任何内容可视化为jQuery，而不是硬编码到CSS中。在菜单中获得ul的深度应该相当简单。

<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>

但老实说，也许你宁愿只使用背景图片，并且在调整文本大小时让它看起来很丑陋/破碎。 css对我的口味有点'hack-y'，特别是由于anchor和li必须是兄弟姐妹所需的所有填充补偿。

我在Firefox 3.5，Safari 4和Opera 9.6中测试了这个。我目前无法访问任何其他内容，因此它甚至可能都不是很漂亮。

毋庸置疑，可能是所有IE版本中的完全破坏。对不起......这只是我自己的小测试，看看我是否能胜任这项任务！

编辑：它可以使用页面缩放和文本调整大小，但是再次支持IE（？）......

带有100％宽度分隔线的CSS手风琴/树状菜单

3 个答案: