Найти выпадающее меню для блоггера не самое сложное занятие, сложно его установить в блог, точнее найти место в котором нужно разместить html код менюшки, потому как шаблоны бывают разные. Так что лучший вариант это выбрать подходящий шаблон в котором будет не только меню, но другие нужные вам виджеты.
Blogger: Выпадающее меню с адаптивным дизайном
Друзья есть хорошая новость, немного поразмыслив над тем, как еще можно добавить в блог главное меню, я вспомнил, как редактировал один из шаблонов и его главное меню, которое можно разместить практически в любом месте шаблона и оно будет срабатывать, даже для мобильных устройств.Скачать код меню
Чтобы узнать, как его устанавливать посмотрите видео:
Тема Emporio оказалась самой хитрож... вот решение, как установить это же меню в Emporio.
Горизонтальное выпадающее меню второй вариант
Снова здравствуйте. Недавно гулял по просторам интернета и забрел на парочку интересных сайтов на одном из которых увидел прекрасный виджет главного меню, так же известного, как меню навигации, которое обеспечивает вашем посетителям более удобное пользование блогом.
Как многие из вас знают меню позволяет пользователям найти точное содержание того, что они ищут на сайте осуществляя переходы через ячейки меню, в которых заданы конкретные категории. Не так давно шаблоны blogger начали меняться, их стали делать так, чтобы они так же хорошо отображали все свои элементы не только на компьютерах, но и на мобильных телефонах, чтобы с легкостью перемещаться по сайту.
Так что, если вы ищете для своего блога меню под мобильные устройства, вы попали по нужному адресу. Сегодня в этой статье мы покажем вам, как можно легко добавить на свой блог Mobile Responsive Multi Dropdown Menu. Для устройств с разными расширениями дисплея это меню будет отображаться по разному. Чем меньше расширение, тем компактнее оно будет выглядеть. Чтобы увидеть наше главное меню в действии, перейдите на наш тестовый блог.
Для того чтобы установить горизонтальное выпадающее меню на свой блог вам нужно открыть раздел Шаблон - Изменить HTML и найти там код ]]> перед которым нужно вставить следующий код:
nav { display: block; margin-top: 100px; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #9ca3da; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #9ca3da; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }Затем находим код