Красочное анимированное меню навигации на CSS3


https://pyrko.com.ua/razrabotka/sozdanie-vyipadayushhego-mega-menyu-na-css3.html

Красочное анимированное меню навигации на CSS3

HTML

Вот разметка, с которой мы будем работать:

index.html


<nav id="colorNav">
<ul>
<li>
<a href="#"></a>
<ul>
<li><a href="#">Dropdown item 1</a></li>
<li><a href="#">Dropdown item 2</a></li>
<!-- More dropdown options -->
</ul>
</li>

<!-- More menu items -->

</ul>
</nav>

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

Красочное анимированное меню навигации на CSS3

 

CSS

Как вы видите в HTML-фрагменте выше, мы маркировали список, вложенный в основной ul, здесь требуется внимательность в написании CSS, если мы не хотим, чтобы стили верхнего списка применились для каскада у потомков.
К счастью, для этого есть дочерний CSS-селектор ‘>‘

assets/css/styles.css


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

Этим мы ограничиваем ширину и отступы лишь для первого неупорядоченного списка, являющегося прямым потомком нашего #colorNav.
Имея это ввиду, давайте посмотрим, как фактически выглядят пункты меню


#colorNav > ul > li{ /* will style only the top level 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;
}

Мы задаем свойству display значение inline-block, чтобы элементы списка отображались в одной строке, и задаем относительное позиционирование, чтобы можно было скорректировать правильное выпадание списка.
Ссылки имеют иконки по факту, как это определено шрифтом Awesome.


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

Теперь мы можем продвигаться дальше, к выпадающему списку. Здесь мы зададим CSS3-переходы анимации. Установим максимальную высоту в 0 пикселей, что позволит нам скрывать выпадающий список изначально.
При наведении мы будем анимировать изменение максимального значения высоты до наибольшего значения, что приведет к раскрытию списка.


#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;

/* This is important for the show/hide CSS animation */
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;
}

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

Следующим шагом мы зададим стили для выпадающих пунктов списка:


#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){ /* zebra stripes */
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{ /* the pointer tip */
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{
/* This is the color of the menu item */
background-color:#00c08b;

/* This is the color of the icon */
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;}

Пользуясь одним лишь аспектом применения шрифта Font Awesome, вы можете изменять цвет иконки, просто объявив свойства цвета. Это значит, что все настройки можно сделать, прибегая к одному лишь CSS.

Previous Создание выпадающего мега меню на CSS3
Next Пользовательская страница для ошибки базы данных

Suggested Posts

Возврат к основам или как создать HTML5 шаблон?!

Настройка эффектов слайдера и карусели в Opencart 1.5.x

MooBoo — шаблон интернет-магазина моды OpenCart

Изменяем шаблон Opencart

OpenCart 2.2 — пять свежих адаптивных шаблонов от pavothemes

Как написать robots.txt для WordPress