Вы здесь: Главная > CSS > Выпадающие списки CSS

Выпадающие списки CSS

Опубликовано автором Просмотры: 74

Нередким видом навигации является выпадающее меню, в котором списки вложенных навигаций появляются только при наведении курсора на ссылку.

Выпадающие списки HTML Dog имеют долгую историю — мы выделили популярный метод выпадающих списков Suckerfish ещё в 2003 году. Однако с тех пор стандарты и браузеры прошли долгий путь, и теперь мы можем безопасно использовать гораздо более простую технику, используя CSS без необходимости в каком-либо JavaScript.

Многоуровневые выпадающие списки

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

Это может быть актуально для людей с двигательными нарушениями или нарушениями зрения, или для тех, кто использует мобильные устройства с сенсорным экраном. Вам следует, по крайней мере, подумать о том, как предоставить этим пользователям возможность навигации. Если вы остановились на использовании выпадающих списков, давайте двигаться вперёд и применять их наилучшим возможным способом…

HTML: Красиво вложенные списки

Как и любая хорошая навигация, списки ссылок ─ лучший вариант структурирования выпадающих списков. Поскольку мы хотим, чтобы один элемент отображал группу подпунктов, нам, безусловно, нужны вложенные списки, то есть список списков:

<ul>
    <li>
        <a href="">Птицы</a>
        <ul>
            <li><a href=""> Бескилевые </a></li>
            <li><a href="">Домашние птицы</a></li>
            <li><a href="">Неоавес</a></li>
        </ul>
    </li>
    <li>
        <a href="">Млекопитающие</a>
        <ul>
            <li><a href="">Однопроходные</a></li>
            <li><a href="">Сумчатые</a></li>
            <li><a href="">Плацентарный</a></li>
        </ul>
    </li>
    <!-- etc. -->
</ul>

Итак, у нас есть “Птицы” и “Млекопитающие” в качестве элементов верхнего уровня, а “Бескилевые”, “Однопроходные” и так далее ─ в качестве элементов второго уровня, подкатегории.

Используйте ссылки. Всегда используйте ссылки. Если вас больше всего интересуют подкатегории (например. “Бескилевые” и “Однопроходные”), рассмотрите, по крайней мере, наличие основных элементов (например. “Птицы” и “Млекопитающие”) ссылка на страницу со стандартной навигацией по страницам вашей подкатегории.

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

CSS: самое необходимое

Чтобы настроить всё это визуально, давайте обнулим отступы по умолчанию (и поля для старых браузеров) в списках:

ul {
    padding: 0;
    margin: 0;
}

Далее, для каждого элемента списка мы хотим расположить их горизонтально. Забегая вперёд, мы также хотим указать, что источником для размещения всех вложенных списков является элемент родительского списка:

li {
    display: inline;
    position: relative;
}

Теперь давайте рассмотрим списки внутри списка. Мы хотим расположить их абсолютно, разместив их поверх всего, и мы хотим их скрыть:

ul ul {
    position: absolute;
    display: none;
}

Чтобы приспособиться к старым браузерам, вы также можете явно расположить вложенные списки, добавив к этому left: 0 и top: 100%.

Наконец, для отображения этих вложенных списков при наведении курсора мыши на элемент основного списка:

li:hover ul {
    display: block;
}

Первый пример демонстрирует это в действии, наряду с поясняющими встроенными комментариями (просмотрите источник).

Многоуровневые выпадающие списки

Размещение более чем одного уровня выпадающего меню потребовало бы большей вложенности списка:

<li>
<a href="">Млекопитающие</a>
<ул>
<li>
<a href="">Однопроходные</a>
<ул>
<li><a href="">Ехидны</a></li>
<li><a href="">Утконос</a></li>
</ul>
</li>
<li>
<a href="">Сумчатые</a>
<ул>
<li><a href="">Опоссумы</a></li>
<li><a href="">Нумбаты и т.д.</a></li>
<li><a href="">Бандикуты и т.д.</a></li>
<li><a href="">Кенгуру, коалы, вомбаты и т.д.</a></li>
</ul>
</li>
<li>
<<a href="">Плацентарный</a>
<ул>
<li><a href="">Приматы, копытные и т.д.</a></li>
<li><a href="">Муравьеды, ленивцы и т.д.</a></li>
<li><a href="">Слоны и т.д.</a></li>
</ul>
</li>
</ul>
</li>

Теперь, чтобы немного по-другому обработать эти новые вложенные списки, мы хотим, чтобы они отображались сбоку от элементов родительского списка, а не под ними:

ul ul ul {
    left: 100%;
    top: 0;
}

Также требуется небольшая поправка. В нынешнем виде будут показаны все дочерние списки элемента списка, наведённого курсором мыши. Итак, когда в этом примере наведён указатель мыши на “Сумчатые”, будут показаны не только “Однопроходные”, “Сумчатые” и “Плацентарные”, но и все виды сумчатых — “ Опоссумы ” и так далее.

Мы хотим, чтобы отображался только первый потомок — дети (не внуки). Поэтому мы вносим поправки li:hover ul, вводя дочерний селектор:

li:hover > ul {
    display: block;
}

Другие основные изменения, которые вы, возможно, захотите внести, включают в себя перемещение элементов списка вместо использования display: inline. Тогда вы сможете управлять такими параметрами, как ширина.

Во втором живом примере применяются многоуровневые выпадающие списки и вносятся некоторые из этих базовых улучшений.

Страницы в тему:

Примеры CSS:

Добавить комментарий