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

28 января 2015 Антон Кулешов 3101 0

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

Реклама

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

Перед тем как начнем копаться в коде, отмечу: данное выпадающее меню реализовано без использования 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 – стиль изменения свойства – довольно интересный атрибут, но об этом расскажу как-нибудь в следующий раз.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Яндекс Диск для совместной работы

30 декабря 2015 ti1schweiger

Работая в команде, необходимо иметь надёжные коммуникации. Как только мы начинали работу над falbar, данный вопрос встал очень жестко. Ведь каждая статья перед появлением в ленте проходит этап подборки, разработки демо и кода, написание основной статьи, редактирование и модерацию. На каждом этапе необходимо обмениваться материалами, что-то перекидывать на проверку, что-то добавлять. Ранее мы пользовались «файлообменником» Скайпом, но скорость передачи даже небольших файлов очень низкая и необходимо присутствие человека по ту сторону монитора для нажатия кнопки подтверждения. Чтобы уйти от необходимости ловить друг друга онлайн, мы перешли на Документы от ВКонтакте – и скорость хорошая, и залить файлы можно в любое время. Залил, прикрепил к сообщению и сбросил – на том конце в любой момент заберут. Однако соц.сеть не радовала своей надежностью и периодические сбои, связанные с невозможностью загрузить файлы на сервер, обратили наш взор к Яндекс Диску.

jQuery end Page Box для всплывающих сообщений

4 февраля 2016 Антон Кулешов

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

Всплывающие окна на jQuery за 3 минуты

8 сентября 2014 Антон Кулешов

Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.