Как сделать красивое меню при помощи CSS/HTML

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

И так вот что мы должны будем получить в итоге.меню

1.  Опишем самую простую навигацию, при помощи неупорядоченного  списка.

<nav>
    <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">Категории</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Портфолио</a></li>
        <li><a href="">Контакты</a></li>
    </ul>
</nav>

2. Теперь опишем стандартные стили для каждого отдельно взятого элемента списка.

nav  {
        display: block;
        width: 100%;
        overflow: hidden;
}

nav ul {
        margin: 80px 0 20px 0;
        padding: .7em;
        float: left;
        list-style: none;
        background: #444;
        background: rgba(0,0,0,.2);
        -moz-border-radius: .5em;
        -webkit-border-radius: .5em;
        border-radius: .5em;
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
        box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}

nav li {
        float:left;
}

nav a {
        float:left;
        padding: .8em 1.5em;
        text-decoration: none;
        color: #555;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-width: 1px;
        border-style: solid;
        border-color: #fff #ccc #999 #eee;
        background: #c1c1c1;
        background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
        background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
        background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
        background: -o-linear-gradient(#f5f5f5, #c1c1c1);
        background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
        background: linear-gradient(#f5f5f5, #c1c1c1);
 }

nav a:hover, nav a:focus {
        outline: 0;
        color: #fff;
        text-shadow: 0 1px 0 rgba(0,0,0,.2);
        background: #fac754;
        background: -moz-linear-gradient(#fac754, #f8ac00);
        background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
        background: -webkit-linear-gradient(#fac754, #f8ac00);
        background: -o-linear-gradient(#fac754, #f8ac00);
        background: -ms-linear-gradient(#fac754, #f8ac00);
        background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
        -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
        box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
/*Зададим округлые углы для первого и последнего элемента списка*/
nav li:first-child a {
        border-left: 0;
        -moz-border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
}

nav li:last-child a {
        border-right: 0;
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
}

Как видно из кода. для предания красивого эффекта мы использовали свойство hover и active. Округлые края мы задали при помощи последнего и первого элемента списка.

Конечно же, некоторые стили, такие как закруглённые углы или слегка заметный градиент не на всех браузерах будет отображаться корректно, но этого стоило ожидать, ведь меню написано только при помощи CSS3 и HTML5.



Один комментарий на «“Как сделать красивое меню при помощи CSS/HTML”»

  1. Виктория:

    Очень красивое и интересное меню. Разобрала код по кусочкам. Как и говорилось, работает не во всех браузерах. Наиболее похоже на оригинал отобразилось в Хроме, но тоже с ошибками… http://i077.radikal.ru/1202/0d/cb75594fb750.png — ссылка на скрин.
    А в общем, очень полезно и интересно. Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *