Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Сложные динамические списки: это несложно

Сложные динамические списки: это несложно

Чтобы помочь посетителям сайта попасть на определенную страницу (раздел), мы сталкиваемся с некоторыми проблемами. Одна из них - обеспечение качественной и удобной навигации для пользователей, и каждый вебмастер решает ее по-своему.

Сложное решение.
Динамические select boxes, в которых выбор пункта в первом box изменяет содержание второго, спасают пользователя от перезагрузки страницы — если применяется JavaScript. В противном случае мы должны перезагрузить страницу и заполнить второй box на сервере. Оба варианта имеют несколько проблем:
- Если мы не производим второй список через DOM, посетители с отключенным JavaScript получат неработающий диалоговый элемент страницы.
- Чем больше уровней меню и чем большая их "вложенность", тем сложнее и тяжелее наш JavaScript, причем тяжелее не только для сервера (вряд ли код будет легко читабелен при последующем редактировании).
- Если понадобиться добавить/исключить некоторые разделы (например на многоязычном сайте), массив элементов становятся еще более сложными.
- Весьма примитивные возможности для визуального оформления.

Альтернативное решение.
Давайте проанализируем проблему.
Мы хотим:
- Показать иерархический список разделов подробно и со многими элементами.
- Предложить пользователю один вариант выбора, одновременно скрыв другие.
Мы не хотим:
- Избыточной сложности.
- "Одноразового" решения.
- Чрезмерной нагрузки на сервер.

Арсенал HTML дает нам прекрасный инструмент для работы: списки. С ненумерованным списком мы можем легко показать иерархическую структуру любой сложности, которой было бы очень трудно достичь с динамическими select boxes.
Есть несколько способов превратить этот список в более-менее удобную в использовании навигационную систему - например, мы можем превратить его в нечто, напоминающее проводник Windows. Но поскольку монитор в ширину имеет больший размер, чем в высоту, давайте сделаем наше меню горизонтально ориентированным.

Создание меню.
HTML довольно прост. создадим обычный вложенный список и присвоим ему идентификатор finder, после чего разместим его внутри блока finderparent:
<div id="finderparent">
<ul id="finder">
[…]
</ul>
</div>
Небольшой JavaScript будет динамически удалять и добавлять классы, а в частности:
- Проверит, может ли браузер использовать DOM должным образом.
- Применит класс domenabled к телу документа, который позволяет нам определять различные действия в зависимости от того, доступен ли JavaScript или нет.
- Обнаружит наш список с ID finder.
- Применит класс hidden ко всем спискам, вложенным в списке finder.
- Перечислит все пункты списка finder и добавляет элемент с классом parent к каждому, содержащему вложенный список.
- Применит класс open к элементу, когда на него нажимают и класс shown к вложенному списку.

Определяемся с CSS:
Даем исходному элементу finderparent высоту и указываем относительное позиционирование.
Внутри разместим список finder и фиксируем отступы.
Размер вложенного списка определим в 200 пикселов.
.domenabled #finderparent
{
position:relative;
height:150px;
}
.domenabled #finder
{
position:absolute;
top:1em;
left:1em;
}
.domenabled ul#finder,
.domenabled ul#finder li,
.domenabled ul#finder ul
{
width:200px;
list-style-type:none;
margin:0;
padding:0;
}

Следующие два класса используем, чтобы показать и скрыть вложенные списки.
.domenabled ul#finder ul.hidden
{
top:0px;
left:-2000px;
position:absolute;
}
.domenabled ul#finder ul.shown
{
top:0px;
left:200px;
position:absolute;
}

Последнее, что мы должны определить - вид ссылок, показывающих пользователю, какое именно перед ним меню - parent, указывающее, что оно содержит вложенное субменю, или open, позволяющее посетителю сделать окончательный выбор и нажать ссылку:
.domenabled ul#finder li a
{
color:#000;
background:url(normal.gif) no-repeat #fff 0 50% ;
padding-left:16px;
text-decoration:none;
}
domenabled #finder a.open
{
background:url(arrowon.gif) no-repeat 90% 50% #eee;
padding-right:16px;
padding-left:0px;
display:block;
}
.domenabled #finder a.parent
{
background:url(arrow.gif) no-repeat #fff 100% 50%;
padding-right:16px;
padding-left:0px;
}

Вот и все. Наше меню закончено.
Я не смог удержаться и немного усовершенствовал пример, позволив посетителю сделать заказ из нескольких блюд, не перезагружая страницу. Не стоит использовать приведенные здесь примеры слишком буквально. Эта статья предназначалась чтобы показать, как с помощью DOM заменить динамические select boxes более изящным списком. Не стесняйтесь загружать и корректировать исходники - возможно у вас получиться их дополнить и усовершенствовать.

Автор - Кристиан Хейлман (Christian Heilmann)
Перевод - t3s
Оригинал статьи (на английском)
Категория: CSS
Опубликовано: 1 февраля 2008, Обновлено: 19.01.2013 - 20:27 просмотров: 4983
 (Голосов: 5)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.48 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.