На каждом сайте используется меню, своеобразный путеводитель по сайту или навигация. Менюшки бывают самые разнообразные: горизонтальные, вертикальные, простые – содержащие несколько ссылок на другие страницы сайта или еще куда-либо, “навороченные” – у которых присутствуют несколько всплывающих окон, в каждом из которых еще куча ссылок-направлений.
В большинстве случаев все они построены по одному принципу:
В HTML-документе с помощью маркированного или нумерованного списков составляется будущее меню, а в CSS определяется, какой вид оно приобретет.
В качестве подопытного кролика возьмем простую менюшку и начнем над ней “колдовать”
<ul> <li><a href = "">Главная</a></li> <li>><a href = "">О нас</a></li> <li><a href = "">Контакты</a></li> <li><a href = "">Разработка</a></li> <li><a href = "">Сайты на заказ</a></li> <li><a href = "">Материалы</a></li> </ul>
Простые вертикальные анимированные меню
Меню такого вида обычно используются в сайтбарах
Т.к все, что будет рассмотрено ниже носит ознакомительный характер, то все обязательные атрибуты для тегов опущены и ссылки соответственно никуда не ведут. Цвета, шрифт и его размеры , общий вид менюшки каждый волен выбирать сам, на свой вкус.
Справа расположены действующие образцы менюшек, на которых можно просмотреть работу анимации.
В связи с тем, что на странице будет множество менюшек даем им персональные классы, также убираем маркеры у списков.
ul.one-menu, .... ul.seven-menu{
list-style: none;
width: 220px;
margin: 15px 0;
Итак, первое меню.
За основу меню взят код, описанный выше, но т.к. мы будем каждой строке кода присваивать свой цвет (background),
то добавим каждому элементу списка свой класс.
<ul class = "one-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 = "grey"><a href = "">Сайты на заказ</a></li> <li class = "aqua"><a href = "">Материалы</a></li> </ul>
Раскрасим их
ul.one-menu li.orange {background: orange;}
ul.one-menu li.red {background:red;}
ul.one-menu li.green {background: green;}
ul.one-menu li.blue {background:blue;}
ul.one-menu li.grey {background: grey;}
ul.one-menu li.aqua {background: aqua;}
Задаем первоначальные размеры цветных “столбиков”, а также стили для ссылок.
ul.one-menu li {
width: 5px;
height: 35px;
line-height: 27px;
padding:0;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.one-menu a{
width: 180px;
text-decoration: none;
font-size: 18px;
color: #666;
text-shadow: 1px 0px 0px #111;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
ul.one-menu li a:hover {
color:#fff;
text-shadow: 1px 1px 0px #333;
}
Анимация
@-moz-keyframes forward {
0% {width: 5px; padding-left: 0px;}
100% {width: 182px;padding-left: 20px;}
}
@-webkit-keyframes forward {
0% {width: 5px;padding-left: 0px;}
100% {width: 182px;padding-left: 20px;}
}
@-moz-keyframes back {
0% { width: 182px;padding-left: 20px;}
100% {width: 5px;padding-left: 0px;}
}
@-webkit-keyframes back {
0% {width: 182px;padding-left: 20px;}
100% {width: 5px;padding-left: 0px;}
}
ul.one-menu li {
-moz-animation: forward 0.8s ease-in-out;
-webkit-animation: forward 0.8s ease-in-out;
}
ul.one-menu li:hover {
width: 180px;
padding-left: 20px;
-moz-animation: forward 0.8s ease-in-out;
-webkit-animation: forward 0.8s ease-in-out;
}
Три схожих меню.
Следующие меню мало чем отличаются по построению, поэтому объединим их описание.
У каждого списка свой класс,так что не перепутаете.
ul.two-menu a {border-bottom: 1px solid #999;}
ul.three-menu a {border:1px solid #999;border-radius: 5px;background: #d0dcef;}
ul.four-menu a {width: 150px; }
ul.two-menu li a:hover {color:#fff;text-shadow: 1px 1px 0px #333;background: #999;}
ul.three-menu li a:hover {color:#fff;text-shadow: 1px 1px 0px #333;
background: #4b4343;margin-left:40px; width: 150px;}
ul.four-menu li a:hover {color:#fff;
-webkit-transform: translate(12px,-5px) scale(1.3,1);
-ms-transform: translate(12px,-5px) scale(1.3,1);
transform: translate(12px,-5px) scale(1.3,1);
background: #2589AE;border-radius: 12px;
text-shadow: 1px 1px 0px #333;
}
Еще один вариант меню.
Menu 5
В данном примере сделаем так, что при наведениии курсора на элемент списка он изменял свой цвет, оставаясь четким, при том,что остальные элементы меню становились размытыми.
Для этого немного изменим внешний вид вид. Сделаем фон темным, а для элементов зададим полупрозрачный белый фон . С помощью псевдоэлеменов :first-child и :last-child закруглим углы у первой и последней ссылки.
Красиво смотрится если в качестве основного фона меню использовать какое нибудь изображение
<div class = "block_menu bg-menu" >
<ul class ="five-menu">
<li><a href = "">Главная</a></li>
<li>><a href = "">О нас</a></li>
<li><a href = "">Контакты</a></li>
<li><a href = "">Разработка</a></li>
<li><a href = "">Сайты на заказ</a></li>
<li><a href = "">Материалы</a></li>
</ul>
</div>
Теперь пропишем все вышесказанное в таблице стилей.
ul.five-menu a{width: 178px;}
.bg-menu {background: #424b4a;margin-bottom: 15px;}
.five-menu li a{
text-shadow: 1px 1px 2px rgba(47, 12, 27, 0.2);
color: #241616;
padding: 7px 20px;
background: rgba(255,255,255,0.4);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.five-menu li:first-child a{
border-radius: 15px 15px 0px 0px;
}
.five-menu li:last-child a{
border-radius: 0px 0px 15px 15px;
}
.five-menu:hover li a{
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
.five-menu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
color: #fcfcfc;
}
Menu 5
Меню, где в качестве первоначально видимых элементов являются картинки.
При наведении курсора появляется строка с текстом. В качестве “преобразователя” цвета фона для текста использованы фильтры CSS
<div class = "block_menu" >
<ul class="six-menu">
<li><a class="Audi" href=""><span>Audi</span></a></li>
<li><a class="BMW" href=""><span>BMW</span></a></li>
<li><a class="Chevrolet" href=""><span>Chevrolet</span></a></li>
<l>><a class="Citroen" href=""><span>Citroen</span></a></li>
<l>><a class="Kia" href=""><span>Kia</span></a></li>
</ul>
</div>
Menu 6
Первоначально текст скрыт и мы видим только картинку,
но при наведении курсора появляется текстовое содержание, оформленное в свою цветовую
гамму. Фильтр CSS добавляет тень и увеличивает контрастность в 1.7 раза.
.six-menu {
border-top: 3px double #333;
border-bottom: 3px double #333;
padding: 5px 3px;
width: 200px;
margin-top: 10px;
}
.six-menu li{
list-style:none;
height:41px;
padding:2px;
width:40px;
}
.six-menu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition:all 0.5s;
transition: all 0.5s;
}
.six-menu a{
border: 1px solid #111;
height:39px;
width:39px;
margin-bottom:15px;
display:block;
position:relative;
}
.six-menu a:hover span{ width:95px; padding:0 35px;overflow:visible; }
.six-menu .Audi {
background:url(../images/Audi-180.jpg) no-repeat;}
.six-menu .Audi:hover {
-webkit-filter: drop-shadow(2px 2px 5px #222) contrast(1.7);
filter: drop-shadow(2px 2px 5px #222) contrast(1.7);}
.six-menu .Audi span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
.six-menu .BMW { background:url(../images/BMW-180.jpg) no-repeat;}
.six-menu .BMW:hover {
-webkit-filter: drop-shadow(2px 2px 5px #222) contrast(1.7);
filter: drop-shadow(2px 2px 5px #222) contrast(1.7);
}
.six-menu .BMW span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
.six-menu .Chevrolet {background:url(../images/Chevrolet-180.jpg) no-repeat;}
.six-menu .Chevrolet:hover {
-webkit-filter: drop-shadow(2px 2px 5px #222) contrast(1.7);
filter: drop-shadow(2px 2px 5px #222) contrast(1.7);}
.six-menu .Chevrolet span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
.six-menu .Citroen {background:url(../images/Citroen-180.jpg) no-repeat; }
.six-menu .Citroen:hover{
-webkit-filter: drop-shadow(2px 2px 10px #222) contrast(1.7);
filter: drop-shadow(2px 2px 5px #222) contrast(1.7); }
.six-menu .Citroen span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
.six-menu .Kia { background:url(../images/Kia-180.jpg) no-repeat;}
.six-menu .Kia:hover {
-webkit-filter: drop-shadow(2px 2px 10px #222) contrast(1.7);
filter: drop-shadow(2px 2px 5px #222) contrast(1.7); }
.six-menu .Kia span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Горизонтальные меню
Такие менюшки используются в основном как навигация по сайту.
Пример такого меню.
<div class="nine-menu">
<ul class="n_menu">
<li> <a href = "" data-clone="Главная">Главная</a></li>
<li> <a href = "" data-clone="О нас">О нас</>></li>
<li> <a href = "" data-clone="Контакты">Контакты</a></li>
<li> <a href = "" data-clone="Разработка">Разработка</a></li>
<li> <a href = "" data-clone="Сайты на заказ">Сайты на заказ</a></li>
<li> <a href = "" data-clone="Материалы">Материалы</a></li>
</ul>
</div>
В данном примере одно изображение заменяется другим, т.е.
вместо первоначально видимого изображения снизу “выплывает” другая картинка. Это конечно не картинки,
а элементы списка, но для простоты воспользуемся словом “картинка”
На самом деле обе картинки присутствуют на странице одновременно, просто нижняя (светлый фон)
в начальный момент скрыта – overflow:hidden. Ее создает не безизвестный нам псевдоэлемент
::before и функцией attr(), которая возвращает значение атрибута выбранного селектора ( в данном случае атрибут data-clone).
При наведении курсора верхняя (темный фон) картинка поднимается вверх на 50рх – margin-top:-50px,
выходит за границу блока и мы ее не видим, а нижняя часть занимает ее место.
Вот такое простое объяснение.
.nine-menu {
width: 100%;
padding: 0 0 15px 0 ;
text-transform:uppercase;
}
.nine-menu ul.n_menu {
margin-left: 0;
height:50px;
margin:0;
padding:0;
overflow:hidden;
}
.nine-menu li {
float:left;
display:inline;
list-style:none;
margin:0;
padding:0;
border-right: 1px solid #aaa;
}
.nine-menu a,
.nine-menu a:before {
display:block;
margin:0;
padding:0px 24px;
line-height:50px;
color:white;
text-decoration:none;
background-image:-webkit-linear-gradient(#900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient( #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}
.nine-menu a:before {
content:attr(data-clone);
position:absolute;
top:100%;
right:0px;
left:0px;
display:block;
background-image:-webkit-linear-gradient(#ddd, white);
background-image:linear-gradient( #ddd, white);
color:#333;
}
.nine-menu a:hover {
margin-top:-50px;
margin-bottom:1px;
}