Для начала смотрим итог - выпадающие МЕГА меню сделанное на CSS:
DEMO
Каждому элементу присвоен свой класс, их стили описаны в 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?
Для простой и быстрой установки различных выпадающих меню в свой блог, при горизонтальном их размещении, вам поможет информация из этой статьи Почему не выпадает меню в Blogger?
Спасибо за статью! Правда, для меня это сложно, потому что я не знаток CSS и HTML, но попробую
ОтветитьУдалитьКонечно попробуйте, как я уже писал в статье, особых усилий для внедрения предпринимать не нужно, все делается через гаджет "HTML/JavaScript" Blogger. Посмотрите, если что-то не понятно пишите - помогу разобраться.
УдалитьА вообще я ведь тоже не знаток, пишу о том, что сам делаю, но на самом деле все проще чем кажется, что-то вроде LEGO, только в цифровом виде :)
Здравствуйте! Простите но я вообще не понимаю CSS и HTML но у меня есть свой блог и очень хочется добавить такое меню! Вы не могли бы меня помочь по установке меню в блоггере? или рассказать подробнее как установить меню с нуля на блоггере? Заранее спасибо!
УдалитьПосоветуйте где взять шаблон для вашего меню
ОтветитьУдалитьА тот который в статье, не подходит? Кнопочки "HTML", "CSS" все коды там. Как применять написано в статье.
УдалитьИли вам нужен сам шаблон блога? Если шаблон блога, то любой кроме "Корпорация Чудеса" , ну и Динамические шаблоны...
Вы меня просто спасли, уже всю голову с этими меню сломала) Единственное вопрос: в меню вашего блога, если наводишь курсор на кнопку, то появляется выпадающее меню и ты можешь спокойно по нему водить мышкой. У меня же почему то при наведении курсора на кнопку меню появляется, но при отводе курсора вниз сразу пропадает.От чего это может быть?
ОтветитьУдалитьЗаходил к вам, все, вроде, нормально, никуда выпадающий блок не пропадает пока курсор на нем. Но если что, то можно просто подтянуть их вверх (блоки), чтоб не "спрыгивали" - такое бывает в различных шаблонах. Для этого там где /*---------- Стиль выпадающих блоков ------------*/ найдите свойство top: 38px; и уменьшите немного значение, скажем на 35px, - подберите подходящие :)
УдалитьРад что помог и менюшка стала полезной. :)
И сложно - и просто!
ОтветитьУдалитьРеспект автору! Так держать!
Большая просьба- опубликуйте код менюшки с прокруткой.
ОтветитьУдалитьЗаранее благодарен!
Думаю в этом нет необходимости, чтобы добавить вертикальную полосу прокрутки к блоку, нужно просто указать это свойство в стилях, дописав overflow-y:scroll к нужному блоку.
УдалитьНапример для внутренних блоков, там где /* --------- Стили для блоков колонок внутри выпадающего блока ---------- */
Возьмем вот этот блок - .navtab .col_1 {width:150px;} и добавим полосу прокрутки, при этом нужно также указать и тем самым зафиксировать высоту блока свойством height
Получим примерно следующие : .navtab .col_1 {width:150px; height: 250px; overflow-y:xcroll;}
Естественно высоту и ширину вы уже будете подбирать по потребностям.
Также вы можете самостоятельно добавить свой внутренний блок, по примеру уже имеющихся, в котором будет указана полоса прокрутки.
А как насчет прокрутки с подменю?
ОтветитьУдалитьКак сделать чтоб название подменю оставалось при прокрутке на месте и при этом не страдало следующее подменю?
Для того чтобы сделать прокрутку внутренних блоков , достаточно создать в 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>
Спасибо! Буду пробовать...
ОтветитьУдалитьПодскажите как поменять цвет шрифта выпадающего блока?
ОтветитьУдалитьЗаглядывал к вам в блог, все там в порядке с полосами прокрутки - они одни и я так понял как вы и хотели. теперь что касается цвета шрифта, то его к сожалению поменять нельзя :), но можно поменять цвет текста, за него отвечает свойство color
УдалитьХочу засунуть в кнопку скрипт чата. Как это сделать???
ОтветитьУдалитьначало скрипта начинается на слово скрипт и заканчивается.
Вы извините - не удается в Ваших коментариях образец скрипта выложить - не воспринимает!
Что значит "в кнопку"? Если в выпадающий блок, то вставляйте код скрипта между тегами выпадающего блока и все будет хорошо. Только вопрос останется в практичности этой задумки.
УдалитьИзвените что не в теме пишу, подскажите или сделайте тему как поставить свою фотку в гугле перед блогом?. Например как у вас!
ОтветитьУдалитьВообще-то такой пост есть :) Авторство блога через профиль Google+. Но, пожалуй, добавлю его в меню для удобства.
УдалитьСпасибо большое - отличное меню. Действительно все элементарно.
ОтветитьУдалитьСпасибо, приятно :)
УдалитьСпасибо отличная штука )
ОтветитьУдалитьПожалуйста, рад что пригодилось :)
УдалитьСпасибо большое !!!11
ОтветитьУдалитьДобрый день подскажите пожалуйсто , обнаружил что в Internet Explorere - цвет меню не поменялся и меню западает. Тему блога поставил (Венецианское окно). На других браузерах все нормально.
ОтветитьУдалитьЗарание спасибо за ответ .
А IE, простите, какой версии? Если 7, то на него вообще внимания не обращаю, пользователи идутЬ, что говорится - лесомЬ, В 8 и 9 тестил, вроде все тип-топ было...
УдалитьУ меня стоит 8-й, Скажите а можно безболезненно удалить один раздел в меню?
ОтветитьУдалитьКонечно можно, а также можно его вернуть. Создаете блок присваиваете один из выбранных идентификаторов и вперед. А чтобы в IE 8 и 9 все было нормально, то в шаблоне блога найдите вот эту строчку:
Удалить<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
и поменяйте 7 на 9 в 'IE=EmulateIE7'
Огромное спасибо, все просто здорово мне очень нравиться!
ОтветитьУдалитьВот что у меня получилось ) http://logik-com-ua.blogspot.com/
Благодаря Вам !
Всегда пожалуйста, если что обращайтесь :) Кстати можете попробывать помудрить с оригиналом (скачать исходник можно в конце статьи) пользуясь информацией от сюда Почему не выпадает выпадающие меню
УдалитьА можно ли уже к готовому меню добавить элементы из вашего меню? Блог http://yakushevskaya.blogspot.ru "Портфолио учителя". Я бы хотела на вкладке "Об авторе" добавить выпадающее меню с добавлением видео и ссылок. Можно ли это сделать?
ОтветитьУдалитьТогда нужно дописывать новый CSS и HTML код для такого блока. А может даже и править существующие.
УдалитьMagentaWAVE, HTML копируем в гаджет. А CSS - в шаблон блога или?
ОтветитьУдалитьМожно в шаблон, но можно и туда же в гаджет, до или после HTML кода, только заключите между тегами <style>...</style>
УдалитьПрямая ссылка "Скачать HTML" не рабочая, пожалуйста поправьте ссылку. Информация очень заинтересовала, хоть я и начинающая блогер, но очень хотелось бы попробовать.
ОтветитьУдалитьПерезалил в SkyDrive
УдалитьБольшое спасибо. Скачала. Будем разбираться. Оперативно-двойное спасибо )))))
УдалитьПоставила на тестовый блог данное меню-стало без проблем, понравилось. Спасибо. Много интересного на сайте. Удачи.
УдалитьХотела использовать эту рыженькую менюшку но заметила один косяк попробую объяснить. При уменьшении экрана пункты меню съезжают вниз и выстраиваются друг под другом. Короче не остаются в одной линии. Возможно ли это исправить?
ОтветитьУдалитьЯ про демо говорю сама еще не пробовала установить.
Да такое есть, меню не подогнано под мобильные устройства, первый вариант (мой) это скорее просто показательный пример что не все выпадающие меню делаются на списках - можно и на блоках. А чтобы пункты не съезжали нужно просто указать ширину (width) всего меню не в процентах, как сейчас, а в пикселах. Например:
Удалить.navmenu {
....
width: 1000px;
}
Все оказывается очень просто:) спасибо!
ОтветитьУдалитьА как сделать плавное открывание?
ОтветитьУдалитьПри помощи CSS3 или более универсально - jQuery (или другой фреймворк)
УдалитьМожно ли на примере этого шаблона http://www.mmm10x.com/ сделать фиксацию (прилипание к верхней части экрана) меню при прокрутке вниз. как сейчас на Вашем блоге? Заранее спасибо!
ОтветитьУдалитьДа можно, это делается просто, с помощью jQuery и об этом в блоге есть статья - http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
УдалитьДумаю сложностей возникнуть не должно.
Здорово! Классный сайт, буду изучать.
ОтветитьУдалитьА по этой демке косяк, не знаю уж, чей. При наведении на "меню 2" появляется навороченная страничка, там есть вставка с ютуба, так вот при попытке подвести мышку на эту вставку (ну, как бы посмотреть) вся эта красота прячется. Пока только на линуксе пробовал в огнелисе. Может, под другими осями и браузерами и не так, еще не тестил.
ЗЫ. Предмодернизация - это что-то политическое, наверное имелась в виду "премодерация"? ;)
Наверное....))) На линуксе не тестил, под виндой, работало, хотя в фоксе с этим нюансом и на ней могут быть проблемы, но народ пока молчит, я тоже не замечал...
УдалитьХорошая работа,спасибо.
ОтветитьУдалитьЛюди добрые, помогите неучу.... 3-е суток изучал по видеокурсам HTML и CSS, сказать честно, много чего узнал и много чего получаться стало... За данный урок СПАСИБО ОГРОМНЕЙШЕЕ, только у меня не совсем получается... думал на основе этого ПРИМЕРА, сделать на сайте ВЕРТИКАЛЬНОЕ МЕНЮ, при наводке, на которое менялся бы цвет (это я сделал), И чтоб справа от МЕНЮ выпадал/выезжал БЛОК с ПОДКАТЕГОРИЯМИ (фото+название с ссылкой) Это даже проще, чем ДАННЫЙ пример, помогите ПОЖАЛУЙСТА, если возможно, обменяться контактами, буду рад, Спасибо Друзья
ОтветитьУдалитьТак вы объясните подробнее в чем загвоздка-то? В том чтобы вставить в блок изображение и ссылку? Или я чего-то не понял...
УдалитьНет, чтобы при наведении на МЕНЮ справа, выпадал БЛОК, аналогично тому, что в ДАННОМ примере, но чтобы в ВЫПАВШЕМ БЛОКЕ отображались, не просто ссылки(подкатегории), а ссылки вместе с фотками и названиями ПОДКАТЕГОРИЙ меню (меню второго уровня) СПАСИБО за столь быструю реакцию...
УдалитьТак опять же возникает вопрос - в чем проблема-то? Добавьте в выпадающий блок, дополнительные блоки (для этого можно использовать как тег <div> так и <span>) в него поместите фотографии (для этого существует тег <img>), ссылки и все остальное. Оформите все с помощью CSS. Для наглядности вот вам живой пример - http://jsfiddle.net/wvWad/
УдалитьЧто-то я все же упускаю, только не могу понять что.. и со span и с div никак не получается... Подскажите пожалуйста, что не так... http://jsfiddle.net/KRsrm/2/
УдалитьОчень много ошибок. Понятно что вы начинающий, но в таком случаи, во-первых: пишите код чисто, со всеми переносами и пробелами, пусть он будет казаться размашистым и громоздким, но по крайней мере будет понятен, а во-вторых стоит быть более внимательным к записям и еще подучить свойства тегов. Вот откорректированный ваш вариант - http://jsfiddle.net/KRsrm/3/ открывайте оба и сравнивайте, ищите свои ошибки , это лучший вариант обучения.
УдалитьДай Вам Бог здоровья, СПАСИБО огромное, конечно я детально все просмотрел, мне в первую очередь хочется понять, чтобы самому творить, а не спрашивать постоянно... Поправьте, если не прав, но ЕСЛИ я хочу, чтобы при наведении на МЕНЮ(первый уровень) Выпадало ОКНО с ПОДкатегориями(второй уровень) то, видимо "div" уже не подойдет, т.к. расставляет все категории (в выпавшем окне) ВЕРТИКАЛЬНО, а хотелось бы, что бы, 4 ПОДкатегории выстраивались ГОРИЗОНТАЛЬНО (если ПОДкатегорий 8, то соотеветсвенно, ДВА ряда по 4) В общем пришлось Использовать "span" для ПОДкатегорий, но и тут проблема, Названия ПОДкатегории размещаются левее фото, ВИДИМО без ТАБЛИЦЫ в выпадающем окне не обойтись... если я правильно изложил мысли, Ответьте Пожалуйста, если меня не поняли, объясню в двух в словах (хочу, чтобы при наведении МЕНЮ в Левом Сайдбаре, выпадало окно со всеми ПОДкатегориями, и чтоб НАЗВАНИЕ было ПОД фото, а не слева от него) СПАСИБО, ещей раз
УдалитьЧуть не забыл, вот ссылка на материал, корявенько пока, и я представляю какой это труд... я Вообще начал изучать Джумлу, чуть разобравшись с ней, понял, что нужен СВОЙ шаблон, а чтоб Сверстать его, неделю изучал HTML и CSS по урокам Евгения Попова, понятное дело, что нужно еще и PHP, Java+JQuery
Удалитьссылка на мой Результат http://jsfiddle.net/d3A4N/
Опять же, есть синтаксические ошибки, например не закрыт тег IMG, а также учите еще свойства CSS , 1-2 дня для этого мало , новичку как минимум нужно 1-2 месяца чтобы хорошо "рубить" в стандартных свойствах. Вот ваш пример на скорую руку http://jsfiddle.net/d3A4N/2/ , т.к. времени нет пока делать все как положено, а вообще легче сверстать это дело списками, и легко и править и добавить удобно коли что.
УдалитьПрикольный сервис у Вас тут, ответов ждать долго не приходиться... конечно ЧАТ с админами был бы лучше, понятней чайникам было бы, может тогда посоветуете какую литературу читать, желательно в нете), с примерами и т.д.... а Видео Курсы, чем удобны, тем, что ты САМ, с Автором, делаешь все пошагово, проблемка возникает только тогда, когда ты делаешь, что-то новое, то, о чем Автор Видео курса не упомянул, и вообще эта тема такая интересная и забавная, хочу изучить и так-же делиться опытом, например ожидая ответ от Вас, многоуважаемая Администрация, наткнулся на статью, что настала эра "Адаптивных меню" которые не ломаются ни на каких, даже "двустрочных дисплеев"))) мобильников)) - Шаблоны, подходящие под любой размер экрана, тогда получается, ТИП меню, над которым я работал (см.выше) уже не подходит))) начинаешь ковырять и в итоге натыкаешься на что-то новое, другое))) Для этого, НАМ начинающим, нужны советчики - грамотные люди, знающие толк в этом)
УдалитьЕще раз спасибо, доволен Вашим сервисом + 99.99 ;)
По поводу "быстро", это потому что я в он-лайне был ))) Что сказать об адаптивном дизайне? Да это следующий и весьма естественный шаг в развитии веб-страниц, сложного в этом ничего нет, а полезного много. Относительно изучения азов, я лично не вылазил отсюда : http://htmlbook.ru/, и как-то даже написал вот такую статейку - http://www.magentawave.com/2013/01/how-i-learn-css.html .
Удалитьинтересно каким образом его можно интегрировать в какой нибудь движок
ОтветитьУдалитьОчень круто, мне нравится ваш сайт )))
ОтветитьУдалитьОтличный сайт и доступно здесь всё объяснено на 100%
ОтветитьУдалитьАлександр, здравствуйте! Огромное спасибо за Ваш блог и внимание к ученикам!
ОтветитьУдалитьЕсли можно - "Прямая ссылка "Скачать HTML" не рабочая, пожалуйста поправьте ссылку. "
Спасибо я очень давно искала это меню!!!!!!!!!!!! Супер!!!!!!!!!!!!! Спасибо!!!!!!!!!! Ура!!!!!!!!!!!
ОтветитьУдалить)))))))))))))))))))))))))))))))))))))))))))))
Добрый день!
ОтветитьУдалитьОпишите подробно, как надо установить супер меню (Mega Drop Down Menu) на сайт Blogger?
А то непонятно, как это установить, когда я эту скачал zip файл, а там варианты файлов.
Вот как-то сделать?
Сквозь муки, установила это меню. XD
ОтветитьУдалитьНо можно ли как-то изменить его цвет?
Какое именно вы поставили к себе?
УдалитьЧасть кода отвечающего за стиль установила в шаблон, а остальной код был поставлен в виджет HTML.
УдалитьЗачем? Почему весь код не установить в виджет? Зачем шаблон забивать?
УдалитьЕсли я ставлю весь код в виджет, у меня пропадает половина дизайна блога. Ссылки меняют цвет, пропадает фон...
УдалитьСтранно раньше такого не наблюдалось...
УдалитьПрощу прощения что не ответила сразу. Я ставила себе первое меню.
ОтветитьУдалитьселектор .navmenu отвечает за цвет меню, .navtab div a (с соответствующими псевдоклассами) - за цвет ссылок.
УдалитьВАУ! Вот это меню, просто шедевр! Наберусь сил, и попробую. Александр, в блоггере система комментирования не совсем удобная. Хорошо было бы от вас пост о крутом шаблоне комментирования. Дискас тоже корявый. Это возможно? Я тут не по теме немного).
ОтветитьУдалитьМое меню (первое), уже устарело и его я обновлю в ближайшее время, а насчет комментарриев, то это можно поискать альтернативу дискусу, но стандартную форму переделать не получится.
УдалитьДобрый день! Скажите, пожалуйста, можно ли данный код добавить на сайт на платформе wix?
ОтветитьУдалитьЕсли там есть возможность добавлять в шаблон собственный HTML, то думаю проблем возникать не должно.
Удалитьменю классное но сбивает все настройки блога; фон, цвет, шрифт.Но с этим какнибудь справимся.Подскажите как его зафиксировать в верху блога.
ОтветитьУдалитьВам сюда - http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
Удалитьпервый скрипт поможет сделать меню фиксированным, при прокрутке.
Пдскажите может у Вас есть токая раскрывающаяся боковая меню, или знаете где взять такую как в тех. подержке блогера слева со стрелочками. ССЫЛКА-
ОтветитьУдалить(http://www.magentawave.com/2012/05/super-dropdown-menu-on-css.html).можно аккардион но только что бы раскрывалась при нажатии, а не при новедении. Зарание спасибо.
Это которая в панели управления "Справка"? У меня вообще мало таких штук "запрятано", если что-то нужно в этом роде, легче написать при необходимости. Сделать можно любое меню, все зависит от воображения и умения :)
УдалитьМеня конечно отговаривают вешать такие гаджеты больше одного( что не получится пробится в топ 10), но я за это не переживаю, так как сайт буд двигать через директ.
ОтветитьУдалитьИнтересно как ведет себя в моб версии данное меню
ОтветитьУдалитьНикак. Оно устаревшее и вряд ли подходит для мобильной версии.
Удалить