Меню созданное на чистом css, без использования каких либо изображений и скриптов.
При создании этого меню используется анимация (@-keyframes), поэтому, плавное открытие пунктов меню, будет работать только в современных браузерах.
В нашем примере два вида плавного открытия меню. Структура нашего меню:
Добавляем в стиль наш CSS:
При необходимости цвета меняем на свои:
Для добавления пунктов меню со своим цветом, добавляем, например:
И дописываем класс в стиль:
При создании этого меню используется анимация (@-keyframes), поэтому, плавное открытие пунктов меню, будет работать только в современных браузерах.
В нашем примере два вида плавного открытия меню. Структура нашего меню:
Код: Выделить всё
<ul class="nice-menu">
<li class="orange"><a href="#">Главная</a></li>
<li class="red"><a href="#">О нас</a></li>
<li class="green"><a href="#">Портфолио</a></li>
<li class="blue"><a href="#">Блог</a></li>
<li class="bright"><a href="#">Контакты</a></li>
<li class="dark"><a href="#">К статье</a></li>
</ul>
<ul class="nice-menu bounce">
<li class="orange"><a href="http://cabinetadmina.ru/">Главная</a></li>
<li class="red"><a href="#">О нас</a></li>
<li class="green"><a href="#">Портфолио</a></li>
<li class="blue"><a href="#">Блог</a></li>
<li class="bright"><a href="#">Контакты</a></li>
<li class="dark"><a href="#">К статье</a></li>
</ul>
Код: Выделить всё
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #000;
text-shadow: 0px 0px 3px #fff;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
Код: Выделить всё
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
Код: Выделить всё
<li class="aqua"><a href="#">Пункт</a></li>
Код: Выделить всё
ul.nice-menu li.aqua {
background: rgb(0,255,255);
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Доброе утро. Есть у меня на форуме PHPBB такая функция как анимация в шапке. Там геометрические фигуры движутся. Как добавить такое же в шапку...
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...