Адаптивное горизонтальное меню для Blogger

Адаптивное горизонтальное меню для Blogger

Горизонтальное меню представляет собой список основных страниц и разделов блога, причем в интернете можно найти множество готовых решений. Большинство из них подходят к блогу на Блогспот, требуя лишь небольшой корректировки. Главное, найти наиболее удачное место для размещения меню. В разделе «Дизайн» Blogger можно найти только одно место для размещения горизонтального меню — под названием и описанием сайта. В предыдущей записи я рассказала, как добавить свой виджет верхнего меню в блог на Blogger. Кому-то кажется, что меню в верхней части сайта выглядит нагляднее, а кто-то предпочитает меню под заголовком и описанием. Возможно, вы захотите установить два меню — так тоже делается.

Адаптивное горизонтальное меню для Blogger

Горизонтальное меню должно иметь адаптивный дизайн, то есть представление меню меняется в зависимости от разрешения экрана. Это весьма повышает привлекательность блога. Данное меню не только прекрасно выглядит при просмотре как с компьютера, так и с мобильного телефона, но и удобно в пользовании.

В мобильном представлении меню приобретает общепринятый лаконичный вид.

Адаптивное горизонтальное меню для Blogger

Добавить горизонтальное меню в Blogger можно двумя способами:

1. Добавить абсолютно весь представленный ниже код в гаджет HTML/JavaScript. Это особенно рекомендуется новичкам и тем, кто не желает рисковать.

2. Поступить согласно правилам хорошего тона и добавить в гаджет HTML/JavaScript только код HTML, а все остальные части кода — в HTML вашей темы, для чего необходимо перейти в Тема » Изменить HTML. Предварительно сохраните резервную копию.

Итак, добавляем CSS меню. Для этого в HTML коде темы находим строку </head> и перед ней добавляем следующий код.

<style>
/* Горизонтальное выпадающее меню */
.topmenu {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index:100!important;
overflow-y: visible;
height: 50px;
}
#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:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#cssmenu #menu-button {
display: none;
}

#cssmenu {
font-family: Arial, sans-serif;
background: rgba(35, 35, 35, 0.9);
}

#cssmenu > ul > li {
float: left;
}

#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}

#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}

#cssmenu.align-center ul ul {
text-align: left;
}

#cssmenu.align-right > ul > li {
float: right;
}

#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #f0f0f0;
font-weight: 700;
text-transform: uppercase;
}

#cssmenu > ul > li:hover > a {
color: #ffffff;
background: rgba(20, 20, 20, 0.7);
transition: all 0.5s ease;
}

#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}

#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #f0f0f0;
content: '';
}

#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #f0f0f0;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}

#cssmenu ul ul {
position: absolute;
left: -9999px;
}

#cssmenu.align-right ul ul {
text-align: right;
}

#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

#cssmenu li:hover > ul {
left: auto;
}

#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}

#cssmenu li:hover > ul > li {
height: 35px;
}

#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}

#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}

#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 200px;
font-size: 12px;
text-decoration: none;
color: #f3f3f3;
font-weight: 400;
background: rgba(51, 51, 51, .9);
-webkit-transition: all 0.6s ease 0s;
-o-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
-moz-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
background: rgba(28, 28, 28, 0.9);
webkit-transition: all 0.6s ease 0s;
-o-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
}

#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #f0f0f0;
content: '';
}

#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}

#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #f0f0f0;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu > ul > li > a {
font-size: 12px;
letter-spacing: 1px;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #f0f0f0;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #f0f0f0;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #f0f0f0;
border-bottom: 2px solid #f0f0f0;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #f0f0f0;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: rgba(31,31,31,.9);
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #f0f0f0;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #f0f0f0;
content: '+';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
/* Горизонтальное выпадающее меню */
</style>

Теперь подключаем библиотеку jQuery и шрифты. Две строчки ниже настоятельно рекомендую добавить над тегом </head> в HTML темы, а не в гаджет — могут еще пригодиться.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script src='https://use.fontawesome.com/376037e82d.js'/>

Теперь необходимо добавить код jQuery, который необходим для представления меню на мобильных устройствах.

Адаптивное горизонтальное меню для Blogger

Полностью раскрытое меню на мобильных устройствах будет выглядеть так.

Полностью раскрытое меню на мобильных устройствах выглядит так.

Итак, в HTML-коде своей темы в самом низу находим тег </body>. Перед этим тегом добавляем следующий код jQuery.

<script>
//<!--
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Меню",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
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();
}
}
});

cssmenu.find('li ul').parent().addClass('has-sub');

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');

if (settings.sticky === true) cssmenu.css('position', 'fixed');

resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}

if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);

});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Меню",
format: "multitoggle"
});
});
})(jQuery);
//-->
</script>

Сохраните тему. Теперь осталось добавить HTML-код меню в отведенное вами для него место — в гаджет горизонтального меню, а может, непосредственно после тега <body> в HTML-коде темы.

<div class="topmenu">
<div id='cssmenu'>
<ul>
<li><a href='/'><i class="fa fa-home"></i> Главная</a></li>
<li class='active'><a href='#'><i class="fa fa-tags"></i> Рубрики</a>
<ul>
<li><a href='#'>Item 1</a>
<ul>
<li><a href='#'>Sub Product 1</a></li>
<li><a href='#'>Sub Product 2</a>
<ul>
<li><a href='#'>Sub Sub Product 1</a></li>
<li><a href='#'>Sub Sub Product 2</a></li>
</ul>
</li>
<li><a href='#'>Sub Product 3</a></li>
<li><a href='#'>Sub Product 4</a></li>
</ul>
</li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a>
<ul>
<li><a href='#'>Sub Product 1</a></li>
<li><a href='#'>Sub Product 2</a></li>
</ul>
</li>
<li><a href='#'>Item 4</a>
<ul>
<li><a href='#'>Sub Product 1</a></li>
<li><a href='#'>Sub Product 2</a></li>
</ul>
</li>
<li><a href='#'>Item 5</a></li>
</ul>
</li>
<li><a href='#'><i class="fa fa-sitemap"></i> Карта блога</a></li>
<li><a href='#'><i class="fa fa-user"></i> Об авторе</a></li>
</ul>
</div>
</div>

Теперь, когда вы внесли все добавления, сохранили тему и гаджет, посмотрите, что у вас получилось. Если результат вас устраивает, добавьте в меню свои пункты и ссылки. По необходимости, измените шрифты и цвета в настройках CSS на те, которые используются в вашей теме.

Поделиться:
Подписаться
Уведомить о
guest
1 Комментарий
Старые
Новые
Межтекстовые Отзывы
Посмотреть все комментарии
Вова Клопов
Вова Клопов
1 месяц назад

Стильное меню

1
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x