наверх





Оригинальное меню с двойной рамкой. При наведении на пункт меню - фон рамки переходит в фон ссылки, а фон ссылки уходит в фон меню. Отлично подойдет для светлых дизайнов.


В этом примере я покажу, как создать простое, но весьма оригинальное меню для сайта. Меню будет простым по структуре и свойствам с тегами. Фишка в том, что при наведении, фоны объектов плавно меняются. Дочерний объект, приобретает цвет фона родителя, а он наоборот, приобретает фон дочернего объекта. Начнем с HTML структуры, а она простая:

HTML


<div class="menu"><span><a href="#">Link</a></span><span><a href="#">BlueCode</a></span><span><a href="#">Link</a></span></div>


Как видите, здесь лишь один блочный тег, <div>, родительный элемент пункта меню это тег <span>, а его дочерний элемент, который и будет ссылкой, это тег <a>, то есть обычная ссылка.

CSS



Начнем с оформления родителя, то есть с тега <span>. Самому классу меню, стилей можно не применять, если только вы не хотите добавить ему свой фон, отступы и тому подобное. В моем примере этого не будет, перейдем к оформлению самих пунктов:

.menu span{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
background-color:#E9E9E9;     /* Фон */
padding:15px;                /* Внутренний отступ */
border:1px solid #DBDBDB;    /* Обводка */
margin-right:5px;            /* Внешний отступ справа */
}


Как видите, нечего важного, кроме как свойства transition, который добавит плавности, здесь нет. Все остальное можно изменить или добавить что то новое.

Теперь оформим дочерний элемент, то есть ссылку:

.menu span a{
background-color:#74A7FC;    /* Фон */
padding:5px;                /* Внутренний отступ */
border:1px solid #478CFB;    /* Обводка */
color:#fff;                    /* Цвет ссылки */
text-decoration:none;        /* Убираем нижнюю линию у ссылок */
font:13pt Consolas, Verdana; /* Размер, семейство шрифта */
font-weight:bold;            /* Делаем текст, а здесь ссылку, жирным  */
}


Тоже, как видите, здесь все просто. Интересное дальше.

Теперь нужно сделать, что бы при наведении изменился цвет, причем у обоих элементов. Делается это просто, с созданием двух селекторов с псевдоклассами. Для начала сделаем так, что бы при наведении на родительный элемент изменялся цвет дочернего элемента, а так как наш дочерний элемент находится в родительном элементе, то и при наведении на него, он тоже будет менять свой цвет:

.menu span:hover a{
background-color:#E9E9E9;
border:1px solid #DBDBDB;
color:#74A7FC;
}


Теперь, если вы наведете на пункт меню, то увидите, как внутренний элемент изменил свой фон, а внешний нет. Теперь просто сделаем следующие:

.menu span:hover{
background-color:#74A7FC;
border:1px solid #478CFB;
}


Как видите, нечего не нужно мудрить, все и так просто. Вообще, если хотите разнообразить меню, то можно использовать псевдокласс :nth-child для пунктов меню. Например, четным увеличить внутренний отступ или еще что-нибудь. Если же вы не знаете как это сделать, спрашивайте в комментариях, обязательно отвечу.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.