Не так давно в одном из проектов мне потребовалось визуально оформить меню в виде дерева. Самым простым решением было использовать разные изображения и с их помощью организовать весь комплекс, но этот путь меня не прельщал. Поэтому, я воспользовался помощью Мирового Разума и решение было найдено достаточно быстро.
И поскольку решение 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; } |
