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

Сегодня я покажу вам, как создать собственное выпадающее меню на CSS, не добавив ни строчки JavaScript. В примере не используются изображения, а структура HTML проста. Давайте взглянем на пример:

demo

Структура 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>

Очень важно, чтобы HTML структура была осмысленной. У меня она построена логически и понимается как надо, хотя и не стилизована пока что:

CSS код

/* Главное меню */
#menu
{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        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-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a
{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px 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;
}

#menu li:hover > ul
{
        display: block;
}

/* Подменю */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    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-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

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

#menu ul a
{
    padding: 10px;
        height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
}

*html #menu ul a /* IE6 */
{
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a /* IE7 */
{
        height: 10px;
        width: 150px;
}

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

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

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

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

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

#menu:after
{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Довольно много, да? Это так...

CSS форма

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

Она добавляется с помощью псевдо-элемента :after:

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

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

Укрощение строптивого IE6 :)

Подменю отображается при наведении курсора на элемент li. Как вы знаете, IE6 не поддерживает событие наведения курсора, если элемент - не ссылка.

И хотя в начале статьи прозвучала фраза “без JavaScript”, но без него с этим не справится, так что позвольте мне добавить пару строк:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
        $(function() {
          if ($.browser.msie && $.browser.version.substr(0,1)<7)
          {
                $('li').has('ul').mouseover(function(){
                        $(this).children('ul').show();
                        }).mouseout(function(){
                        $(this).children('ul').hide();
                        })
          }
        });
</script>

Вы можете не вставлять этот код, так как конец IE6 близок. Время пошло.

Вам понадобится jQuery. Я не думаю, что это составит проблему, так как jQuery стал технологией, используемой “по умолчанию” при создании современных сайтов.

Для IE6 и IE7

Кроме jQuery также придется добавить еще пару строчек в CSS код специально для IE6 и IE7:

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Есть еще некоторые IE-глюки. Если вас это не устраивает, используйте условные комментарии.

Вот и все

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

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


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 6 Мая 2011 07:14
    limurec
    Классное меню!
    • 7 Ноября 2011 16:32
      zloboglaz
      Спору нет меню супер! З.Ы. Кому нужны исходники(полный вариант как в демо) см. коменты ниже(ищите 3 моих комента подряд), я там оставил ссылку на исходники...
      • 26 Ноября 2011 19:22
        pavelll21
        кинь ссылку, чёт внизу нету твоей ссылки
  • 6 Мая 2011 08:27
    Xamle
    Спасибо!!! классная менюшка
  • 6 Мая 2011 09:11
    mavric
    Спасибо! Как раз то что искал=)
    • 6 Мая 2011 14:21
      will_smeet
      Спасибо, Да ты прав я тоже это меню искал!
  • 6 Мая 2011 09:19
    budzin
    Сам сделал, тут немного логики и все.
  • 6 Мая 2011 09:32
    maxstels
    Блин....вот если бы вертикальное.....
    • 6 Мая 2011 10:00
      budzin
      делается аналогично. Пробуй.
  • 6 Мая 2011 10:40
    kindness
    Спасибо, полезный урок!
  • 6 Мая 2011 12:59
    artamonov
    В IE6 неработает... укрощали его укрощали, и не укратили ))
    • 6 Мая 2011 16:51
      zuluss
      В любом IE непашет
      • 9 Мая 2011 18:24
        zhenya1243
        в IE9 пашет
        • 10 Мая 2011 00:49
          zuluss
          Посмотри как отображается в IE9... градиент и тени отсутствуют...
          • 14 Мая 2011 12:00
            aserputko
            Да IE самый ужасный браузер, который только могли придумать...
            • 6 Ноября 2011 19:20
              zloboglaz
              В топку IE! Опера,Хром,Мазила-остольные пусть смотрят как хотят...
  • 6 Мая 2011 13:39
    psyhoho
    Подскажите, как сделать, чтобы подуровень подменю выпадал не в право, а так же вниз!!!
    • 6 Мая 2011 14:26
      profesor08
      position убери...
      • 6 Мая 2011 14:29
        psyhoho
        в таком случае...я не смогу перейти на те пункты меню которые будут ниже!!!
  • 6 Мая 2011 14:33
    MopuC
    Модераторы, а чем вы объясните удаление комментариев? Правда глаза режет, али как? :)
  • 6 Мая 2011 14:51
    Beastie
    Суперовое меню! В закладки! Вот только IE портит все впечатление, а в 6-ке вообще не фурычит. Короче прощай IE6, без тебя наш ум не был бы таким изощренным ;),R.I.P.
  • 6 Мая 2011 15:05
    Xamle
    чертов IE все настроение испортил коряво отображается.
  • 6 Мая 2011 21:17
    antosha
    классное меню спасибо большое :-)
  • 7 Мая 2011 13:17
    Владислав
    Автор, у вас в Ява коде ошибка!
  • 7 Мая 2011 18:18
    phenomka
    хехе) по ссылке "прощай IE 6" - получается Китайцы больше всех используют IE6 - почему так?) колличеством берут или у них других браузеров нет?
  • 10 Мая 2011 07:50
    nail4ik
    как сделать чтобы меню ВВЕРХ выпадало?
  • 18 Мая 2011 18:45
    NikitaMalakhov
    блин у меня меню работает только на одной странице, а на другой выдаёт знаки вопросов вместо букв, как мне это поченить?
    • 19 Мая 2011 16:01
      Jackitos
      Кодировку поменяй
      • 19 Мая 2011 16:18
        NikitaMalakhov
        не подскажете как сделать такие же таблицы как и на этом сайте, где написано Скачать: Программы (18) Скрипты (38) Видеоуроки (63) Дизайн (280) Полезное (19) Шаблоны сайтов (1255) Flash заготовки (106) Wordpress темы (210)
        • 21 Мая 2011 19:02
          Jackitos
          Эти таблицы :))) формируются автоматически в зависимости от количества добавленных новостей, в данном случае уроков.
          • 3 Июня 2011 21:55
            NikitaMalakhov
            да, но как сделать чтобы они были такими закруглёнными?
            • 7 Июня 2011 21:37
              Jackitos
              Примени стили для блока, 12 px в данном случае.
              -webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px
  • 19 Мая 2011 19:43
    dimonikobel
    на ucoz не работает
    • 21 Мая 2011 19:00
      Jackitos
      на ucoz все работает отлично
      • 26 Мая 2011 16:41
        dimonikobel
        на укоз работает тогда,когда подключиш php
  • 25 Мая 2011 21:08
    Perfecthus
    Какой уровень вложенности поддерживает сие меню?
  • 2 Июня 2011 15:13
    muravey_66
    Как вывести 2ое и 3е подменю как в демо? А то получается недоделанный урок какой то! А так очень даже интересно!
    • 7 Июня 2011 15:10
      snemcov
      Красивое меню, а нельзя его никак под IE оптимизировать? и вообще в чем конкретно проблема ответьте пожалуйста, так как я начинающий, мне пригодиться))))
  • 24 Июня 2011 03:10
    panasonik
    Меню нормальное,но слишком громозкое. Надо его записать более компактно. Вот тогда будет хорошо,а так не пойдет! Если вам не тяжело запишите его в сокращенной форме.
  • 2 Июля 2011 20:50
    Дзирт_До_Урден
    на счет второго подменю не дописали, если по аналогии, то оно тоже вниз выпадает, а нужно вправо !!!
  • 10 Августа 2011 11:21
    selgivel
    Ужасное отображение в Opere 9, можно как-нибудь исправить?
    • 18 Сентября 2011 16:39
      Soronorus
      чтобы меню было по центру пишем в начале:
      <div class="c">
      <div id="out">
      <div id="in">
      css для них
      .c{width:100%;
      background: #009900;
      background: -moz-linear-gradient(#009900, #336633);
      background: -webkit-gradient(linear, left top, left bottom, from(#009900), to(#336633));
      background: -webkit-linear-gradient(#00FF33, #336633);
      background: -o-linear-gradient(#009900, #336633);
      background: -ms-linear-gradient(#009900, #336633);
      background: linear-gradient(#009900, #336633);
      }
      #out{text-align:center;margin:0 auto;display:table;}
      #in{display:table-cell; text-align:left;}
      закрывать дивы после ul
      • 24 Октября 2011 16:16
        notbot
        #menu{margin:0 auto}
  • 13 Октября 2011 22:52
    Kandagar35
    меню супер !
    • 30 Октября 2011 20:51
      Мухтар Шадырманов
      меню отличное, а то что исходников нету, это наверное и к лучшему, весь код проводишь через себя... :)
      • 6 Ноября 2011 23:17
        zloboglaz
        Для тех кому нужен исходник могут его банально скопипастить через браузер вместе с CSS правилами...Вот я например без труда в МОЗИЛЕ через "Анализатор" все себе скачал за 5 сек, вот теперь сижу разбираю код...
  • 6 Ноября 2011 23:36
    zloboglaz
    Кстати в полной версии данного урока 240 строк и это толька HTML+ примерно еще 130 строчек CSS. Одним словам есть над чем подумать!
    • 1 Декабря 2011 07:31
      Avdey
      Блин у меня не пашет, дайте исходние посмотреть!!! Чёт не нашёл я исходник после 3х ваших коментов...
  • 11 Января 2012 04:47
    RaX79
    а скажите пожалуйста, как сделать, чтобы каждый <li> начинался как бы на новой строке, то есть аналогично тегу <DIV>?
  • 21 Февраля 2012 12:18
    Guslik
    Урок неполный, в оригинале лучше. http://www.red-team-design.com/css3-dropdown-menu
  • 24 Февраля 2012 08:45
    romkgn
    А как его сделать вертикальным?
    • 7 Июня 2012 17:30
      a_vitalka
      Удалось сделать вертикальное меню?
  • 21 Мая 2012 16:35
    toniq
    Сегодня я покажу вам, как создать собственное выпадающее меню на CSS, не добавив ни строчки JavaScript. <script type="text/javascript" src="./CSS3 dropdown menu_files/jquery-latest.min.js"></script> это шутка?
    • 20 Февраля 2013 16:18
      seryo_ja
      toniq, смотри выше строки автора: Подменю отображается при наведении курсора на элемент li. Как вы знаете, IE6 не поддерживает событие наведения курсора, если элемент - не ссылка. И хотя в начале статьи прозвучала фраза “без JavaScript”, но без него с этим не справится, так что позвольте мне добавить пару строк:
  • 15 Марта 2013 14:57
    vrazhnov
    Помогите пжл сделать его централизованным, под размер 1000px (с размером разобрался)!!!!!
  • 24 Марта 2013 01:01
    Miloserdov
    Не могу понять, вроде все сделал как надо, но подменю 2 уровн выпадает вниз и затирает остальное, а в примере выпадает вправо, подскажите что не так, сайт www.betool.ru
  • 31 Мая 2013 15:34
    stypau_lesom
    Можете мне пошагово написать что нужно делать?)
  • 6 Октября 2013 00:48
    trinetey
    Огромное спасибо за скрипт jQuery, выложенный в конце. У меня горизонтальное выпадающее меню другое, не отсюда. Но скрип отсюда помог ему заработать (не-не, не в IE6-7)) в IE10 (который типа уже такой классный): до него меню ни в какую не работало - список не выпадал чтобы я ни делала! Просто белая полоска при наведении, а меню не выпадает! Спасибо! Спасибо! Спасибо еще раз! Заработало!
  • 21 Сентября 2015 21:26
    PFAB
    Меню третьего уровня выпадает вниз и перекрывает нижние пункты меню 2го уровня. Как сделать, чтобы третий уровень выпадал вправо?
    • 17 Декабря 2015 18:10
      Delphin911
      Народ, а как сделать, чтобы в 11 IE красиво было? А то все квадратное. Треугольничка у меню нет. В Хроме что-то вообще не работает. В Опере все ОК, но мне надо чтобы в IE работало. Спасибо если хто подскажет. Не, вру. В хроме тоже заработало.
    • 18 Декабря 2015 10:15
      Delphin911
      Понял откуда квадратности. Точнее не понял, а отследил. Если просто страничку открываешь в IE, то все нормально, кругленько и красиво. Если же как заглавную страницу сайта на IIS, то квадратности и без красивостей. Что-то надо включить в IIS я так полагаю. Никто не подскажет что? Пока сам искать буду.
^ Наверх ^