Автор

31 03.2013
Красивая навигация 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 ссылки имеет значение больше, чем у изображения. Чтобы картинка проскальзывала под ссылкой. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

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

Многие вебмастера и разработчики сайтов не раз задавались вопросом: «Как перевести картинку в CSS»! Представляю Вам конвертер который делает эту задачу реальной!


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

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


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

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


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

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


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close