Горизонтальное меню представляет собой список основных страниц и разделов блога, причем в интернете можно найти множество готовых решений. Большинство из них подходят к блогу на Блогспот, требуя лишь небольшой корректировки. Главное, найти наиболее удачное место для размещения меню. В разделе «Дизайн» 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, который необходим для представления меню на мобильных устройствах.
Полностью раскрытое меню на мобильных устройствах будет выглядеть так.
Итак, в 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 на те, которые используются в вашей теме.
(Всего визитов: 54, сегодня: 1)
Стильное меню