Адаптивное меню для Блогспот

Потребовалось для сайта адаптивное горизонтальное меню, которое будет меняться в зависимости от размера экрана. Очень долго искала в интернете подходящий гаджет. И вроде бы предложено много видов, но не каждый встаёт на Блогспот. А если и устанавливается, то не работает. После недельных поисков на российских и иностранных сайтах нашла подходящее, которое и устанавливается легко, и работает хорошо. Если вам так же нужно адаптивное меню, предлагаю сегодня рассмотреть два, которые без проблем встали в шаблон "Корпорация чудеса".

Первое меню

Меню довольно легко встало на Блогспоте, но к сожалению, не подходит для блогов у которых шапка (хедер) с картинкой. Гаджет будет располагаться сверху и частично перекрывать изображение.
Меню раскрывающееся (выпадающее), со встроенным поиском. В тёмных тонах, но цвет можно поменять под дизайн своего сайта.
Нашла меню на сайте https://danteizm.blogspot.com
Вот так выглядит гаджет в десктопной и мобильной версии:
десктопная версия
мобильная версия
Заходим в Тема — Изменить HTML. Открывается шаблон, находим тег </body>, и выше него вставляем код:
<div class='nav_wrapper'> <!--<a class="menu-link" href="#menu"></a>--> <div class='spinner-master'> <input id='spinner-form' type='checkbox'/> <label class='spinner-spin' for='spinner-form'> <div class='spinner diagonal part-1'/> <div class='spinner horizontal'/> <div class='spinner diagonal part-2'/> </label> </div> <a class='btn' href='#search_box' id='search'>&#9740;</a> <nav class='menu' id='menu'> <ul class='dropdown'> <li><a href='#' title='Link'>Home</a></li> <li><a href='#' title='Link'>Category</a> <ul> <li><a href='#' title='Link '>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li> <li><a href='#' title='Link'>Portfolio</a> <ul> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li> <li><a href='#' title='Link'>Work</a> <ul> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title=' Link'> Подзаголовок</a></li> </ul> </li> <li><a href='#' title='Link'>Playground</a> <ul> <li><a href='#' title='Link'>Подзаголовок </a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li> <li><a href='#' title='Link'>Sitemap</a></li> </ul> </nav> <form action='/search/' class='search_box' id='search_box'> <input name='search_criteria' placeholder='Search' type='text' value=''/> <input class='search_icon' type='submit' value='Search'/> </form> </div> <style> .centered-top-container.sticky {position: absolute;} .centered-top-container {top: 20px; position: relative;} nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; } </style> <script type='text/javascript'> $(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})}) </script>
Чтобы меню заработало, добавляем в шаблон код выше тега </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Отмечу сразу: если такой же код или похожий уже есть в шаблоне — устанавливать второй раз не нужно!  Сохраняем шаблон.
В коде можно поменять стили — шрифт, размер, цвета. Меняем внешний вид от <style> до </style>, в коде выделила красным. 
В коде сверху меняем названия категорий на свои - выделила жирным и вставляем адреса ссылок в вот такой значок # выделила в коде синим цветом. В меню можно удалять пункты и подпункты: Если нужно добавить или удалить пункт с подпунктами добавляем или убираем код такого вида:
<li><a href='#' title='Link'>Category</a> <ul> <li><a href='#' title='Link '>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li>
Если удаляем или добавляем только подпункт, то убираем или вставляем:
<li><a href='#' title='Link'>Подзаголовок</a></li>
Если нужно добавить или удалить только пункт, без подпунктов - то:
<li><a href='#' title='Link'>Sitemap</a></li>

Второе меню

Простое плавающее меню с анимацией. Увидела на сайте https://techno-blogger.ru.
Адаптивное-плавающее-меню-для-blogger-Технологии-blogger.htmlМеню при прокрутке страницы будет оставаться видимым вверху. В мобильной версии меню выглядит как обычная полоса с кнопкой гамбургер, при нажатии на которую меню открывается. В настольной версии блоки пунктов при наведении курсора переворачиваются. 
меню в десктопной версии
мобильная версия
Заходим в Тема - Изменить HTML и находим строку: <header> или </header>. Если установить код над <header>, то меню появится над заголовком, а чтобы отобразить меню под заголовком блога, то устанавливаем сразу после </header>.
<style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu{ width:100%; z-index: 9999; } #cssmenu:after, #cssmenu &gt; ul:after { content: &quot;.&quot;; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { width: auto; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu &gt; ul { background: #D5803A; } #cssmenu &gt; ul &gt; li { float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #cssmenu.align-center &gt; ul { font-size: 0; text-align: center; } #cssmenu.align-center &gt; ul &gt; li { display: inline-block; float: none; } #cssmenu.align-right &gt; ul &gt; li { float: right; } #cssmenu &gt; ul &gt; li &gt; a { padding: 16px 20px; font-size: 14px; color: #ffffff; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; background: #D5803A; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #cssmenu &gt; ul &gt; li.active &gt; a { color: #FEE5D0; } #cssmenu &gt; ul &gt; li:hover &gt; a, #cssmenu &gt; ul &gt; li &gt; a:hover { color: #FEE5D0; -webkit-transform: rotateX(90deg) translateY(-23px); -moz-transform: rotateX(90deg) translateY(-23px); transform: rotateX(90deg) translateY(-23px); -ms-transform: none; } #cssmenu &gt; ul &gt; li &gt; a::before { position: absolute; top: 100%; left: 0; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 16px 20px; color: #FEE5D0; background: #955928; content: attr(data-title); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -ms-transform: translateY(- -18px); } #cssmenu &gt; ul &gt; li:hover &gt; a::before, #cssmenu &gt; ul &gt; li &gt; a:hover::before { background: #D5803A; } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen &gt; ul, #cssmenu.small-screen.align-center &gt; ul { width: 100%; text-align: left; } #cssmenu.small-screen &gt; ul &gt; li, #cssmenu.small-screen.align-center { float: none; display: block; border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen &gt; ul &gt; li:hover &gt; a, #cssmenu.small-screen &gt; ul &gt; li &gt; a:hover { color: #FEE5D0; -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen &gt; ul &gt; li &gt; a::before { display: none; } #cssmenu.small-screen #menu-button { display: block; padding: 16px 20px; cursor: pointer; font-size: 14px; text-decoration: none; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; background: #D5803A; } #cssmenu.small-screen #menu-button:after { content: &quot;&quot;; position: absolute; right: 20px; top: 17px; display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; width: 22px; height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after { border-top: 2px solid #FEE5D0; border-bottom: 2px solid #FEE5D0; } #cssmenu.small-screen #menu-button:before { content: &quot;&quot;; position: absolute; right: 20px; top: 27px; display: block; width: 22px; height: 2px; background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before { background: #FEE5D0; } </style> <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/><script> //<![CDATA[ $(function() { var $flotarMenu = $("#cssmenu"), $window = $(window), offset = $flotarMenu.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'}); } else { $flotarMenu.css({'position' : 'relative', 'top' : 'auto'}); } }); }); //]]> </script> <script type='text/javascript'> //<![CDATA[ (function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", format: "dropdown", breakpoint: 768, sticky: false }, options); return this.each(function() { cssmenu.find('li ul').parent().addClass('has-sub'); if (settings.format != 'select') { cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>'); $(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); } else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); multiTg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); } else if (settings.format === 'select') { cssmenu.append('<select style="width: 100%"/>').addClass('select-list'); var selectList = cssmenu.find('select'); selectList.append('<option>' + settings.title + '</option>', { "selected": "selected", "value": ""}); cssmenu.find('a').each(function() { var element = $(this), indentation = ""; for (i = 1; i < element.parents('ul').length; i++) { indentation += '-'; } selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option'); }); selectList.on('change', function() { window.location = $(this).find("option:selected").val(); }); } if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() { if ($(window).width() > settings.breakpoint) { cssmenu.find('ul').show(); cssmenu.removeClass('small-screen'); if (settings.format === 'select') { cssmenu.find('select').hide(); } else { cssmenu.find("#menu-button").removeClass("menu-opened"); } } if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) { cssmenu.find('ul').hide().removeClass('open'); cssmenu.addClass('small-screen'); if (settings.format === 'select') { cssmenu.find('select').show(); } } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $(document).ready(function() { $("#cssmenu").menumaker({ title: "Menu", format: "dropdown" }); $("#cssmenu a").each(function() { var linkTitle = $(this).text(); $(this).attr('data-title', linkTitle); }); }); }); })(jQuery); //]]> </script> <div id='cssmenu'> <ul> <li class='active'><a href='#'>Главная</a></li> <li><a href='#'>Disclaimer</a></li> <li><a href='#'>Privacy</a></li> <li><a href='#'>Etichette</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contatti</a></li> </ul> </div>
Сохраняем шаблон. 
Менять в шаблоне можно только внешний вид. Эта часть кода находится между тегами <style> и </style>. Меняйте три цвета # FEE5D0, # D5803A и # 955928. Так же можно менять белый цвет шрифта на свой (#ffffff).  Я перепробовала несколько вариантов, но наиболее хорошо смотрится меню одного цвета, только разных оттенков: светлый, обычный цвет и тёмный. 
Можно поменять шрифт - выделила в коде синим. Либо совсем удалить эту строку. 
Меняйте названия пунктов - выделила жирным. И добавляйте URL страниц, вместо знака (#) - выделила красным. 
Так же можно удалять, либо добавлять пункты меню: 
<li><a href='#'>Privacy</a></li>
Выделенная оранжевым полоса в коде - это библиотека JQuery. Если у вас она есть, то удалите эту строку.

Генераторы

Предлагаю посмотреть несколько онлайн-конструкторов адаптивного меню:
https://www.generateit.net/menu-generator/
https://www.htmlcodegenerator-tools.com/2019/10/html-css-navigator-menu-bar-generator.html
https://www.generateit.net/menu-generator/

Другие адаптивные меню 

Сайты с другими адаптивными меню, которые у меня на блог не встали, но возможно, на другой шаблон они подойдут:
https://aryona.ru/adaptivnoe-gorizontalnoe-menyu-dlya-blogger/
https://techno-blogger.ru/2020/03/4-adaptivnyh-menyu-blogger.html
https://www.mybloggertricks.com/2015/07/how-to-create-responsive-menu-in-blogger.html
https://blogwox.blogspot.com/2016/10/responsive-navigation-menu-blogger.html
https://www.mybloggerlab.com/2014/08/how-to-easily-add-mobile-responsive-menu-in-blogger.html
https://makeonblog.blogspot.com/2016/06/creating-responsive-drop-down-menu.html
https://www.dropdownmenugenerator.com/blog/responsive-menu-blogger.aspx
https://www.ogbongeblog.com/make-blogger-mobile-pagelist-drop-down-menu-display-like-webview.html

Ваши комментарии:

Комментарии со спамом удаляются.