Адаптивное меню для Блогспот
Первое меню
Меню довольно легко встало на Блогспоте, но к сожалению, не подходит для блогов у которых шапка (хедер) с картинкой. Гаджет будет располагаться сверху и частично перекрывать изображение.
Меню раскрывающееся (выпадающее), со встроенным поиском. В тёмных тонах, но цвет можно поменять под дизайн своего сайта.
Нашла меню на сайте 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'>☌</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 > li > ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu > ul > 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 > a { background: #25a186; color: #fff; } .menu ul li > a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul > 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 > .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .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: "\2630"; font-weight: normal; } a.menu-link.active:after { content: "\2715"; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu > ul > li { display: block; } .menu > ul > li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover > 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'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}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>
Второе меню
Адаптивное-плавающее-меню-для-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 > ul:after {
content: ".";
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 > ul {
background: #D5803A;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > 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 > ul > li.active > a {
color: #FEE5D0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > 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 > ul > li > 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 > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #D5803A;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #FEE5D0;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > 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: "";
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: "";
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
Комментарии со спамом удаляются.