Создаем анимированное меню с помощью CSS3

В этом коротеньком уроке я продемонстрирую вам всю силу эффектов и переходов CSS3, которыми мы воспользуемся для создания меню, никак не зависящего от JavaScript, которое украсит ваш сайт или шаблон. Мы воспользуемся такими клевыми свойствами CSS3, как псевдо-селектор :target и элемент :after.

HTML

Во-первых, создадим каркас сайта. Мы будем широко применять HTML5, поэтому для IE добавьте этот специальный скрипт в заголовке страницы (<head>). Так как он заключен в условные комментарии, он никак не повлияет на отображение в других браузерах, кроме IE.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

        <!-- файл со стилями CSS -->
        <link rel="stylesheet" href="/assets/css/styles.css" />

        <!-- подключаем шрифт Lobster из Google Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

        <!-- блокируем использование HTML5 для Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>« Read and download on Tutorialzine</h2>
        </header>

        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>

        <footer>Looks best in Firefox 4, usable everywhere.</footer>

    </body>
</html>

Вы, наверное, заметили, что мы подключили стиль CSS от Google API. Он включает объявление @font-face и шрифт Lobster из директории гугловских шрифтов, чье количество уже превысило 100, причем все они бесплатны.

В теле документа у нас три элемента HTML5: header, nav и footer, которые делят документ на три логические части. Сконцентрируемся на элементе nav, куда мы поместим список ul. Это и будет наше меню.

К нашему ненумерованному списку применим класс fancyNav, который мы будем использовать для лимитирования эффектов CSS стилей, которые мы сейчас напишем. Это сделает код более мобильным и не даст каким-то лишним стилям повлиять на отображение нашего меню. Обратите внимание на еще одну очень важную вещь: у каждого элемента списка (li) - свой уникальный ID, на каждый из которого будут ссылаться ссылки внутри элементов списка. Это не даст нам использовать псевдо-класс :target для стилизации текущего элемента меню.

Давайте теперь перейдем к стилям CSS.

CSS

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

Что касается поддержки браузерами, то меню работает в последних версиях Firefox, Chrome, Safari и Opera, и в то же время в IE старше 7ой версии. Тем не менее лучше всего меню отображается в Firefox 4, так как он поддерживает анимирующие псевдо-элементы :before и :after через свойство transition (в других браузерах такого пока нет).

Наши CSS стили помещены в assets/styles.css. Предлагаю вам теперь загрузить файл со стилями и открыть его в текстовом редакторе. Для начала рассмотрим стили, касающиеся только самого меню, поэтому я кое-что буду пропускать.

Давайте начнем украшать наше меню! Сначала напишем стили для ненумерованного списка с классом fancyNav и для элементов этого списка:

.fancyNav{
    /* для списка UL */
    overflow: hidden;
    display: inline-block;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
    /* цвета и градиенты CSS3, поддерживаемые большинством браузеров */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* добавляем 1px тени для сглаживания: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}

Обратите внимание на огромный список градиентов. Все новые версии Firefox, Chrome и Safari поддерживают все градиенты. Это же касается Opera и IE 10. Сначала было два конфликтующих синтаксиса, для Firefox и для браузеров Webkit (Chrome и Safari), но Firefox принял стандартный синтаксис написания градиентов.

Следующим шагом будет создание тени с помощью псевдо-элемента :after. Эти тени будут отображаться при наведении курсора.

.fancyNav li:after{

    /* создаем псевдо-элемент внутри каждого элемента LI */ 

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* градиенты! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* создание рамок с помощью box-shadow. это полезно, так как никак не влияет на размер самого элемента. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* плавный переход для свойства opacity */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}

С помощью элемента :after можно создавать очень стильные вещи. У него есть плавный горизонтальный градиент, который отображается при наведении курсора. По умолчанию градиент невидимый, с помощью CSS3 переходов мы анимируем его отображение, задавая значение свойства opacity от 0 до максимума, при наведении курсора. К сожалению, на данный момент только Firefox поддерживает анимацию псевдо-элементов, но остальные браузеры вот-вот добавят это свойство.

С помощью псевдо-элементов :first-child и :last-child мы зададим отдельные стили для первого и последнего пунктов меню.

/* для первого LI и li:after элемента отдельно */

.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* для последнего LI и li:after элементов */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* это запустит CSS3 переходы */
    opacity:1;
}

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

На заметку: вы можете добавить одному из элементов списка class=”selected”, чтобы он по умолчанию был выбран. Это полезно при создании шаблонов.

После этого нам нужно подкорректировать немножко наше меню. Спрячем текущий элемент при повторном наведении курсора на меню:

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* прячет li при наведении на весь список UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}

Все, что осталось сделать, - это стилизовать ссылки, заключенные в элементы списка:

/* стилизация ссылок */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}

На этом всё.

Итоги

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

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

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

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



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

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