Автор

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

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

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


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

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.


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

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


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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close