Красивая навигация CSS3 Красивая навигация CSS3

 

Навигация для сайта всегда является неотъемлемым фрагментом в большой головоломке при создании чего то новенького, в интернете можно найти множество сайтов, и они, по своей мере, уникальные в своем построении. Но все дальше пользователей становиться тяжело чем то удивить. В данном уроке мы рассмотрим процесс создания замечательной и весьма необычной вертикальной навигации для ресурса с помощью техники css. Идея заключается в том, что когда курсор мыши наводят на пункты меню, с него плавно выскальзывает изображение с красивым эффектом.

 

ДЕМО

 

Как всегда необходимо начать с создания разметки HTML, в данном случае это будет неупорядоченный список, который будет представлять собой два элемента span и подключенные изображение:

<ul>
    <li>
        <a href="#">
            <span>Художественный директор</span>
            <span>Сергей Петров</span>
        </a>
        <img src="images/1.jpg" alt="image01"/>
    </li>
    
</ul>

 

Как можно заметить, то ничего сложно нет. Следующим этапом будет сама стилизация навигации:

В данном примере элемент .mh-menu li a будет выводится как блочный  и с фоном rgba(255,255,255, 0.8). При наведении курсора на пункт списка, мы будем менять цвет фона на rgba(225,239,240, 0.4):

.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

 

Затем рассмотрим второй элемент span, который также будет менять цвет при наведении курсора мыши на него, но каждый пункт будет окрашиваться в разные цвета. Мы добавляем переход цвета и выделяем элементы с помощью селектора nth-child:

.mh-menu li a span:nth-child(2){
    /*...*/
    transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
    color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
    color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
    color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
    color: #8e7463;
}

 

Теперь рассмотрим как же изображение выскальзывает справа, поэтому координата left изначально имеет значение 0px. Также будет изменяться непрозрачность картинки - от 0 (начальное значение) до 1:

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}

 

 

Вот и все, навигация готова. Обратите внимание на то, чтобы свойство z-index ссылки имеет значение больше, чем у изображения. Чтобы картинка проскальзывала под ссылкой. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


🔖 Выбор по тегам ×

Top