CSS Accordion / Tree Menu со 100% шириной делителей - PullRequest
Новая
       17

CSS Accordion / Tree Menu со 100% шириной делителей

2 голосов
/ 13 июля 2009

Я хочу создать аккордеонное меню 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>

Структура nav может иметь N уровней, и каждое дочернее меню будет иметь отступ от своего родителя. Я хочу, чтобы была граница, которая охватывает 100% ширины между всеми элементами навигации, включая дочерние элементы n-го уровня . Как это:

альтернативный текст http://files.getdropbox.com/u/64548/nested-nav.png

Я не могу придумать простой способ сделать это без использования JavaScript, но такое чувство, что это должно быть возможно. (Я буду использовать JS, чтобы развернуть / свернуть дерево навигации).

Ответы [ 3 ]

1 голос
/ 14 июля 2009

Вы должны иметь границу и отступ на <a>, который также должен быть установлен на display:block. Это дает дополнительный бонус, так как делает весь регион <li> кликабельным.

Нет необходимости в дополнительной разметке на ул. Просто определите максимальное количество подсписков в вашем css.

Пример здесь 

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>
0 голосов
/ 14 июля 2009

Это довольно неряшливо для моих вкусов, но в основном для требуется 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 немного хакерский, на мой вкус, особенно вся компенсация заполнения, необходимая из-за того, что anchor и li должны быть братьями и сестрами.

Я проверял это в Firefox 3.5, Safari 4 и Opera 9.6. У меня нет доступа ни к чему другому в данный момент, так что это, вероятно, даже не очень красиво.

Излишне говорить, что это , вероятно, полный крах во всех версиях IE . Извините ... Это был только мой маленький тест, чтобы проверить, справился ли я с заданием!

Редактировать: он работает с масштабированием страницы и изменением размера текста, но опять же, поддержка IE (?)…

0 голосов
/ 13 июля 2009

Фоновое изображение мозаики для строк делителя не противоречит изменению размера (по крайней мере, не должно быть с нормальными рендерами CSS).

...