Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> CSS

Анимированное CSS3 меню


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


HTML

    Первый шаг заключается в создании HTML каркаса нашего меню. Мы будем использовать HTML5 теги. Для того чтобы Internet Explorer правильно их воспринял, в тег head вверху нашей странички мы подключим библиотеку, закомментированную таким образом, чтобы понял её только IE (это поможет ему правильно отобразить наше меню) и на остальные браузеры это не повлияет.

Создаём index.html и записываем туда данный код:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

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

        <!-- Our CSS stylesheet file -->

        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Including the Lobster font from Google's Font Directory -->

        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

        <!-- Enabling HTML5 support for 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>&laquo; 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>

    Вы можете заметить, что в нашем уроке, мы используем необычные шрифты, найти их можно здесь Google API. Наш шрифт Lobster который мы используем в нашем меню, загрузить можно с веб-каталога шрифтов Google, который предоставляет большое количество самых разнообразных декоративных шрифтов которые можно свободно скачать и применять у себя на сайте.
    В тексте документа, мы поместили заголовок, навигационные и нижний колонтитулы тегами HTML5, которые делят страницу на три секции с семантическим значением. Мы будем использовать тег UL для создания списка и LI для создания элементов навигационного меню.

    К списку UL мы применим класс fancyNav, который мы будем использовать, чтобы ограничить влияние других стилей CSS. Это позволит сделать код более переносимым и ограничить любые возможные побочные эффекты. А так же, чтобы указать на то, что каждый из элементов LI имеет уникальный идентификатор, связанный с якорем элемента ссылки внутри них. Это позволит нам использовать: псевдо-класс цели в стиле выбранного пункта меню.

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

CSS 
    Вы можете удивиться, узнав что навигацию по меню мы строим не используя изображений (за исключением иконки дома - прозрачный PNG). Все это делается с помощью CSS3 градиентов, теней, и нескольких фонов. 
Что касается поддержки браузера, меню работает в последних версиях Firefox, Chrome, Safari и Opera, и даже IE от 7 версии и выше правильно отобразит его. Тем не менее, оно выглядит лучше в Firefox 4, так как она поддерживает анимацию :before и :after псевдо-элементов с помощью перехода transition. 
    Наши CSS стили мы будем записывать в файл styles.css. Для вашего удобства, вы можете скачать все файлы вверху странички нажав на кнопку "демо", а сейчас мы сосредоточимся прежде всего на самом меню навигации, поэтому я буду пропуская скучные части файла.
    Начнем со стиля меню навигации! Опишем правила для неупорядоченного списка - а так же класса fancyNav, и LI элементов:

.fancyNav{

    /* Affects the UL element */

    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{

    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    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);

    /* Adding a 1px inset highlight for a more polished efect: */

    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;

}

    Обратите внимание на огромный список CSS3 синтаксиса градиента. Все последние версии градиента Firefox, Chrome и Safari поддерживают. Opera и IE 10, также правильно показывают их в своих последних версиях. Изначально было два конкурирующих синтаксиса, компании Mozilla (Firefox) с одной стороны и WebKit (Chrome и Safari) с другой, но позже стили градиенат Firefox утвердили в обоих, была достигнута договоренность о стандартизации промышленного стандарта.
    Следующий шаг заключается в использовании: после псевдо-элементов, для создания тени, отображающейся при наведении курсора мыши на пункт меню:

.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */    

    content:'.';

    text-indent:-9999px;

    overflow:hidden;

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    z-index:1;

    opacity:0;

    /* Gradients! */

    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));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    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;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;

    -webkit-transition:0.25s all;

    -o-transition:0.25s all;

    transition:0.25s all;

}

    li:after создаёт псевдо элементы для каждого LI элемента в меню что позволяет им иметь приятный горизонтальный градиент, а при наведении курсора мыши затенять его. Далее делаем их невидимыми по умолчанию (непрозрачность установливаем ​​в 0), для того чтобы используя CSS3 переходы и оживить его при наведении мыши меняя непрозрачность с 0 до 100.

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

/* Treating the first LI and li:after elements separately */

.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;

}

/* Treating the last LI and li:after elements separately */

.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{

    /* This property triggers the CSS3 transition */

    opacity:1;

}

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

    Примечание: Вы можете добавить class = "active" к элементу списка, чтобы сделать его выбранным / активным по умолчанию. Это полезно при создании шаблонов или создании меню с помощью серверного языка....

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

.fancyNav:hover li.selected:after,

.fancyNav:hover li:target:after{

    /* Hides the targeted li when we are hovering on the UL */

    opacity:0;

}

.fancyNav li.selected:hover:after,

.fancyNav li:target:hover:after{

    opacity:1 !important;

}

    И, наконец, все, что осталось, это стиль привязки элементов ссылок <a>, которые находятся в LI элементах меню.

/* Styling the anchor elements */

.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(/zhitelyam/&) no-repeat center center;

    display: block;

    overflow: hidden;

    padding-left: 12px;

    padding-right: 12px;

    text-indent: -9999px;

    width: 16px;

}

    На этом наша работа по созданию анимированного меню CSS3 завершена, надеюсь вам понравилось!
    Вы так же можете настроить это меню под стиль вашего сайта, изменяя значения шрифтов и цветов, это делается просто, а вам и вашим посетителям будет приятно видеть стильное меню которое приятно пощёлкать. Наибольшее количество кода который мы написали, нужен для того чтобы большинство браузеров правильно отобразили меню, потому как стандарты CSS3 у разных браузеров разные. Если у вас возникли вопросы, вы можете оставить комментарий, буду рад ответить.
Источник урока http://tutorialzine.com


Дата публикации: 19.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 619
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: