Горизонтальное меню с лёгким движением вкладок при наведении

 Доброго времени суток, дорогие читатели. Горизонтальное меню с разноцветными вкладками, при наведении курсора.  Зададим ещё лёгкое движение вкладкам менюшки, использую свойство transform. Очень легко можно настроить под любой дизайн. 


меню с разноцветными вкладками

Посмотрите, как оно выглядит на тестовом блоге.


Код меню

<ul class="main-ul">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Об авторе</span></a></li>
<li><a href="#"><span>Все статьи</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
<li><a href="#"><span>Инструменты</span></a></li>
<li><a href="#"><span>Соглашение</span></a></li>
<li><a href="#"><span>Форма связи</span></a></li>
<li><a href="#"><span>Вопросы и ответы</span></a></li>
</ul>
<style>
.main-ul li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
background-color: rgba(000, 000, 000, 0.2);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.main-ul li a span {
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: rgba(120, 120, 120, 0.9);

text-transform: uppercase;
font-family: 'Kotta One', serif;
}
 
.main-ul li:hover span {
color: #fff;
}
.main-ul li:nth-child(1):hover a {
background-color: rgba(175,54,55,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(2):hover a {
background-color: rgba(199, 204, 73, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
 
.main-ul li:nth-child(3):hover a {
background-color: rgba(213, 135, 11, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
 
.main-ul li:nth-child(4):hover a {
background-color: rgba(51, 143, 144, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
 
.main-ul li:nth-child(5):hover a {
background-color: rgba(117,18,98,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
 
.main-ul li:nth-child(6):hover a {
background-color: rgba(33, 136, 215, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
 
.main-ul li:nth-child(7):hover a {
background-color: rgba(109, 109, 109, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
 
.main-ul li:nth-child(8):hover a {
background-color: rgba(152, 120, 92, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
</style>

Меню рассчитано на 8 вкладок. Думаю,  больше и не стоит. 

Настройки совершенно простые

Общий цвет фона менюшки - background-color: rgba(000, 000, 000, 0.2);

Размер и цвет текста - font-size: 20px;  color: rgba(120, 120, 120, 0.9);

По необходимости убирайте участки в коде

.main-ul li:nth-child(8):hover a {
background-color: rgba(152, 120, 92, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

Во всех этих участках  background-color: rgba(152, 120, 92, 0.8); именно цвет который меняется при наведении на неё курсора мыши. Все эти цвета заданы в формате  RGBA. Можно воспользоваться для подбора этим конвертером https://colorscheme.ru/color-converter.html. 

Вот такое горизонтальное разноцветное меню имеем. 

Можно посмотреть ещё одно простое горизонтальное меню с zoom - эффектом и подчёркиванием. Или много других вариантов в категории Меню

Возникнут вопросы, пишите в комментариях. И до встречи.

11 комментариев:

  1. Как всегда, любопытно и, как всегда, как всегда "Лиса и виноград".

    ОтветитьУдалить
  2. Ну да, "весёленькая" менюшечка

    ОтветитьУдалить
  3. Это мой любимый выбор))))) Меню. Некоторые использую везде)))))

    ОтветитьУдалить
  4. Менюшки тоже тема интересная. Простота и разнообразие. выбирай-не хочу.

    ОтветитьУдалить
  5. Прикольно! Спасибо! Куда его вставлять? Я бы на одном из блогов поменяла менюшку.

    ОтветитьУдалить
  6. Ирина, как всегда, в гаджет HTML, забыла написать. И куда - нибудь под шапку или над сообщениями, как у меня на тестовом.

    ОтветитьУдалить
  7. Я так и думала, но решила уточнить...Спасибо!Сейчас попробую в БАДе сделать.

    ОтветитьУдалить
  8. https://blogbadirina.blogspot.com/
    Ну, вот - готово! Поменяла цвета, размер. Стало живенько так!!!
    Вика, как всегда- красиво, просто, интересно!! Спасибо!

    ОтветитьУдалить
  9. Единственно, что у меня не все цвета работают в блоге. Долго пыталась их разнообразить до 100 %, но увы. ...

    ОтветитьУдалить
  10. Ирина, с цветами, возможно, из -за общего зелёного фона. А так , да, живенько. Такая мелочь, но приятно.

    ОтветитьУдалить
  11. Да, Так жизнь из мелочей и состоит!

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML