Не так удивительно давно в одном из проектов мне потребовалось без сомнения визуально оформить меню в виде дерева. Самым простым решением было использовать сильно разные изображения и с их помощью организовать весь комплекс, но этот путь меня не прельщал. Впрямь поэтому, я воспользовался помощью Мирового Разума и решение было найдено достаточно быстро.
И поскольку решение Chris Coyier мне показалось самым красивым и наиболее элегантным из найденных, я предлагаю вам с ним ознакомиться.
Изображение в один пиксель может быть достаточно универсальной вещью. Воспользуйтесь repeat-x, и он станет горизонтальной линией, repeat-y позволит трансформировать его в вертикальную линию, и кроме того, использование repeat позволит залить эту линию одним цветом. На самом деле поэтому, применив реально немного CSS-магии мы можем использовать этот пиксель для оформления маркированного списка. Перейдем к самому решению.
В HTML коде нет ничего оригинального, это весьма обычный вложенный список.
Civil EngineeringCowley Hall Parking Lot RecontructionCulver’s Home OfficeFirst Addition to Highland AdditionFox Point ApartmentsEast SideWest SideMetropolitan Place Phase IIOak Park Place of BarabooPremier CoopSleep Inn & SuitesTradewinds Business CenterUW-Madison Nielsen Tennis StadiumEnvironmental EngineeringTelecommunications EngineeringNsight TeleServices (CellCom) WisconsinOakland County/Radian Communications MichiganT-Mobile Site DeploymentU.S. Cellular Network DevelopmentWestern Wireless South Dakota
В 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:transparenturl(graypixel.png)repeat-y15px0;width:340px;} #project-list li {font-size:16px;margin:15px020px;padding:00010px;} #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:transparenturl(graypixel.png)repeat-x08px;font-size:13px;margin:4px04px5px;padding:00020px;} #project-list li ul li a {padding:0003px;} #project-list li ul li ul {background:transparenturl(graypixel.png)repeat-y15px0;margin-bottom:10px;} #project-list li ul li ul li {margin-left:16px;padding-left:10px;}
