Показать Меню
falbar Выпадающее меню

Выпадающее меню на HTML и CSS

Выпадающее меню

Привет! Продолжаем развивать тему навигации сайта и рассмотрим сегодня плавающие выпадающее горизонтальное меню. Собственно, ничего нового, стандартный ненумерованный список, такой же, как мы использовали в одной из предыдущих статей (ссылка ниже), только усложняем его дополнительными вложенными списками для реализации выпадающих пунктов меню.

Перед прочтением предлагаю рассмотреть - горизонтальное меню для сайта.

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

Итак, структура HTML:

<div id="menu_div">
	<!-- #navigation -->
	<div id="navigation">
		<!-- #menu -->
		<div id="menu">
			<!-- #nav-->
			<ul id="nav">
				<!-- Home Item -->
				<li>
					<a href="#">Главная</a>
					<!-- Level 1 -->
					<ul>
						<li><a href="#">Пункт №1</a></li>
						<li><a href="#">Пункт №2</a></li>
						<li><a href="#">Пункт №3</a></li>
						<li><a href="#">Пункт №4</a></li>
						<li><a href="#">Пункт №5</a></li>
						<li><a href="#">Пункт №6 - Урв. 2</a>
							<!-- Level 2 -->
							<ul>
								<li><a href="#">Подпункт №1</a></li>
								<li><a href="#">Подпункт №2</a></li>
								<li><a href="#">Подпункт №3 - Урв. 3</a>
									<!-- Level 3 -->
									<ul>
										<li><a href="#">Подпункт №1</a></li>
										<li><a href="#">Подпункт №2</a></li>
										<li><a href="#">Подпункт №3 - Урв. 4</a>
											<!-- Level 4 -->
											<ul>
												<li><a href="#">Подпункт №1</a></li>
												<li><a href="#">Подпункт №2</a></li>
												<li><a href="#">Подпункт №3</a></li>
											</ul>
											<!-- END Level 4 -->
										</li>
									</ul>
									<!-- END Level 3 -->
								</li>
							</ul>
							<!-- END Level 2 -->
						</li>
					</ul>
					<!-- END Level 1 -->
				</li>
				<!-- END Home Item -->
				<!-- Portfolio Item -->
				<li>
					<a href="#">Портфолио</a>
					<ul>
						<li><a href="#">Пункт №1</a></li>
						<li><a href="#">Пункт №2</a></li>
						<li><a href="#">Пункт №3</a></li>
						<li><a href="#">Пункт №4</a></li>
						<li><a href="#">Пункт №5</a></li>
					</ul>
				</li>
				<!-- END Portfolio Item -->
				<!-- Blog Item -->
				<li>
					<a href="#">Блог</a>
					<ul>
						<li><a href="#">Пункт №1</a></li>
						<li><a href="#">Пункт №2</a></li>
						<li><a href="#">Пункт №3</a></li>
						<li><a href="#">Пункт №4</a></li>
					</ul>
				</li>
				<!-- END Blog Item -->
				<li><a href="#">Сервисы</a></li>
				<li><a href="#">О нас</a></li>
				<li><a href="#">Написать нам</a></li>
			</ul>
			<!-- END #nav -->
			<!-- Search Form -->
			<form action="#" class="searchform"> 
				<input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
			</form>
			<!-- END Search Form -->
		</div>
		<!-- END #menu -->
	</div>
	<!-- END #navigation -->
</div>

В оберточный div помещаем заготовку нашего меню и форму для строки поиска. Первый уровень нашего меню представляет собой основные пункты меню, которые будут видны всегда, запихнуты они в элементы li списка ul с id=nav. Обворачиваем их в ссылки и начинаем наращивать нашу структуру – кладем списки ul без id в нужные элементы li корневого списка. Необходим еще один уровень вложенности? - Всегда, пожалуйста, выбираем li и засовываем туда еще один список. Количество уровней не ограничено, но не злоупотребляйте этим, иначе меню станет просто неюзабельным.

Далее подключаем уже готовый файл CSS:

<link href="style-menu.css" rel="stylesheet" type="text/css" />

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

#nav li a:hover,
#nav li ul li a:hover{
	transition-property: color, background; 
	transition-duration: 0.5s, 0.5s; 
	transition-timing-function: linear, ease-out;
}
.searchfield:focus,
.searchfield:not(:focus){
	transition-property: width; 
	transition-duration: 0.5s, 0.5s; 
	transition-timing-function: linear, ease-out;
}
#menu_div:hover,
#navigation:hover,
#nav li ul a, 
#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover){
	transition-property: opacity; 
	transition-duration: 0.5s, 0.5s;
	transition-timing-function: linear, ease-out;
}

В transition-property указываем необходимое нам свойство: цвет, прозрачность, длину, ширину, фон и т.п., transition-duration – задает скорость изменения указанного свойства, transition-timing-function – стиль изменения свойства – довольно интересный атрибут, но об этом расскажу как-нибудь в следующий раз.

На этом все, пользуемся – радуемся!

Подписаться на обновления

Комментариев еще не оставлено