Всем приветы и ответы!
И в сегодняшнем посте мы расскажем о том, как реализовать на своём сайте, простой, но интересный эффект при наведении стрелкой мыши на один из пунктов горизонтального меню!
И будем всё делать без использования JS!
HTML код
Для начала необходимо установить на HTML страницы сайта вот такой небольшой код горизонтального меню:
<nav class="menu-top">
<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>
</ul>
</nav>
Как вы ведите, мы использует тег <nav> в который как правило помещаем приоритетные ссылки!
CSS стили
А теперь собственно говоря само оформление выше предоставленного HTML кода!
Надо прописать в файле под названием style.css вот такой код в самый низ:
/* Горизонтальное меню
-------------------------------------------*/
.menu-top {
float:left;
width: 100%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 2px 0px #dedede;
}
.menu-top ul {
list-style: none;
text-align: center;
}
.menu-top ul li {
display: inline-block;
}
.menu-top ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #777;
font-weight: 700;
margin: 0 10px;
position:relative;
z-index: 1;
}
.menu-top ul li a,
.menu-top ul li a:after,
.menu-top ul li a:before {
transition: all .5s;
}
.menu-top ul li a:hover {
color: #91640F;
}
.menu-top ul li a:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: #F1C40F;
visibility: none;
opacity: 0;
z-index: -1;
}
.menu-top ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}
На этом у меня всё! Удачных решений!
Какое интересное меню, эффект очень мне понравился, забрала к себе в блог, буду ставить свои немыслимые эксперименты.
Я рад, что вам понравилось, позовите потом на эксперименты, нам будет интересно!