наверх





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


В этом примере я покажу, как сделать простое и симпатичное меню, с использованием CSS, как оформление, и простую HTML структуру. Так же, меню будет горизонтальным. Начнем с структуры:

HTML


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


Как видите, пунктами меню будут теги ссылок и они не будут никак окружены другими тегами. Это намного проще и удобнее.

CSS



В CSS будет лишь два селектора и псевдокласс: само меню, пункты и псевдокласс при наведении на пункт. Начнем с меню.

.menu {
padding:5px;                /* Внутренние оступы */
background-color:#19181D;    /* Фон */
color:white;                /* Цвет текста*/
font:12pt 'Iceberg', cursive;    /* Размер, семейство шрифта */    
}


В меню был использован нестандартный шрифт Iceberg, взятый из Google Web Font. Поэтому, можете заменить его на другой.

Далее оформим сами пункты:

.menu a{
-moz-box-shadow:inset 1px 2px 5px #26252C;
-webkit-box-shadow:inset 1px 2px 5px #26252C;
box-shadow:inset 1px 2px 5px #26252C;
padding:4px;                /* Внутренние оступы */
text-decoration:none;        /* Убираем нижнюю линию под ссылкой */
background-color:#2C2B33;    /* Фон */
border:1px solid #26252C;    /* Обводка */
color:white;                /* Цвет ссылки */
}


Ну и сам псевдокласс при наведении:

.menu a:hover{
background-color:#26252C;    /* Фон */
}


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




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


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


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


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