Вертикальное меню
По умолчанию меню вертикальные. Минимальный стиль по умолчанию и селекторы с низкой специфичностью позволяют легко настраивать их. По умолчанию элементы меню занимают 100% ширины своего контейнера, поэтому вы можете ограничить ширину меню или настроить отображение меню: inline-block.
<style>
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
display: inline-block;
/* Or set the width explicitly: */
/* width: 10em; */
}
</style>
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">Yahoo Sites</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">More Sites</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">BRAND</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
в элемент списка. Отключенные элементы выглядят блеклыми и не наследуют стили наведения.
<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">Selected</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Normal</a>
</li>
<li class="pure-menu-item pure-menu-disabled">
<a href="#" class="pure-menu-link">Disabled</a>
</li>
</ul>
</div>
Выпадающие списки
Мы рекомендуем включать подменю через JavaScript, чтобы обеспечить доступность. Чтобы помочь вам начать работу, пример сценария, написанный на ванильном JS, обеспечивает поддержку ARIA, ограниченную навигацию по подменю с помощью клавиш со стрелками и возможность закрывать меню с помощью внешнего события или клавиши ESC. Но вы можете пойти дальше, добавив обнаружение краев, комплексную навигацию с помощью клавиш со стрелками и полифилы для совместимости со старыми браузерами.
Даже с установленным JavaScript вы все равно можете отображать подменю при наведении курсора. Просто добавьте 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">Home</a>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Contact</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">Tumblr Blog</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">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 pure-menu-has-children">
<a href="#" id="menuLink1" class="pure-menu-link">More</a>
<ul class="pure-menu-children">
<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">Flickr</a>
</li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Foo</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Bar</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Baz</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Прокручиваемое горизонтальное меню
Чтобы создать горизонтальное меню с возможностью прокрутки, добавьте pure-menu-scrollable
имя класса. Когда места недостаточно, пункты меню можно прокручивать или пролистывать. Выпадающие меню не поддерживаются. Если вам нужна прокрутка на основе импульса, мы рекомендуем использовать библиотеку JS, например scrollbooster, для добавления таких эффектов.
<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>
/* Customization to limit height of the menu */
.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>
Адаптивные меню, которые скрываются
Ознакомьтесь с нашими примерами макета, чтобы увидеть, как вы можете использовать Pure в качестве основы для более сложных меню, таких как:
- Адаптивное вертикальное меню , которое сворачивается за гамбургером, похоже на меню на этом веб-сайте Pure.
- Адаптивное меню с горизонтальной прокруткой , которое не мешает работе на маленьких экранах.
- Адаптивное горизонтально-вертикальное меню , которое выскальзывает из поля зрения.
<ul>
<li>
<a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which collapses behind a hamburger, similar to the menu on this Pure website.
</li>
<li>
<a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>, which tucks out of the way on small screens.
</li>
<li>
<a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>, which slides out of view.
</li>
</ul>