Вертикальное выпадающие меню на CSS

Горный водопад. Водопад с горы.Как-то написал я скромный пост о том что нужно знать при верстке выпадающих меню для сайта, а сегодня выкладываю уже готовое вертикальное выпадающие меню. Сделано оно без применения скриптов, функционал блоков только при помощи CSS, анимация реализуется с помощью CSS3.
  Меню можно использовать как простое вертикальное меню, то есть без выпадающих блоков, так и как многоуровневое выпадающие меню. HTML разметка у него самая обычная - список с ссылками. Анимация CSS3 применяется для того чтобы сделать в меню плавное появление выпадающих блоков и выделить реакцию ссылки при наведении курсора.

 Смотрим:
DEMO
 Изучаем, забираем.
 HTML разметка самая обычная:
<div id='menu-block'>
 <ul class='vertical-menu'>
  <li><a href="#">Раздел 1</a>
  <li><a href="#">Раздел 2</a>
  <li class='drop-link'><a href="#">Раздел 3</a>
    <ul class='drop-block'>
      <li><a href="#">Раздел 3.1</a>
      <li class='drop-link'><a href="#">Раздел 3.2</a>
         <ul class='drop-block'>
           <li><a href="#">Раздел 3.2.1</a>
           <li><a href="#">Раздел 3.2.2</a>
           <li><a href="#">Раздел 3.2.3</a>
         </ul>
      </li>
      <li><a href="#">Раздел 3.3</a>
    </ul>
  </li>
  <li class='drop-link'><a href="#">Раздел 4</a>
    <ul class='drop-block'>
      <li><a href="#">Раздел 4.1</a>
      <li><a href="#">Раздел 4.2</a>
      <li><a href="#">Раздел 4.3</a>
      <li><a href="#">Раздел 4.4</a>
      <li><a href="#">Раздел 4.5</a>
    </ul>
  </li>
  <li><a href="#">Раздел 5</a>
</ul>
</div>
  Здесь специально добавлено несколько дополнительных подпунктов, чтобы было нагляднее. Селекторов используется всего четыре, можно конечно использовать и меньше, но так удобнее.
  CSS для данного выпадающего меню выглядит так:
#menu-block {
  padding: 0;
  margin: 0;
}
/*стили всего блока меню, пунктов и ссылок*/
.vertical-menu {
  display: block;
  background: #3D0066;
  border: solid 1px #B84DFF;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  width: 200px; /*ширина меню и выпадающих блоков*/
}
.vertical-menu li {
  position: relative;
  list-style: none;
  outline: none;
  background: #7339BA;
  background: -moz-linear-gradient(top, #6323b2 0%, #b685f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6323b2), color-stop(100%,#b685f7));
  background: -webkit-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -o-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -ms-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: linear-gradient(to bottom, #6323b2 0%,#b685f7 100%);
  border: solid 1px #D6C2FF;
  border-radius: 5px;
  padding: 0;
  margin: 2px;
/*анимация для пунктов*/
  -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.vertical-menu li:hover {
  background: #ccf;
  border: solid 1px transparent;
  border-radius: 5px;
  box-shadow: inset 0 0 8px #fff;
  margin: 2px 10px;
}
.vertical-menu a {
  display: block;
  text-decoration: none;
  text-align: left;
  font: normal normal 14px Verdana; /*шрифт всех пунктов*/
  color: #E6E6FF;
  text-shadow: 1px 0 4px #000, 2px 0 7px #d91cd9;
  box-shadow: none;
  padding: 7px; /*регулируем высоту всех кнопок меню*/
  margin: 0;
}
.vertical-menu a:hover {
  color: #3D1F4C;
  text-shadow: 1px 0 4px #fff, 2px 0 7px #290052;
}
/*стиль пункта с подменю*/
.drop-link > a {
  margin: 0;
  -webkit-transition: margin 0.5s ease;
  -moz-transition: margin 0.5s ease;
  -o-transition: margin 0.5s ease;
  transition: margin 0.5s ease;
}
.drop-link > a:hover {
  margin: 0 0 0 10px;
}
.drop-link:hover {
  background: #ccf; /*выделяем ссылку родитель выпадающего блока*/
}
/*стили для уголков*/
.drop-link:after,
.drop-link:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
}
.drop-link:before {
  border: solid 14px;
  border-color: #D6ADFF transparent transparent transparent;
  margin: 0 12px 0 0;
}
.drop-link:after {
  border: solid 10px;
  border-color: #4C1A80 transparent transparent transparent;
  margin: 0 15px 0 0;
}
.drop-link:hover:before {
  border: solid 16px;
  border-color: transparent #6323b2 transparent transparent;
  margin: -3px 0 0 0;
}
.drop-link:hover:after {
  border: solid 12px;
  border-color: transparent #b685f7 transparent transparent;
  margin-right: 0;
}
.drop-block {
  display: block;
  position: absolute;
  z-index: 1000;
  left: 100%; /*если меню справа - right: 100%;*/
  top: -9999em; /*скрываем выпадающие блоки*/
  background: #3D0066;
  border: solid 1px #B84DFF;
  border-radius: 10px;
  box-shadow: 0.5em 1em 1em #666; /*если меню справа - box-shadow: -0.5em 1em 1em #666;*/
/*анимация для выпадающих блоков*/
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
  padding: 0;
  margin: -10px -20px 0 0; /*если меню справа - margin: -10px -10px 0 0;*/
  min-width: 250px; /*обычная ширина*/
  width: auto; /*ширина если строка без пробелов и переносов*/
}
.drop-link:hover > .drop-block {
  top: 0; /*показываем выпадающие блоки*/
  opacity: 1;
}
  На этом собственно все, меню сделано и готово к использованию.

  Напоследок пару костылей для любителей старых версий всеми любимого IE. Собственно, как всегда IE 8 "подложил мину". Как показали клинические исследования в Internet Explorer 8, меню не "выпадает", но проблема была решена когда был убран градиент для IE.
filter: progid:DXImageTransform.Microsoft.Gradient( условия );
  Но так как в IE 9 все в порядке с выпадением, то градиент его пользователям можно и вернуть, а сделаем это можно при помощи вот такого "костыля", он кстати, решает еще несколько проблем с отображением в IE 9.
<!--[if IE 9]>
<style type="text/css">
.vertical-menu li {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6323b2', endColorstr='#b685f7',GradientType=0 );
}
.vertical-menu li:hover {
  margin: 2px;
}
.drop-link > a:hover {
  margin: 0;
}
ul.vertical-menu a:hover {
  background: #ccf;
}
</style>
<![endif]-->

Вот теперь точно все. Такое получилось анимированное выпадающие меню. Тестируем, делимся впечатлениями, критикуем.
©http://magentawave.com

47 комментариев:

  1. Здравствуйте. Хотела спросить вот о чем: как сделать, чтобы дочерние пункты меню подсвечивались и оставались видны, когда посетитель находится внутри дочерней рубрики? Подсветку мне сделать удалось, но меню всё-равно сворачивается и посетитель не видит где находится, пока не снова не наведет курсор на меню. Можно ли как то реализовать "несворачивание" рубрик, если человек находится в дочерней?

    ОтветитьУдалить
    Ответы
    1. Все это делается через JavaScript. Но смысл "несворачиваемости" видится мне очень сомнительным, лучше сделать просто подсветку родительского пункта.

      Удалить
    2. А как можно сделать подсветку родительской рубрики?

      Удалить
    3. Пример можно здесь посмотреть
      http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html

      и здесь уже на готовом меню
      http://www.magentawave.com/2012/12/new-script-for-accordion-menu.html

      Удалить
  2. Анонимный21.02.2013, 12:25

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

    ОтветитьУдалить
    Ответы
    1. Что-то я не совсем понял вопрос. В CSS там комментарии есть что делать если меню располагается справа.

      Удалить
  3. Анонимный02.04.2013, 22:43

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

    ОтветитьУдалить
    Ответы
    1. Не совсем понял на счет стилистики, что значит "переворачивать" и каждый оттенок отдельно ? Это CSS градиент, используется всего два цвета, все остальное делает браузер. Вы просто записываете вместо указанных цветов те, что вам надо, без всяких переворотов. В помощь:
      http://www.magentawave.com/2012/05/using-gradient-for-design.html

      Удалить
  4. как можно скачать?? или мы должны создать текстовые документы для каждого??

    ОтветитьУдалить
    Ответы
    1. Это просто пример, так сказать "как можно". Но если есть желание "скачать", то создайте обычный html документ и скопируйте в него коды из статьи.

      Код CSS, естественно, помещается внутри специального тега <style> ЗДЕСЬ КОД CSS </style>

      Удалить
  5. Анонимный26.09.2013, 13:09

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

    ОтветитьУдалить
  6. Подскажите, а можно ли с помощью css реализовать, чтобы выпадающее подменю было не на уровне своего пункта, а на уровне самого верхнего (первого) пункта меню. Необходимость этого возникла из-за очень большого количества пунктов подменю. В целях наглядности их лучше выводить на максимально возможную высоту…

    ОтветитьУдалить
    Ответы
    1. Да так сделать можно, первый вариант - прописать относительное позиционирование для всего блока меню, вместо пункта, но тогда возникает проблема с уголками, и второй - это использовать свойство внешнего отступа, указав отрицательное значение сверху, тем самым подтянув блоки на необходимую высоту. А также можно добавить полосы прокрутки в выпадающие блоки, если пунктов уж слишком много, меню в этом случаи останется более компактным.

      Удалить
  7. Анонимный07.10.2013, 14:27

    Здравствуйте!

    Подскажите а возможни ли сделать данное меню "раздвигающимся а не выпадающим

    ОтветитьУдалить
  8. Анонимный09.10.2013, 14:05

    спасибо большое, классное меню.

    ОтветитьУдалить
  9. Анонимный22.10.2013, 14:53

    Просто супер меню, и даже цвет идеально подошел :)
    Но есть вопрос:
    я скопировала код для горизонтального меню, теперь не могу найти как отрегулировать ширину блоков, чтобы она была постоянной и не зависела от длины текста ссылки. Уже все перерыла методом тыка (я новичок в этом деле).
    Спасибо заранее,

    ОтветитьУдалить
  10. Анонимный23.10.2013, 18:32

    Молодчага )

    ОтветитьУдалить
  11. Чего то у меня class="drop-block" не отображается.....

    ОтветитьУдалить
    Ответы
    1. Проверяйте тщательно код, у вас где-то допущена ошибка...

      Удалить
  12. Весьма красивое меню. Респект. Как-нибудь попробую на каком-нибудь сайте.

    ОтветитьУдалить
  13. Анонимный20.03.2014, 17:49

    Добрый день! Спасибо огромное, нашёл что нужно! Подскажите, как поменять цвет кнопок. Заранее благодарен!

    ОтветитьУдалить
  14. Анонимный18.04.2014, 18:58

    Здравствуйте, скажите пожалуйста, как сделать так, чтобы родительские пункты меню могли содержать в себе картинки, таблицы и прочую ересь, и чтобы появлялись они с лева от меню по клику на родительский пункт меню. Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Относительно "ереси", то это дело верстки, вы можете расположить там все что вам угодно. Относительно по клику, то это дело можно решить с помощью JavaScript или как вариант, по аналогии с этими примерами - http://www.magentawave.com/2012/12/example-click-tooltip-on-css.html

      Удалить
  15. Добрый день!
    Крутое меню, спасибо.
    Подскажите, как поменять цвет фона кнопки при наведении.
    У меня, видимо, стандартно, светло-голубой.
    Я прописала другой цвет background для a:hover, но не хочет ставится...

    В стилях у Вас не нашла((
    Помогите!((

    ОтветитьУдалить
    Ответы
    1. Нужно фон менять не ссылки, а для блока, в котором эта ссылка находится - .vertical-menu li:hover

      Удалить
  16. Анонимный02.11.2014, 16:03

    Спасибо большое! Правда, сработало. И дизайн меню устраивает. Как раз то, что нужно для моего сайта.

    ОтветитьУдалить
  17. Александр21.12.2014, 12:24

    Добрый день. Есть вопрос. А что это за костыль? И куда его вставлять?

    ОтветитьУдалить
  18. А разве можно ли открывать тег <li> и не закрывать его?

    ОтветитьУдалить
    Ответы
    1. Можно, это не критично, но по "правилам хорошего тона", принято закрывать. Я в этом примере решил оставить не закрытым.

      Удалить
    2. спасибо большое и я как за Колумбом, уже по начертанному пути)

      p.s. уберите мой последующий коммент, а то я уже удалил его, но почему-то не до конца ;(

      Удалить
  19. Здравствуйте. Снова обращаюсь к вам с вопросом...
    В моем блоге блоки из дополнительного меню не "накладываются" на текст, как это в демо, а выглядят обрезанными. В чем может быть проблема?

    Браузеры - Гугл Хром, Опера показывают идентичный результат.

    ОтветитьУдалить
    Ответы
    1. Прочтите мануал по возможному решению данной проблемы,
      http://www.magentawave.com/2012/10/why-not-droping.html
      Дополнительно:
      http://www.magentawave.com/search/label/Blogger
      И еще, сделайте нормальный доступ к шаблону если хотите получать актуальную помощь.

      Удалить
  20. Александр, спасибо. Реально помогли. Приличное выпадающее меню кое-как нашла! Всё-таки я это сделала благодаря вам). Но мне цвет всех кнопок как можно поменять на синий?В какой строке искать? У меня в черновике нормально всё, а на моём блоге - некорректно показывает, размазанно, почему-то.

    ОтветитьУдалить
    Ответы
    1. У вас ошибка в коде, там где .vertical-menu li, для свойства background в значении не хватает диеза - #, это важно, и если градиенты не нужны их лучше вообще убрать.
      И еще есть противоречащий стиль в шаблоне для этой области - .sidebar .widget a(псевдоклассы), поэтому цвет ссылок может отображаться не корректно, что бы этого избежать, нужно добавлять к стилям меню указание !important

      Удалить
    2. Класс, спасибо! Я там чего нафуричила). Вроде нормально теперь http://hobby-boom.blogspot.ru

      Удалить
    3. Да, смотрится отлично. Поделитесь как решили свою проблему, что предприняли для своего Blogger?

      Удалить
  21. Я поменяла шаблон, только тогда нормально стало отображаться. Шаблон "корпорация чудеса"в блоггере пришлось поменять.

    ОтветитьУдалить
    Ответы
    1. Да такfя ситуация с Blogger часто случается, т.к. стили уже прописаны для шаблона и основных элементов в нем, а новые дополнения часто наследуют стили родительского элемента и не соответствуют примеру.

      Удалить
  22. Анонимный20.11.2015, 02:51

    ВОТ ЭТО МЕНЮ!!! =) ВСЕМ СПАСИБО КТО НАПИСАЛ СТАТЬЮ!

    ОтветитьУдалить
  23. Подскажите почему меню заезжает под текст?

    ОтветитьУдалить
    Ответы
    1. Возможно ответ найдете здесь:
      http://www.magentawave.com/2012/10/why-not-droping.html

      Удалить
    2. Здравствуйте! Спасибо за чудесное меню. Всё работает как часы, но у меня проблема при попытки прикрутить его к магазину eBay. Так как платформа не даёт возможность менять id/class в тегах, а позволяет лишь внедрить стили к уже существующим - запутался в селекторах. Помогите, пожалуйста, будьте добры. :(
      Скидываю ссылку на архив с магазином https://dropmefiles.com/M73Rw

      Удалить
  24. Доброе время суток. Очень понравилось данное меню. Закинул себе на сайт. Помогите, пожалуйста, с моментом в меню который меня мало радует: как сделать так, чтоб в разделе в котором есть момент выдвигающихся пунктов...чтоб основной раздел\пункт (не знаю как правильно называется), чтоб он был полностью НЕАКТИВНЫЙ!!! Чтоб когда на него кликаешь...ничего не происходило...вообще ничего не происходило. А, то там выскакивает "решётка" и после этого клика идёт переход который меня очень НЕ радует. Помогите, пожалуйста. Вот, мой набросок с этой проблемой в разделах, где есть дополнительные вкладки:http://fleshechka.blogspot.com. Меня напрягает именно вот та решётка, куда нужно закинуть какую-нибудь ссылку. В этом моменте я хочу ПОЛНУЮ НЕАКТИВНОСТЬ клика мыши. Блин, надеюсь Вы поняли мою белеберду))). На связи.

    ОтветитьУдалить

Следующее Предыдущее

BestProject