наверх





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


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

HTML


<div class="menu">
<a href="#">Главная</a><a href="#">BlueCode</a><a href="#">Главная</a><a href="#">BlueCode</a><a href="#">Главная</a><a href="#">BlueCode</a>
</div>


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

CSS



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

.menu {
    font:15pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Размер и семейство шрифта */
    font-weight:bold;    /* Делаем шрифт толстым */
}


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

.menu a{
    /* Округления START */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    /* Округления END */
    text-decoration:none; /* Убираем нижнюю линию под ссылкой */
    color:#2277B0;    /* Цвет ссылки */
    padding:9px;    /* Внутренний отступ */
} 


Практически все, осталось лишь создать градиент, добавить обводку и добавить это в псевдокласс при наведении:

.menu a:hover{
    border:1px solid #E7E7E7; /* Обводка */
    /* Градиент START */
    background: rgb(249,249,249);
    background: -moz-linear-gradient(top,  rgba(249,249,249,1) 1%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(249,249,249,1)), color-stop(100%,rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top,  rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top,  rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top,  rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%);
    background: linear-gradient(top,  rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 );
    /* Градиент END */
}





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


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


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


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