Супер выпадающие меню на CSS

Часто при ведение блога, со временем, когда блог растет и развивается, возникает потребность улучшить навигацию, чтобы посетитель не "лопатил" кучу статей, а сразу мог найти то что ему нужно. И одним из таких способов улучшения является добавление выпадающего меню. Одним из вариантов такого меню, в котором можно разместить не только обычные ссылки, но и блоки с описанием разделов (текстом), картинки, видео и много еще чего, и хочу поделиться. Я применил немного нестандартный подход к верстке этого меню, поэтому прошу строго не судить. Также, в статье представлены оригинал и исходники Mega Drop-Down Menu, но об этом подробнее ниже.

 Для начала смотрим итог - выпадающие МЕГА меню сделанное на CSS:
DEMO

Данный пример горизонтального выпадающего меню сделан без стандартных HTML списков <ul> и <li>, а исключительно из блоков <div>, и показывает что сделать выпадающие меню можно и не стандартным способом :)
  Каждому элементу присвоен свой класс, их стили описаны в CSS. В меню уже добавлены некоторые элементы, для первичной демонстрации и на их примере можно увидеть как все работает. Установлена ширина и ориентация выпадающих блоков(влево или вправо), которую при желании можно легко изменить. Дизайн - цвет самого меню и выпадающих блоков легко меняется через CSS.
 В HTML код, я уже добавил некоторые элементы, чтобы вы могли посмотреть как это будет выглядеть.
 Я постарался все закомментировать, чтобы облегчить ориентирование внутри кода, но все же для редактирования лучше пользоваться программой где поддерживается синтаксис, так удобнее. Для этого подойдет Notepad++
  Для выделения текста используются обычные HTML теги :
<b> жирный текст </b>
<i> наклонный текст </i>
<u> подчеркивание </u>
<br/> - перенос на новую строчку и т.д.
  Скачать исходный HTML файл вы можете со сферы, нажав на кнопку ниже. Файла "MegaMenu(DIV)":
СКАЧАТЬ HTML
  Вот пожалуй и все. вопросы, предложения и пожелания оставляйте в комментариях.

Оригинальное Mega Drop-Down Menu + архив исходников

 Более стандартный вариант подобного меню от забугорного коллеги можно посмотреть ниже, он называется Mega Drop-Down Menu. Именно эта менюшка послужила для меня, так сказать, музой и образцом.
DEMO
 Скачать оригинальные исходники вы можете из сферы, нажав на кнопку ниже. Файл MegaDropDown_Menu.
СКАЧАТЬ ZIP
Для владельцев Blogger-блогов
Для простой и быстрой установки различных выпадающих меню в свой блог, при горизонтальном их размещении, вам поможет информация из этой статьи Почему не выпадает меню в Blogger?

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

  1. Спасибо за статью! Правда, для меня это сложно, потому что я не знаток CSS и HTML, но попробую

    ОтветитьУдалить
    Ответы
    1. Конечно попробуйте, как я уже писал в статье, особых усилий для внедрения предпринимать не нужно, все делается через гаджет "HTML/JavaScript" Blogger. Посмотрите, если что-то не понятно пишите - помогу разобраться.
      А вообще я ведь тоже не знаток, пишу о том, что сам делаю, но на самом деле все проще чем кажется, что-то вроде LEGO, только в цифровом виде :)

      Удалить
    2. Здравствуйте! Простите но я вообще не понимаю CSS и HTML но у меня есть свой блог и очень хочется добавить такое меню! Вы не могли бы меня помочь по установке меню в блоггере? или рассказать подробнее как установить меню с нуля на блоггере? Заранее спасибо!

      Удалить
  2. Анонимный05.07.12, 11:03

    Посоветуйте где взять шаблон для вашего меню

    ОтветитьУдалить
    Ответы
    1. А тот который в статье, не подходит? Кнопочки "HTML", "CSS" все коды там. Как применять написано в статье.
      Или вам нужен сам шаблон блога? Если шаблон блога, то любой кроме "Корпорация Чудеса" , ну и Динамические шаблоны...

      Удалить
  3. Вы меня просто спасли, уже всю голову с этими меню сломала) Единственное вопрос: в меню вашего блога, если наводишь курсор на кнопку, то появляется выпадающее меню и ты можешь спокойно по нему водить мышкой. У меня же почему то при наведении курсора на кнопку меню появляется, но при отводе курсора вниз сразу пропадает.От чего это может быть?

    ОтветитьУдалить
    Ответы
    1. Заходил к вам, все, вроде, нормально, никуда выпадающий блок не пропадает пока курсор на нем. Но если что, то можно просто подтянуть их вверх (блоки), чтоб не "спрыгивали" - такое бывает в различных шаблонах. Для этого там где /*---------- Стиль выпадающих блоков ------------*/ найдите свойство top: 38px; и уменьшите немного значение, скажем на 35px, - подберите подходящие :)
      Рад что помог и менюшка стала полезной. :)

      Удалить
  4. И сложно - и просто!
    Респект автору! Так держать!

    ОтветитьУдалить
  5. Большая просьба- опубликуйте код менюшки с прокруткой.
    Заранее благодарен!

    ОтветитьУдалить
    Ответы
    1. Думаю в этом нет необходимости, чтобы добавить вертикальную полосу прокрутки к блоку, нужно просто указать это свойство в стилях, дописав overflow-y:scroll к нужному блоку.
      Например для внутренних блоков, там где /* --------- Стили для блоков колонок внутри выпадающего блока ---------- */
      Возьмем вот этот блок - .navtab .col_1 {width:150px;} и добавим полосу прокрутки, при этом нужно также указать и тем самым зафиксировать высоту блока свойством height
      Получим примерно следующие : .navtab .col_1 {width:150px; height: 250px; overflow-y:xcroll;}
      Естественно высоту и ширину вы уже будете подбирать по потребностям.
      Также вы можете самостоятельно добавить свой внутренний блок, по примеру уже имеющихся, в котором будет указана полоса прокрутки.

      Удалить
  6. А как насчет прокрутки с подменю?
    Как сделать чтоб название подменю оставалось при прокрутке на месте и при этом не страдало следующее подменю?

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

      .navtab .col_scroll {width:100%; height: 200px; overflow-y: scroll;}



      Затем заключать блоки, для которых необходима прокрутка в дополнительный контейнеры div с данным селектором, например:

      <div class="col_2"><span class="h_3">*****</span>
      <div class="col_scroll">
      <div class="btnlink">
      <a  href="http://*********.html">*******</a>

      ******************

      Еще много много ссылок

      ******************
      </div></div></div>

      Удалить
  7. Спасибо! Буду пробовать...

    ОтветитьУдалить
  8. Подскажите как поменять цвет шрифта выпадающего блока?

    ОтветитьУдалить
    Ответы
    1. Заглядывал к вам в блог, все там в порядке с полосами прокрутки - они одни и я так понял как вы и хотели. теперь что касается цвета шрифта, то его к сожалению поменять нельзя :), но можно поменять цвет текста, за него отвечает свойство color

      Удалить
  9. Хочу засунуть в кнопку скрипт чата. Как это сделать???
    начало скрипта начинается на слово скрипт и заканчивается.
    Вы извините - не удается в Ваших коментариях образец скрипта выложить - не воспринимает!

    ОтветитьУдалить
    Ответы
    1. Что значит "в кнопку"? Если в выпадающий блок, то вставляйте код скрипта между тегами выпадающего блока и все будет хорошо. Только вопрос останется в практичности этой задумки.

      Удалить
  10. Извените что не в теме пишу, подскажите или сделайте тему как поставить свою фотку в гугле перед блогом?. Например как у вас!


    ОтветитьУдалить
    Ответы
    1. Вообще-то такой пост есть :) Авторство блога через профиль Google+. Но, пожалуй, добавлю его в меню для удобства.

      Удалить
  11. Спасибо большое - отличное меню. Действительно все элементарно.

    ОтветитьУдалить
  12. Спасибо отличная штука )

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, рад что пригодилось :)

      Удалить
  13. Спасибо большое !!!11

    ОтветитьУдалить
  14. Добрый день подскажите пожалуйсто , обнаружил что в Internet Explorere - цвет меню не поменялся и меню западает. Тему блога поставил (Венецианское окно). На других браузерах все нормально.
    Зарание спасибо за ответ .

    ОтветитьУдалить
    Ответы
    1. А IE, простите, какой версии? Если 7, то на него вообще внимания не обращаю, пользователи идутЬ, что говорится - лесомЬ, В 8 и 9 тестил, вроде все тип-топ было...

      Удалить
  15. У меня стоит 8-й, Скажите а можно безболезненно удалить один раздел в меню?

    ОтветитьУдалить
    Ответы
    1. Конечно можно, а также можно его вернуть. Создаете блок присваиваете один из выбранных идентификаторов и вперед. А чтобы в IE 8 и 9 все было нормально, то в шаблоне блога найдите вот эту строчку:
      <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
      и поменяйте 7 на 9 в 'IE=EmulateIE7'

      Удалить
  16. Огромное спасибо, все просто здорово мне очень нравиться!
    Вот что у меня получилось ) http://logik-com-ua.blogspot.com/
    Благодаря Вам !

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

      Удалить
  17. А можно ли уже к готовому меню добавить элементы из вашего меню? Блог http://yakushevskaya.blogspot.ru "Портфолио учителя". Я бы хотела на вкладке "Об авторе" добавить выпадающее меню с добавлением видео и ссылок. Можно ли это сделать?

    ОтветитьУдалить
    Ответы
    1. Тогда нужно дописывать новый CSS и HTML код для такого блока. А может даже и править существующие.

      Удалить
  18. MagentaWAVE, HTML копируем в гаджет. А CSS - в шаблон блога или?

    ОтветитьУдалить
    Ответы
    1. Можно в шаблон, но можно и туда же в гаджет, до или после HTML кода, только заключите между тегами <style>...</style>

      Удалить
  19. Любовь31.03.13, 19:27

    Прямая ссылка "Скачать HTML" не рабочая, пожалуйста поправьте ссылку. Информация очень заинтересовала, хоть я и начинающая блогер, но очень хотелось бы попробовать.

    ОтветитьУдалить
    Ответы
    1. Перезалил в SkyDrive

      Удалить
    2. Большое спасибо. Скачала. Будем разбираться. Оперативно-двойное спасибо )))))

      Удалить
    3. Поставила на тестовый блог данное меню-стало без проблем, понравилось. Спасибо. Много интересного на сайте. Удачи.

      Удалить
  20. Хотела использовать эту рыженькую менюшку но заметила один косяк попробую объяснить. При уменьшении экрана пункты меню съезжают вниз и выстраиваются друг под другом. Короче не остаются в одной линии. Возможно ли это исправить?
    Я про демо говорю сама еще не пробовала установить.

    ОтветитьУдалить
    Ответы
    1. Да такое есть, меню не подогнано под мобильные устройства, первый вариант (мой) это скорее просто показательный пример что не все выпадающие меню делаются на списках - можно и на блоках. А чтобы пункты не съезжали нужно просто указать ширину (width) всего меню не в процентах, как сейчас, а в пикселах. Например:
      .navmenu {
      ....
      width: 1000px;
      }

      Удалить
  21. Все оказывается очень просто:) спасибо!

    ОтветитьУдалить
  22. А как сделать плавное открывание?

    ОтветитьУдалить
    Ответы
    1. При помощи CSS3 или более универсально - jQuery (или другой фреймворк)

      Удалить
  23. Можно ли на примере этого шаблона http://www.mmm10x.com/ сделать фиксацию (прилипание к верхней части экрана) меню при прокрутке вниз. как сейчас на Вашем блоге? Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Да можно, это делается просто, с помощью jQuery и об этом в блоге есть статья - http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
      Думаю сложностей возникнуть не должно.

      Удалить
  24. Анонимный10.07.13, 14:41

    Здорово! Классный сайт, буду изучать.
    А по этой демке косяк, не знаю уж, чей. При наведении на "меню 2" появляется навороченная страничка, там есть вставка с ютуба, так вот при попытке подвести мышку на эту вставку (ну, как бы посмотреть) вся эта красота прячется. Пока только на линуксе пробовал в огнелисе. Может, под другими осями и браузерами и не так, еще не тестил.

    ЗЫ. Предмодернизация - это что-то политическое, наверное имелась в виду "премодерация"? ;)

    ОтветитьУдалить
    Ответы
    1. Наверное....))) На линуксе не тестил, под виндой, работало, хотя в фоксе с этим нюансом и на ней могут быть проблемы, но народ пока молчит, я тоже не замечал...

      Удалить
  25. Люди добрые, помогите неучу.... 3-е суток изучал по видеокурсам HTML и CSS, сказать честно, много чего узнал и много чего получаться стало... За данный урок СПАСИБО ОГРОМНЕЙШЕЕ, только у меня не совсем получается... думал на основе этого ПРИМЕРА, сделать на сайте ВЕРТИКАЛЬНОЕ МЕНЮ, при наводке, на которое менялся бы цвет (это я сделал), И чтоб справа от МЕНЮ выпадал/выезжал БЛОК с ПОДКАТЕГОРИЯМИ (фото+название с ссылкой) Это даже проще, чем ДАННЫЙ пример, помогите ПОЖАЛУЙСТА, если возможно, обменяться контактами, буду рад, Спасибо Друзья

    ОтветитьУдалить
    Ответы
    1. Так вы объясните подробнее в чем загвоздка-то? В том чтобы вставить в блок изображение и ссылку? Или я чего-то не понял...

      Удалить
    2. Нет, чтобы при наведении на МЕНЮ справа, выпадал БЛОК, аналогично тому, что в ДАННОМ примере, но чтобы в ВЫПАВШЕМ БЛОКЕ отображались, не просто ссылки(подкатегории), а ссылки вместе с фотками и названиями ПОДКАТЕГОРИЙ меню (меню второго уровня) СПАСИБО за столь быструю реакцию...

      Удалить
    3. Так опять же возникает вопрос - в чем проблема-то? Добавьте в выпадающий блок, дополнительные блоки (для этого можно использовать как тег <div> так и <span>) в него поместите фотографии (для этого существует тег <img>), ссылки и все остальное. Оформите все с помощью CSS. Для наглядности вот вам живой пример - http://jsfiddle.net/wvWad/

      Удалить
    4. Что-то я все же упускаю, только не могу понять что.. и со span и с div никак не получается... Подскажите пожалуйста, что не так... http://jsfiddle.net/KRsrm/2/

      Удалить
    5. Очень много ошибок. Понятно что вы начинающий, но в таком случаи, во-первых: пишите код чисто, со всеми переносами и пробелами, пусть он будет казаться размашистым и громоздким, но по крайней мере будет понятен, а во-вторых стоит быть более внимательным к записям и еще подучить свойства тегов. Вот откорректированный ваш вариант - http://jsfiddle.net/KRsrm/3/ открывайте оба и сравнивайте, ищите свои ошибки , это лучший вариант обучения.

      Удалить
    6. Дай Вам Бог здоровья, СПАСИБО огромное, конечно я детально все просмотрел, мне в первую очередь хочется понять, чтобы самому творить, а не спрашивать постоянно... Поправьте, если не прав, но ЕСЛИ я хочу, чтобы при наведении на МЕНЮ(первый уровень) Выпадало ОКНО с ПОДкатегориями(второй уровень) то, видимо "div" уже не подойдет, т.к. расставляет все категории (в выпавшем окне) ВЕРТИКАЛЬНО, а хотелось бы, что бы, 4 ПОДкатегории выстраивались ГОРИЗОНТАЛЬНО (если ПОДкатегорий 8, то соотеветсвенно, ДВА ряда по 4) В общем пришлось Использовать "span" для ПОДкатегорий, но и тут проблема, Названия ПОДкатегории размещаются левее фото, ВИДИМО без ТАБЛИЦЫ в выпадающем окне не обойтись... если я правильно изложил мысли, Ответьте Пожалуйста, если меня не поняли, объясню в двух в словах (хочу, чтобы при наведении МЕНЮ в Левом Сайдбаре, выпадало окно со всеми ПОДкатегориями, и чтоб НАЗВАНИЕ было ПОД фото, а не слева от него) СПАСИБО, ещей раз

      Удалить
    7. Чуть не забыл, вот ссылка на материал, корявенько пока, и я представляю какой это труд... я Вообще начал изучать Джумлу, чуть разобравшись с ней, понял, что нужен СВОЙ шаблон, а чтоб Сверстать его, неделю изучал HTML и CSS по урокам Евгения Попова, понятное дело, что нужно еще и PHP, Java+JQuery
      ссылка на мой Результат http://jsfiddle.net/d3A4N/

      Удалить
    8. Опять же, есть синтаксические ошибки, например не закрыт тег IMG, а также учите еще свойства CSS , 1-2 дня для этого мало , новичку как минимум нужно 1-2 месяца чтобы хорошо "рубить" в стандартных свойствах. Вот ваш пример на скорую руку http://jsfiddle.net/d3A4N/2/ , т.к. времени нет пока делать все как положено, а вообще легче сверстать это дело списками, и легко и править и добавить удобно коли что.

      Удалить
    9. Прикольный сервис у Вас тут, ответов ждать долго не приходиться... конечно ЧАТ с админами был бы лучше, понятней чайникам было бы, может тогда посоветуете какую литературу читать, желательно в нете), с примерами и т.д.... а Видео Курсы, чем удобны, тем, что ты САМ, с Автором, делаешь все пошагово, проблемка возникает только тогда, когда ты делаешь, что-то новое, то, о чем Автор Видео курса не упомянул, и вообще эта тема такая интересная и забавная, хочу изучить и так-же делиться опытом, например ожидая ответ от Вас, многоуважаемая Администрация, наткнулся на статью, что настала эра "Адаптивных меню" которые не ломаются ни на каких, даже "двустрочных дисплеев"))) мобильников)) - Шаблоны, подходящие под любой размер экрана, тогда получается, ТИП меню, над которым я работал (см.выше) уже не подходит))) начинаешь ковырять и в итоге натыкаешься на что-то новое, другое))) Для этого, НАМ начинающим, нужны советчики - грамотные люди, знающие толк в этом)
      Еще раз спасибо, доволен Вашим сервисом + 99.99 ;)

      Удалить
    10. По поводу "быстро", это потому что я в он-лайне был ))) Что сказать об адаптивном дизайне? Да это следующий и весьма естественный шаг в развитии веб-страниц, сложного в этом ничего нет, а полезного много. Относительно изучения азов, я лично не вылазил отсюда : http://htmlbook.ru/, и как-то даже написал вот такую статейку - http://www.magentawave.com/2013/01/how-i-learn-css.html .

      Удалить
  26. Анонимный07.02.14, 0:09

    интересно каким образом его можно интегрировать в какой нибудь движок

    ОтветитьУдалить
  27. Анонимный13.03.14, 4:49

    Очень круто, мне нравится ваш сайт )))

    ОтветитьУдалить
  28. Анонимный15.03.14, 0:00

    Отличный сайт и доступно здесь всё объяснено на 100%

    ОтветитьУдалить
  29. Александр, здравствуйте! Огромное спасибо за Ваш блог и внимание к ученикам!
    Если можно - "Прямая ссылка "Скачать HTML" не рабочая, пожалуйста поправьте ссылку. "

    ОтветитьУдалить
  30. Анонимный19.12.14, 23:53

    Спасибо я очень давно искала это меню!!!!!!!!!!!! Супер!!!!!!!!!!!!! Спасибо!!!!!!!!!! Ура!!!!!!!!!!!
    )))))))))))))))))))))))))))))))))))))))))))))

    ОтветитьУдалить
  31. Добрый день!

    Опишите подробно, как надо установить супер меню (Mega Drop Down Menu) на сайт Blogger?

    А то непонятно, как это установить, когда я эту скачал zip файл, а там варианты файлов.
    Вот как-то сделать?

    ОтветитьУдалить
  32. Сквозь муки, установила это меню. XD
    Но можно ли как-то изменить его цвет?

    ОтветитьУдалить
    Ответы
    1. Какое именно вы поставили к себе?

      Удалить
    2. Часть кода отвечающего за стиль установила в шаблон, а остальной код был поставлен в виджет HTML.

      Удалить
    3. Зачем? Почему весь код не установить в виджет? Зачем шаблон забивать?

      Удалить
    4. Если я ставлю весь код в виджет, у меня пропадает половина дизайна блога. Ссылки меняют цвет, пропадает фон...

      Удалить
    5. Странно раньше такого не наблюдалось...

      Удалить
  33. Прощу прощения что не ответила сразу. Я ставила себе первое меню.

    ОтветитьУдалить
    Ответы
    1. селектор .navmenu отвечает за цвет меню, .navtab div a (с соответствующими псевдоклассами) - за цвет ссылок.

      Удалить
  34. ВАУ! Вот это меню, просто шедевр! Наберусь сил, и попробую. Александр, в блоггере система комментирования не совсем удобная. Хорошо было бы от вас пост о крутом шаблоне комментирования. Дискас тоже корявый. Это возможно? Я тут не по теме немного).

    ОтветитьУдалить
    Ответы
    1. Мое меню (первое), уже устарело и его я обновлю в ближайшее время, а насчет комментарриев, то это можно поискать альтернативу дискусу, но стандартную форму переделать не получится.

      Удалить
  35. Добрый день! Скажите, пожалуйста, можно ли данный код добавить на сайт на платформе wix?

    ОтветитьУдалить
    Ответы
    1. Если там есть возможность добавлять в шаблон собственный HTML, то думаю проблем возникать не должно.

      Удалить

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

BestProject