Меню

Простой CSS для меню.

Вертикальное меню

Стандартное Меню является вертикальным. Минимальный стайлинг и низко-специфичные селекторы дают возможность легко менять офрмление меню. По умолчанию элементы меню занимают 100% ширины контейнера, и, возможно, вам может потребоваться ограничить ширину меню или установить свойство display:inline-block.

Сайты Yahoo
<style>
.custom-restricted-width {
    /* Ограничим ширину меню шириной его контента: */
    display: inline-block;
    /* Или укажем тоную ширину: */
    /* width: 10em; */
}
</style>
<div class="pure-menu custom-restricted-width">
    <span class="pure-menu-heading">Сайты Yahoo</span>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-heading">Ещё сайты</li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
    </ul>
</div>

Горизонтальное меню

Чтобы сделать меню горизонтальным, добавьте класс pure-menu-horizontal.

<div class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">Имя сайта</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
    </ul>
</div>

Текущий и заблокированный элементы

Элемент отмечается как текущий (активный) добавлением класса pure-menu-selected к элементу списка. Заблокировать элемент можно добавлением класса pure-menu-disabled. Заблокированные элементы выглядят блёклыми и не наследуют hover-стили (при наведении курсора).

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Текущий</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Обычный</a></li>
        <li class="pure-menu-item pure-menu-disabled">Заблокирован</li>
    </ul>
</div>

Чтобы обеспеченть accessibility (доступность для людей с ограниченными возможностями), мы рекомендуем делать выпадающие подменю через JavaScript.

В помощь вам мы написали скрипт на чистом JS с поддержкой ARIA, с элементарной навигацией клавишами-стрелками, с выходом из под-меню по кнопке ESC и с выходом из меню по клику за пределами меню.

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

Даже при работе меню через JS вы можете показывать под-меню также и по ховеру (при наведении мыши). Просто добавьте pure-menu-allow-hover к элементу списка pure-menu-has-children. Это будет удобно для пользователей десктопов и тех людей, у которых отключен JavaScript в браузере.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Главная</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Контакты</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Facebook</a></li>
            </ul>
        </li>
    </ul>
</div>

Вертикальное многоуровневое меню

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

<div class="pure-menu custom-restricted-width">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Evo</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Revo</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Drupal</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">October</a></li>
        <li class="pure-menu-item pure-menu-has-children">
            <a href="#" id="menuLink1" class="pure-menu-link">Больше</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">OpenCart</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">PrestaShop</a></li>
                <li class="pure-menu-item pure-menu-has-children">
                    <a href="#" id="menuLink1" class="pure-menu-link">Ещё больше</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Joomla</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">WordPress</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Bitrix</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Горизонтальное меню со скроллом

Для создания такого меню добавьте класс pure-menu-scrollable. Когда пространства недостаточно, меню может перетаскиваться. Выпадающие меню не поддерживаются.

<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
    </ul>
</div>

Вертикальное меню со скроллом

Для создания вертикального меню со скроллом: ограничьте высоту меню, и добавьте класс pure-menu-scrollable. Элементы меню могут прокручиваться или перетаскиваться. Выпадающие меню не поддерживаются.

<style>
/* Ограничиваем высоту (и ширину) меню */
.custom-restricted {
    height: 160px;
    width: 150px;
    border: 1px solid gray;
    border-radius: 4px;
}
</style>
<div class="pure-menu pure-menu-scrollable custom-restricted">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
    </ul>
</div>
Перевод c оригинального сайта purecss.io
© 2017 Aharito