Простое по своему формату горизонтальное меню с красивым эффектом, который осуществляется при наведение курсора на один из многих запросов. Так как считаю на стандартный шаблон оно не сильно подойдет, хотя с отличной доработкой по стилистике, то все возможно.
Но для оригинальной стилистике безусловно станет отличным предложением по установке. Это красиво исполненный эффект, также сама навигация, который можно поставить как на созданную страницу или под созданный модуль категорий.
При проверки так выглядит:
Приступаем к установке:
HTML
Код
<ul>
<li><a href="http://zornet.ru">Главная</a></li>
<li><a href="http://zornet.ru/forum">Скрипты</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Контакты</a></li>
</ul>
CSS
Код
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
}
ul li a {
position: relative;
display: block;
margin: 0 10px;
padding: 5px 10px;
color: #aaa;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
overflow: hidden;
}
ul li a::before {
content: '';
position: absolute;
top: calc(50% - 2px);
left: -100%;
width: 100%;
height: 4px;
background: #2196f3;
transition: 0.5s;
}
ul li a:hover {
color: #fff;
}
ul li a:hover::before {
animation: animate .5s linear forwards;
}
@keyframes animate {
0% {
top: calc(50% - 2px);
left: -100%;
height: 4px;
z-index: 1;
}
50% {
top: calc(50% - 2px);
left: 0;
height: 4px;
z-index: 1;
}
100% {
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
}
Как можно заметить, что здесь представлен каркас и один эффект, где при правильном оформление эта навигация приобретет совершенно другой вид.
Демонстрация
