Блог свободен от NOFOLLOW!

Как оформить дерево рубрик с помощью одного пикселя

Дата: 23-12-2009 | Автор: Yaroslav.CH | Рубрика: CSS
Метки:

12

Как оформить дерево рубрик с помощью одного пикселя

Не так давно в одном из проектов мне потребовалось визуально оформить меню в виде дерева. Самым простым решением было использовать разные изображения и с их помощью организовать весь комплекс, но этот путь меня не прельщал. Поэтому, я воспользовался помощью Мирового Разума и решение было найдено достаточно быстро.

И поскольку решение Chris Coyier мне показалось самым красивым и наиболее элегантным из найденных, я предлагаю вам с ним ознакомиться.

Изображение в один пиксель может быть достаточно универсальной вещью. Воспользуйтесь repeat-x, и он станет горизонтальной линией, repeat-y позволит трансформировать его в вертикальную линию, и кроме того, использование repeat позволит залить эту линию одним цветом. Поэтому, применив немного «CSS-магии» мы можем использовать этот пиксель для оформления маркированного списка. Перейдем к самому решению.

В HTML коде нет ничего оригинального, это обычный вложенный список.

<ul id="project-list">
    <li><a href="#">Civil Engineering</a>
        <ul>
            <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
            <li><a href="#">Culver’s Home Office</a></li>
            <li><a href="#">First Addition to Highland Addition</a></li>
            <li><a href="#">Fox Point Apartments</a>
                <ul>
                    <li><a href="#">East Side</a></li>
                    <li><a href="#">West Side</a></li>
                </ul>
            </li>
            <li><a href="#">Metropolitan Place Phase II</a></li>
            <li><a href="#">Oak Park Place of Baraboo</a></li>
            <li><a href="#">Premier Coop</a></li>
            <li><a href="#">Sleep Inn & Suites</a></li>
            <li><a href="#">Tradewinds Business Center</a></li>
            <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
        </ul>
    </li>
    <li><a href="#">Environmental Engineering</a></li>
    <li><a href="#">Telecommunications Engineering</a>
        <ul>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
            <li><a href="#">Oakland County/Radian Communications Michigan</a></li>
            <li><a href="#">T-Mobile Site Deployment</a></li>
            <li><a href="#">U.S. Cellular Network Development</a></li>
            <li><a href="#">Western Wireless South Dakota</a></li>
        </ul>
    </li>
</ul>

В CSS мы применим повторение однопиксельного PNG изображения, вертикально — к самому списку и горизонтально — к элементам списка. Также, для элементов списка мы «остановим» линию так, чтобы она проходила не по всей длине — путем придания якорям ссылок белого фона, который ложится поверх, заслоняя собой линию.

/*START: В исходном коде Chris Coyier этого нет, но должно быть обязательно добавлено */
ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}
* {
    margin:0;
    padding:0;
}
/*END: В исходном коде Chris Coyier этого нет, но должно быть обязательно добавлено */
 
#project-list {
    background:transparent url(graypixel.png) repeat-y 15px 0;
    width:340px;
}
 
#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}
 
#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}
 
#project-list li a:hover {
    color:#84B8FF;
}
 
#project-list li ul li {
    background:transparent url(graypixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}
 
#project-list li ul li a {
    padding:0 0 0 3px;
}
 
#project-list li ul li ul {
    background:transparent url(graypixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}
 
#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

Сейчас самое время поделиться статьей с другими!

А еще можно почитать:

Комментарии 12 комментариев

перейти к форме для комментирования

Может материал и классный, но я ничего не поняла, да у меня сайта-то нет, в Народе создавала, а толку нет. Все-таки, лучше писать на русском, нашем языке. Хорошо, что Вы знаете английский. Но с народом общаться лучше на родном. Пускай те изучают наш русский, а не мы под них подделываемся. С ув. ИнВа

ОтветитьОтветить

ИнВа, это материал чисто технического характера, потому у него вообще не такого понятия как «языковая версия» — это же код :)

ОтветитьОтветить

Симпатичное дерево получилось)

Я новичок в верстке, но собираю себе в копилку различные готовые решения. Спасибо)

З.Ы. Комментарий ИнВа весьма повеселил)))

ОтветитьОтветить

@SEOblondinka: спасибо за комментарий.

Всегда пожалуйста. Я думаю, в блоге периодически будут появляться такие статьи, поскольку я тоже часто натыкаюсь на готовые интересные решения, которыми, уверен, стоит делиться :)

ОтветитьОтветить

Изящно.

А как новые ветки добавляем?

Если вручную, то не интересно, какая-то админка была бы надежнее.

И для совершенной красоты оформить в виде плагина.

ОтветитьОтветить

@Олег Дорожко: спасибо за комментарий.

Админка — для чего именно? В данном случае, это пример лёгкого и простого оформления дерева рубрик, принцип которого можно использовать где угодно — в плагинах, модулях, расширениях и т.д., в зависимости от CMS. Либо же вообще — при верстке «ручных» макетов.

ОтветитьОтветить

Yaroslav.CH написал(а):

@Олег Дорожко: спасибо за комментарий.

Админка — для чего именно? В данном случае, это пример лёгкого и простого оформления дерева рубрик, принцип которого можно использовать где угодно — в плагинах, модулях, расширениях и т.д., в зависимости от CMS. Либо же вообще — при верстке «ручных» макетов.

Не столько админка, сколько удобный интерфейс, чтобы не ручками все прописывать. А задал название ветки, родителя и во все файлы автоматом прописываются нужные кодовые инструкции.

ОтветитьОтветить

@Олег Дорожко: не совсем понимаю — и что мешает это сделать? Пример и код оформления — есть, применить его можно где угодно, в том числе и «срастить» с любым скриптом дерева рубрик или плагином под любую CMS.

ОтветитьОтветить

@Yaroslav.CH:

Ничего не мешает. Были бы знания и желание.

ОтветитьОтветить

Прикольно получилось. А как быть если заранее не знаешь уровень вложенности? Как я понял в данном примере уровень вложенности ограничен.

ОтветитьОтветить

@Шамшур Иван: из моей практики, обычно глубже третьего уровня меню делать особой необходимости нет, но ограничений в данном примере тоже нет — если понадобиться сделать глубину намного больше, то можно просто модифицировать CSS.

ОтветитьОтветить

А как сделать так чтоб при наведении мышкой на рубрику , она меняла фон?

Только фон из картинки нужен...

ОтветитьОтветить

А Вы оставили комментарий? Ваше мнение очень важно!

Все комментарии до публикации проходят обязательную ручную модерацию, согласно Правил комментирования. Если вы планируете комментарий только ради обратной ссылки на ваш сайт – не трудитесь, смысла нет.