• Главная
• Статьи
• Учебники
• Шпаргалки
• Программы
• Контакты

	Категория: Веб-мастерство
	Название: Выезжающее меню
	Дата добавления: 02-05-2012
	Раз просмотрено: 1194
	Комментарии: 1
	Рейтинг: (3 голоса)

Выезжающее меню

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

HTML

В начале, создадим простую семантическую HTML разметку нашего меню в виде ненумерованного списка:

<ul id="navigation">
  <li class="home"><a href="#" title="На главную"></a></li>
  <li class="about"><a href="#" title="О нас"></a></li>
  <li class="search"><a href="#" title="Поиск"></a></li>
  <li class="photos"><a href="#" title="Фотографии"></a></li>
  <li class="rssfeed"><a href="#" title="RSS"></a></li>
  <li class="contact"><a href="#" title="Контакты"></a></li>
</ul>

Вы можете создавать и свои пункты этого выезжающего меню, но для этого, подготовьте необходимые изображения для пунктов размером 64×64 пикселя, прозрачного фона и, желательно, сочетающиеся с остальными иконками выезжающего меню. Хотя вы можете позже заменить все изображения.

CSS

Теперь добавляем эти CSS стили к нашему выезжающему меню:

#navigation {
	position: fixed;
	margin: 0;
	padding: 0;
	top: 10px;
	left: 0;
	list-style: none;
	z-index: 9999;
}

#navigation li {
	width: 100px;
}

#navigation li a {
	display: block;
	margin-left: -2px;
	width: 100px;
	height: 70px;	
	background-color: #CFCFCF;
	background-repeat: no-repeat;
	background-position: center center;
	border: 1px solid #AFAFAF;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	opacity: 0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	box-shadow: 0px 4px 3px #000;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}


/* Задаем изображения для пунктов меню */
#navigation .home a {background-image: url(home.png);}
#navigation .about a {background-image: url(id_card.png);}
#navigation .search a {background-image: url(search.png);}
#navigation .rssfeed a {background-image: url(rss.png);}
#navigation .photos a {background-image: url(camera.png);}
#navigation .contact a {background-image: url(mail.png);}

Изображения

Как видите из CSS кода выше, мы будем использовать шесть изображений. Вы можете использовать как готовые, так и эти стандартные. А полный набор иконок из этой коллекции, для создания идеального меню на любой вкус и нужды, вы можете скачать здесь.

jQuery

Нам осталось только «оживить» наше выезжающее меню. Для этого подключите jQuery к вашей странице и допишите этот скрипт:

$(function() {
	$('#navigation a').stop().animate({'marginLeft':'-85px'}, 1000);

	$('#navigation > li').hover(
		function () {
			$('a',$(this)).stop().animate({'marginLeft':'-2px'}, 200);
		},
		function () {
			$('a',$(this)).stop().animate({'marginLeft':'-85px'}, 200);
		}
	);
});

Все, наше красивое выезжающее меню готово. Посмотреть демо вы можете на этой странице.

Это интересно: «Индикаторы загрузки на CSS».