Построение дерева html+CSS
Часто, при построении навигации сайтов со сложной структурой, прибегают к вложенности ссылок. Раздел содержит кучу подразделов, а те — еще подразделы. Такую структуру удобно иногда представить в виде дерева. В этой статье покажу один из способов, как такое дерево можно легко и безболезненно организовать.
Часто, при построении навигации сайтов со сложной структурой, прибегают к вложенности ссылок. Раздел содержит кучу подразделов, а те — еще подразделы. Такую структуру удобно иногда представить в виде дерева. В этой статье покажу один из способов, как такое дерево можно легко и безболезненно организовать.
Для начала, скажем, что навигация на сайте — это всего-лишь набор ссылок. Или список ссылок. А html представляет нам удобный инструмент для составления списков! Воспользуемся тегами ul и li.
Для начала, определимся со структурой.
<div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О фирме</a></li>
<li><a href="#">Рецепты</a>
<ul>
<li><a href="#">Плюшки</a></li>
<li><a href="#">Ватрушки</a>
<ul>
<li><a href="#">Обычные</a></li>
<li><a href="#">С изюмом</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Карта проезда</a></li>
</ul>
</div>
Итак, мы получили дерево. У нас сейчас есть небольшие проблемы. Есть маркеры слева от каждого пункта, а отступы слишком велики. Еще хотелось бы увеличить расстояние между ссылками. Все это легко делается при помощи CSS.
#navigation ul {
width: 300px; /*ширина блока навигации*/
margin: 0px; /*убираем поля*/
padding: 0px; /*убираем отступы*/
position: relative; /*отсчитываем позицию относительно текущего места*/
left: 20px; /*и всегда сдвигаем в право на 20 пикселей*/
}
#navigation li {
list-style: none; /*убираем маркеры*/
line-height: 24px; /*задаем высоту строки, чтобы лучше отделить ссылки*/
}
Мы назначили правило для всех списков в блоке навигации, а так же, для всех элементов списка. Смысл всех свойств понятен из комментариев. Теперь можно украшать и придавать желаемый стиль.
Замечу, что такое дерево легко выводить серверным скриптом, а так же, обрабатывать при помощи JavaScript или другим клиентским языком. Все вложенности легко идентифицируются, поэтому управлять ими из скрипта будет не сложно.
![[Valid RSS]](/img/valid-rss-rogers.png)
by SHAman