Страницы

среда, 7 января 2015 г.

Простое меню на CSS

Меню в кортом при наведении на один из пунктов он подчеркивается снизу, а другие элементы меню становятся размытыми.



HTML:
<nav>
<a href="#program-link">ЦЕЛЬ</a>
<a href="#skills-link">РЕЗУЛЬТАТ</a>
<a href="#technics-link">ТЕХНИКИ</a>
<a href="#stages-link">ЭТАПЫ</a>
</nav>
CSS:
nav
{
/*left: 364px;*/
/*position: absolute;*/
float: right
}
nav {
    /*background: none repeat scroll 0 0 #202033;*/
    /* box-shadow: 0 3px 5px #555555;*/
    position: relative;
    text-align: center;
}
nav:hover a {
    color: transparent;
    text-shadow: 0 0 3px #666666;
}
nav a {
color: #B6B2B2;
display: inline-block;
font-family: tahoma;
font-size: 1.87em;
height: 54px;
line-height: 56px;
text-decoration: none;
transition: all 0.3s ease 0s;
width: 132px;
font-family: 'ubuntu condensed';
}
nav a:hover {
    border-bottom: 5px solid #91C9C0;
    color: #91C9C0;
    text-shadow: none;
}
@media screen and (max-width: 620px) {
nav a {
width: 49%;
}
}
@media screen and (max-width: 300px) {
nav a {
width: 100%;
}
}

Комментариев нет:

Отправить комментарий