Автор

07 04.2013
Выпадающее меню с помощью CSS3

Выпадающее меню с помощью CSS3


 

Навигация на сайте это неотъемлемый элемент, ведь с помощью нее пользователь с легкостью может перейти к необходимой информации, не задаваясь поиском информации теряя на это драгоценное время. Но порой необходимо поместить в меню достаточно много информации, а это не весьма удобно, ведь меню станет достаточно объемным и будет занимать много места, а это плохо скажется на визуальном оформлении сайта. Что же делать в таком случае? выход достаточно простой, нам необходимо создать выпадающее меню для сайта, которое будет отлично вписываться в дизайн сайта.

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 1. HTML

Для разметки нам необходимо создать неупорядоченный список, в середине которого будет находиться класс с иконкой, далее нам необходимо построить структуру второго списка, который будет появляться при наведении курсора мышки.

<nav id="colorNav">
 <ul>
 <li class="green">
 <a href="#" class="icon-home"></a>
 <ul>
 <li><a href="#">Подпункт 1</a></li>
 <li><a href="#">Подпункт 2</a></li>
 <!-- Другие выпадающие пункты -->
 </ul>
 </li>

<!-- Другие пункты меню -->

</ul>
</nav>

 

С разметкой закончили, теперь перейдем к стилям.

Шаг 2. CSS

Как вы заметили с разметки выше у нас есть неупорядоченные списки вложенные в основной элемент ul. По этому нам не нужно, чтобы стили верхнего элемента ul каскадно применялись к вложенным спискам.

#colorNav > ul{
	width: 450px;
	margin:0 auto;
}

 

Далее установим ширину поля для неупорядоченного списка, который является подпунктом #colorNav.

#colorNav > ul > li{ /* стили только для элементов li верхнего уровня */
	list-style: none;
	box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
	display: inline-block;
	line-height: 1;
	margin: 1px;
	border-radius: 3px;
	position:relative;
}

 

Теперь установим значение inline-block для свойства display, при этом элемент ссылки содержит иконку, которая определяется шрифтом Font Awesome.

#colorNav > ul > li > a{
	color:inherit;
	text-decoration:none !important;
	font-size:24px;
	padding: 25px;
}

 

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

#colorNav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	width:180px;
	left:50%;
	margin-left:-90px;
	top:70px;
	font:bold 12px 'Open Sans Condensed', sans-serif;

	/* Важно для анимации вывода/скрытия */
	max-height:0px;
	overflow:hidden;

	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
}

 

Теперь необходимо запустить анимацию.

#colorNav li:hover ul{
	max-height:200px;
}

 

Теперь зададим стили для выпадающего списка.

#colorNav li ul li{
	background-color:#313131;
}

#colorNav li ul li a{
	padding:12px;
	color:#fff !important;
	text-decoration:none !important;
	display:block;
}

#colorNav li ul li:nth-child(odd){ /* полоски зебры */
	background-color:#363636;
}

#colorNav li ul li:hover{
	background-color:#444;
}

#colorNav li ul li:first-child{
	border-radius:3px 3px 0 0;
	margin-top:25px;
	position:relative;
}

#colorNav li ul li:first-child:before{ /* указатель подсказки */
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#313131;
	left:50%;
	top:-10px;
	margin-left:-5px;
}

#colorNav li ul li:last-child{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

 

Далее разукрасим элементы меню.

#colorNav li.green{
	/* Цвет пункта меню */
	background-color:#00c08b;

	/* Цвет иконки */
	color:#127a5d;
}

#colorNav li.red{		background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{		background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{	background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{	background-color:#df6dc2;color:#9f3c85;}

 

Со стилями закончили, ничего сложного.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

31 01.2017
Выпадающее меню с помощью CSS3

Если вы решили использовать защищенный протокол на страницах своего сайта, вы молодец. Используя HTTPS-соединение, вы заботитесь о конфиденциальности данных своих пользователей.


21 04.2013
Выпадающее меню с помощью CSS3

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


02 04.2013
Выпадающее меню с помощью CSS3

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


08 07.2013
Выпадающее меню с помощью CSS3

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close