наверх





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


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

HTML


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


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

CSS



Сначала оформим само меню, то есть класс menu. У него будет лишь свойство transition, внутренние отступы и позиционирование.

.menu {
    /* transition старт */
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    /* transition конец */
    padding:10px 0; /* Внутренние отступы */
    position:absolute; /* Абсолютное позиционирование */
}


Подробнее о некоторых свойствах, написанных выше.
Почему в значение свойства padding было написано 10px 0? Это значит, что сверху и снизу будет отступ по 10px, а по левому и правому краю - 0 px.

А что значит свойство position , со значением absolute? Это значит, что объект, которому задано данное свойство с этим значением, не будет занимать все пространство, то есть не будет фон на всю ширину страницы, а будет лишь занимать ту часть, в которой написан текст.

Теперь, как сделать эффект появления фона, при наведении на любой из пунктов меню? На самом деле, здесь не стоит заморачиваться, а просто дать к классу menu псевдокласс :hover, в котором то и указать фон. Ведь, если посетитель наведет на пункт из меню, то он соответственно и наведет на само меню.

.menu:hover{
    background-color:#E0E0E0;
}


Теперь же осталось отображение ссылок. С ними тоже можно поступить по своему, я же сделал следующим образом:

.menu a {
    font:13pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Размер, семейство шрифта */
    color:#7F7F7F;    /* Цвет ссылки */
    text-decoration:none;    /* Убираем нижнюю линию под ссылкой */
    padding:10px;    /* Внутренние отступы */
}


Фон ссылке, как видите, не задаем, зададим его лишь при наведении:

.menu a:hover {
    background-color:#D3D3D3;
}





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


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


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


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