Сексуальная CSS3 менюшка

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

В сегодняшнем уроке мы поговорим о том, как создать классное меню с помощью волшебства CSS3.

Идея

Если вы - веб-разработчик, то наверняка слышали о таком инструменте, как CSS pre-processors. Less - это, возможно, один из самых известных CSS pre-processor, однако суть не в этом.

Гуляя по сайту LESS, я обратил внимание на их кнопки “download”, которые представляют собой изображение. Я подумал: я ведь могу сделать такие же с помощью одного лишь CSS.

HTML

<nav>
        <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Portfolio</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
        </ul>
</nav>

Ничего лишнего, кроме элемента span. Позже вы увидите, зачем нам нужны эти span.

CSS

Демонстрационный пример содержит также заголовок и логотип (что значит, дополнительные стили), но здесь я предоставлю только стили, касающиеся менюшки.

Обнуление стилей по умолчанию

nav ul
{
        padding: 0;
        margin: 0;
        list-style: none;
}

nav li
{
        float: left;
}

Стилизация ссылок

nav a
{
    float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #831608;
    font: bold 14px Arial, Helvetica;
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}

nav a:active
{
    background: #bb413b;
    position: relative;
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

Стилизация элемента span

nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}

nav a:hover span
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}

Поддержка браузерами

Если вы уже видели, как отображается меню в современных браузерах, то вот, как оно выглядит в старых версиях:

Преимущества

  • Масштабируемость: изменять размеры менюшки, можно просто меняя значение свойста font-size у ссылок:font: bold 14px Arial, Helvetica;
  • Никаких изображений: следовательно, меньше HTTP запросов на изображения, а также легкость в манипулировании и изменении.
  • Вы можете легко преобразовать данное меню в выпадающее меню.

Вывод

Меню, которое мы создали в нашем уроке, - не Sci-Fi и не супер-мега сложное. Идея заключалась в том, чтоб показать, как с помощью CSS3 можно достичь красивого эффекта без единого изображения.

Надеюсь, вам понравилась статья, спасибо за внимание!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Sn9DORwKofc/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Сексуальная CSS3 менюшка | | 2012-06-19 12:05:14 | | Статьи Web-мастеру | | Самой главной частью любого веб-сайта по-прежнему остается навигационное меню. Не важно, вертикальное или горизонтальное, простое или вложенное, меню должно быть обязательно.В сегодняшнем уроке мы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: