Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> CSS

Красочное CSS3 меню. Анимированная навигация.


Доброго денька Дорогие друзья! В этом замечательном, но коротком уроке, мы будем создавать красочное меню с выпадающими подпунктами, используя только CSS3 и декоративные элементы из набора «Font Awesome».


 

    Вместо текста в нашем меню, мы будем использовать определённые названия классов, которые впоследствии заменятся на иконки. Это произойдёт за счёт поддержки браузером стандарта HTML5 (практически во всех существующих). Чтобы добавить значки на элементы, вам всего лишь нужно будет присвоить специальное имя класса, а Font Awesome с помощью :before сделает остальную работу за нас.

    HTML

    А вот и разметка с которой мы будем работать:
    index.html

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
                <!-- Другие всплывающие элементы -->
            </ul>
        </li>

        <!-- Другие элементы меню -->

    </ul>
</nav>

    Каждый пункт главного меню, содержит в себе собственный маркированный список. Внутри каждого из них, есть информация об иконке класса (см. полный список иконок классов здесь), а ещё внутри, содержится вложенный список, который будет отображаться в выпадающем меню при наведении курсора.

    CSS

    Как видно из фрагмента HTML выше, у нас есть маркированные списки, вложенные в основной маркированный список, поэтому, мы должны писать наш CSS с осторожностью. Ведь мы не хотим, чтобы оформление верхнего элемента ul, передалось вложенному ul потомку. К счастью, реализовать это легко, для каждого ul, мы будем использовать свой селектор «>», вот так:

assets/css/styles.css

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

    Данный стиль, ограничивает ширину нашего меню являющегося прямым потомком  элемента  #colorNav, и создаёт правила для отступов которое можно перевести так (сверху: 0, слева: авто, снизу: 0, справа: авто). Имея это ввиду, давайте теперь посмотрим на правила ul, для наших дочерних элементов li:

#colorNav > ul > li{ /* will style only the top level li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

    Для того чтобы наши элементы меню располагались в одну строку, мы задаём inline-block, это делается для того, чтобы выпадающие списки, имели относительные координаты и правильно позиционировались на странице. Теперь давайте разберёмся с нашими иконками. Якоря элементов <a> и будут содержать в себе картинку из набора «Font Awesome», ниже мы видим стили, определяющие как это будет выглядеть:

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

    Настало время перейти и к раскрывающимся спискам меню. Здесь мы будем определять переходы анимации CSS3. Мы установим начальную высоту элементов в 0px, чтобы при загрузке страницы, их не было видно сразу. А при наведении курсора, мы будем увеличивать высоту, что приведет к постепенному появлению:

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;

    /* Важно показывает/скрываем CSS анимацию */
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

Запуск анимации:

#colorNav li:hover ul{
    max-height:200px;
}

    Как мы видим, наш выпадающий список, будет иметь в высоту 200px. К сожалению, в CSS нет способов задавать высоту автоматически, поэтому будем задавать её фиксировано. Если ваше меню будет по высоте больше, вы можете изменить это значение на требуемое.

    Следующий шаг – это стили для наших раскрывающихся списков и их элементов:

#colorNav li ul li{
    background-color:#313131;
}
#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}

#colorNav li ul li:nth-child(odd){ /* каждому второму всплывающему элементу выделение цветом */
    background-color:#363636;
}

#colorNav li ul li:hover{
    background-color:#444;
}

#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}

#colorNav li ul li:first-child:before{ /* где появляться выпадающему меню */
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

    Последний шаг. Давайте применим фантазию, и украсим наше меню цветом! Вот 5 вариантов которые выбрал я:

#colorNav li.green{
    /* Это цвет пункта меню */
    background-color:#00c08b;

    /* Это цвет иконки */
    color:#127a5d;
}

#colorNav li.red{        background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{        background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}


    Цвет значков вы тоже можете менять, очень это просто, нужно лишь задать свойство color. Это означает, что всю работу с цветом, вы можете осуществлять лишь с помощью CSS.

    Сделано!
    Сегодня мы познакомились ещё с одним замечательным уроком, входе которого научились создавать классное цветное меню, с выпадающими списками и html5 иконками вместо текста. Стоит заметить, что наш пример не использовал никаких скриптов JS или изображений, он достаточно прост и создаётся всего за пару минут. К иконкам вы можете применять различные эффекты, такие как: размер, цвет или тень.

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


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

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

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

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


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

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

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

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

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

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

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

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