Выпадающее анимированное меню на CSS3

Несомненно, что особенности CSS3 (трансформации и анимации) позволяют придать дизайну проекта более утонченный вид. В данном уроке мы построим анимированное выпадающее меню на CSS3 с некоторыми интересными эффектами.

Выпадающее меню

demosourse

В данном меню будет использоваться следующий эффект при выводе подпунктов:

Анимация         подпунктов

 

HTML

Структура HTML кода для меню используется стандартная для таких случаев:

<ul id="menu">
	<li><a href="/">Главная</a></li>

	<li>
		<a href="">Категории</a>
		<ul>
			<li><a href="">CSS</a></li>
			<li><a href="">Графический дизайн</a></li>
			<li><a href="">Инструментарий</a></li>
			<li><a href="">Веб дизайн</a></li>
		</ul>
	</li>
	<li><a href="">Проекты</a></li>
	<li><a href="">О нас</a></li>
	<li><a href="">Контакты</a></li>
</ul>

 

CSS

Выполняем сброс для элемента ul:

#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

Элемент #menu является основным для нашего меню. Градиенты, тени и скругленные углы помогут нам создать следующее оформление для него:

Оформление         основного элемента меню

#menu {
        width: 960px;
        margin: 60px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: -moz-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background-image: -webkit-linear-gradient(#444, #111);
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0 1px 1px #777;
        -webkit-box-shadow: 0 1px 1px #777;
        box-shadow: 0 1px 1px #777;
}

Отключаем обтекание:

#menu:before,
#menu:after {
        content: "";
        display: table;
}

#menu:after {
        clear: both;
}

#menu {
        zoom:1;
}

Теперь оформим элементы списка.

Оформление         элемнетов списка

Обратите внимание на селектор #menu li:hover > a . Он работает следующим образом: выбрать элемент “a”, который является потомком элемента “li” ; элемент “li” должен иметь предка “#menu”.

#menu li {
        float: left;
        border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
}

#menu a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
        color: #fafafa;
}

*html #menu li a:hover { /* Только для IE6 */
        color: #fafafa;
}

С помощью трансформаций CSS3 мы можем анимировать изменения свойств CSS, таких как  margin или opacity. Воспользуемся данной возможностью для оформления эффектного появления подменю:

Появление         подменю

#menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 9999;
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}

#menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}

#menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}

#menu ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
}

#menu ul a:hover {
        background-color: #0186ba;
        background-image: -moz-linear-gradient(#04acec,  #0186ba);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);
}

Теперь займемся первым и последним пунктом в списке подменю:

Первый и         последний пунткы подменю

#menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}

#menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
}

 

jQuery

IE6 требует дополнительных действий:

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
        $('li').has('ul').mouseover(function(){
                $(this).children('ul').css('visibility','visible');
                }).mouseout(function(){
                $(this).children('ul').css('visibility','hidden');
                })
  }
});

Так как псевдо-класс :hover не работает в других элементах, кроме ссылки, нужно добавить небольшой код jQuery для устранения проблемы.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/css3-animated-dropdown-menu
Перевел: Сергей Фастунов
Урок создан: 1 Декабря 2011
Просмотров: 67002
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Декабря 2011 12:09
    Дзирт_До_Урден
    визуально -- по моему это уже было, но код другой. покопаемся и сравним разницу, а так --- красиво. в закладки. спс!!!
    • 1 Декабря 2011 12:12
      artamonov
      Там не было анимации вроде
      • 2 Декабря 2011 20:19
        FIFAGamer
        Да, не было!
  • 1 Декабря 2011 12:34
    gw_peshekhonov
    было
  • 1 Декабря 2011 14:36
    Xamle
    повтор, было уже. Чето последнее время стали выкладывать только css3 и html5, не рано ли?! большая часть браузеров не поддерживает их.
    • 1 Декабря 2011 15:06
      asizintsev
      для этого существует доработка сайта подключаешь код и все работает
    • 2 Декабря 2011 19:29
      zloboglaz
      Большая часть? Я б сказал толька IE...
    • 2 Декабря 2011 20:01
      Pacifik
      Это технология, которая уже наступила, просто она еще не в релизе, нужно приучать народ! Приучайся!
  • 1 Декабря 2011 16:01
    rubyx
    было или небыло... а анимаций такой "подпрыгивающей я тут ещё не видел :) Спасибо за урок! правда его давно уже освоил:)
    • 2 Декабря 2011 19:34
      zloboglaz
      Урок такой был. Разве что добавлена анимация и поддержка IE6 О_о Скорей бы доля IE в рунете упалаб до -100%
  • 2 Декабря 2011 18:07
    Максим Фишер
    без jquery никуда, написали бы хоть что использоуется
    • 6 Декабря 2011 17:12
      zloboglaz
      jquery тут исключительно для IE...У меня на одном сайте было похожее меню(без анимации толька). И оно прекрасно шпилило на чистом CSS...
  • 2 Декабря 2011 19:56
    Pacifik
    Как такой список замутить на WordPress для дочерних страниц, которые при создании формируют верхнее горизонтальное меню, если там мы имеем
    <ul class="menu">
    <?php wp_list_pages('title_li=');?>
    </ul>
    И все...
    • 3 Декабря 2011 17:45
      Gigi ツ
      wp сам генерирует css класы для сылок (дочерных в том чесле) , так определи какие ети класы и зделаи css меню для етих класов меканизм такои , может наидется кто по лутше обяснит, ya iz moldavii tak stho prostite za gramatiku :)
  • 2 Декабря 2011 21:41
    GCDner
    Полезная вещь!
  • 4 Декабря 2011 13:46
    M@Z@}{AK@
    Подскажите пожалуйста, как сделать такое меню, только чтобы подразделы выпадали в горизонтальном столбике? Зарание спасибо огромное!
  • 5 Декабря 2011 10:27
    p1us
    объясните пожалуйста , как делали маленькие уголки при наводе на меню?
    • 6 Декабря 2011 17:05
      zloboglaz
      На Самом деле - это квадратик со срезанными углами(прозрачными). Дам наводку:transparent; А если честно то все можно найти и понять методом тыка+) 1) удаляем по одному блоку кода и смотрим что перестало работать...Далее если "сдохло" не то(такое бывает), то возвращаем удаленый код и грохоем следующую часть кода(и так до тех пор пока не находим желаемое).2) Видим непонятное для себя правило, капуруем его и в ГУГЛЕ(или любом другом поисковике) смотрим что оно означает(и сразу все понятно становится).З.Ы. Удачи.
  • 6 Декабря 2011 15:02
    bass70
    Тоже был бы очень признателен за пояснение с треугольничками в меню. Как треугольник получить вроде был урок, но в данном примере как он применяется не очень ясно... заранее спасибо!
    • 14 Декабря 2011 20:21
      JuliaOrtiz
      Задаем свойства для вложенной ссылки в первый <li> списка. Задаем ему позицию не зависимо от всего остального кода. Двигаем вверх и вправо как нам нужно. А сам эффект появления треугольника происходит за счет заданных бордеров по 6 пикселей. Заданные параметры делают квадраты со сторонами примерно по 6 пикселей а так как у квадратов убраны и сделаны прозрачными соответствующие стороны получается треугольник. последний блок делает подсветку при наведении. Суть поняла, как объяснить чтобы понятно было не знаю) Ну по наводке будет уже проще понять) Не могу вставить сюда код где это находится. не знаю почему. #menu ul li:first-child > a:after вот тут и два блока ниже
  • 31 Января 2012 01:44
    kompanavt
    Подскажите пожалуйста как убрать последнюю риску в меню?
  • 10 Февраля 2012 14:52
    SVitekD
    Как подключить jqueri куда надо вставить код.IE не поддерживает,нет градиента.Спасибо!!!
  • 10 Февраля 2012 22:03
    AntivirusCureit
    В презентации около пунктов меню нет точек. У меня же меню выводится с точками около каждого пункта. Как убрать точки и не потерять разделения между пунктами ?
  • 22 Февраля 2012 20:02
    lizamoto
    Хотела спросить, как над этим меню выставить картинку?Именно в css. В html все хорошо, но мне её не выравнять.
  • 25 Февраля 2012 04:06
    eiszeit
    Подскажите, что поменять в коде, для того чтобы края меню были резиновыми? То есть чтоб пункты меню были по центру а чёрная полоса была резиновой и пристыковывалась к краям экрана.
    • 31 Мая 2012 01:09
      genixxx
      #menu ul a { padding: 10px; width: 100%; min-width: 150px; _height: 10px; /*Только для IE6*/ display: block; white-space: nowrap; float: none; text-transform: none; } Но имеется глюк с пристыковкой. Нужно допиливать.
  • 19 Марта 2012 21:39
    sashok1
    Подскажите пожалуста.. Все хорошо работает и в Opera и в Chrome, но в Mozilla отображает обычный тестовый список, словно не видит css. Как это можно устранить?
  • 31 Мая 2012 01:05
    genixxx
    Ерунда, ширина пунктов фиксированная. Если в меню разный текст, нужно выставлять под самый длинный, а это уродует меню. В топку.
    • 14 Августа 2012 15:21
      dmitriy.kondakov.9
      genixxx, проблема решается простой заменой свойства "width:130px" на "min-width: 130px", в css "#topmenu .menu ul a"
  • 12 Августа 2012 14:46
    dmitriy.kondakov.9
    анимация работает только при первом наведении, че не так не пойму
  • 25 Августа 2012 22:03
    FRAPS
    Зачем использовать градиент, если он поддерживается не везде?
  • 24 Сентября 2012 15:17
    maximuse
    Помогите понять как заставить треугольник и само выпадающее меню быть по центру, и еще вопрос с ие, возможно и допилить так чтоб там тоже уголочки были и последний разделитель убрать?
  • 26 Марта 2013 15:52
    nikish
    Как изменить код, чтобы меню выпадало вверх, а уголок был на нижней границе первого подменю и смотрел вниз
^ Наверх ^