Меню

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

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

Для создания горизонтального меню, добавьте классы pure-menu, pure-menu-open и pure-menu-horizontal к контейнеру в который заглючён список меню. Также вы можете выделить активный раздел меню, добавив к элементу списка класс pure-menu-selected.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
	<ul>
		<li><a href="#">Домашняя страница</a></li>
		<li class="pure-menu-selected"><a href="#">Фотоальбом</a></li>
		<li><a href="#">Отправить сообщение</a></li>
		<li><a href="#">Спорт</a></li>
		<li><a href="#">Финансы</a></li>
	</ul>
</div>

Чтобы добавить заголовки в ваше меню, поместите какой-либо контент за пределами контейнера <ul> и оберните его в элемент <a> с классом pure-menu-heading

<div class="pure-menu pure-menu-open pure-menu-horizontal">
	<a href="#" class="pure-menu-heading">Заголовок</a>

	<ul>
		<li class="pure-menu-selected"><a href="#">Домашняя страница</a></li>
		<li><a href="#">Фотоальбом</a></li>
		<li><a href="#">Отправить сообщение</a></li>
		<li><a href="#">Спорт</a></li>
		<li><a href="#">Финансы</a></li>
	</ul>
</div>

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

Вертикальное меню в Pure - меню по умолчанию. Для его создания, вам лишь необходимо добавить класс pure-menu к стилям меню и класс pure-menu-open, чтобы быть уверенным, что меню будет отображаться.

<div class="pure-menu pure-menu-open">
	<a class="pure-menu-heading">Мои сайты</a>

	<ul>
		<li><a href="#">Фотоальбом</a></li>
		<li><a href="#">Отправить сообщение</a></li>
		<li><a href="#">Спорт</a></li>
		<li><a href="#">Финансы</a></li>
		<li class="pure-menu-heading">Ещё сайты!</li>
		<li><a href="#">Игры</a></li>
		<li><a href="#">Новости</a></li>
		<li><a href="#">ОМГ!</a></li>
	</ul>
</div>

Выпадающие элементы в меню

Для добавления выпадающего меню, необходимо использовать JavaScript. Например, модуль библиотеки YUI Y.Menu добавляет возможность создания выпадающих списков и меню на JavaScript.

<div id="demo-horizontal-menu">
	<ul id="std-menu-items">
		<li class="pure-menu-selected"><a href="#">Фотоальбом</a></li>
		<li><a href="#">Отправить сообщение</a></li>
		<li><a href="#">Спорт</a></li>
		<li><a href="#">Финансы</a></li>
		<li>
			<a href="#">Другое</a>
			<ul>
				<li class="pure-menu-heading">Ещё сайты</li>
				<li class="pure-menu-separator"></li>
				<li><a href="#">Автомобили</a></li>
				<li><a href="#">Вопросы</a></li>
				<li><a href="#">Ответы</a></li>
				<li>
					<a href="#">Ещё больше</a>
					<ul>
						<li><a href="#">Гороскопы</a></li>
						<li><a href="#">Игры</a></li>
						<li><a href="#">Работа</a></li>
						<li><a href="#">ОМГ!</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

<script>
YUI({
	classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

	var horizontalMenu = new Y.Menu({
		container		 : '#demo-horizontal-menu',
		sourceNode		: '#std-menu-items',
		orientation	   : 'horizontal',
		hideOnOutsideClick: false,
		hideOnClick	   : false
	});

	horizontalMenu.render();
	horizontalMenu.show();

});
</script>

Чтобы пометить ссылку меню, как неактивную, добавьте элемент <a> с классом pure-menu-disabled. Неактивные элементы меню всегда видимы, но не наследуют hover-стили.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
	<a href="#" class="pure-menu-heading">Заголовок</a>

	<ul>
		<li class="pure-menu-selected"><a href="#">Домашняя страница</a></li>
		<li><a href="#">Фотоальбом</a></li>
		<li class="pure-menu-disabled"><a href="#">Неактивный элемент</a></li>
	</ul>
</div>

Меню навигации по страницам

Для создания панели меню навигации по страницам, добавьте класс pure-paginator к элементу <ul>. Для того, чтобы панель навигации была представлена кнопками, добавьте ещё класс pure-button. Для более наглядной навигации по страницам, лучше пропустить этот класс.

<ul class="pure-paginator">
	<li><a class="pure-button prev" href="#">&#171;</a></li>
	<li><a class="pure-button" href="#">1</a></li>
	<li><a class="pure-button pure-button-active" href="#">2</a></li>
	<li><a class="pure-button" href="#">3</a></li>
	<li><a class="pure-button" href="#">4</a></li>
	<li><a class="pure-button" href="#">5</a></li>
	<li><a class="pure-button next" href="#">&#187;</a></li>
</ul>