В этом посте я представлю отзывчивое меню. Я напоминаю, что Responsive Graphics, иначе называемый Responsiva, позволяет макету элементов адаптироваться к разрешению устройства, с которым открывается страница. Помните, что вы можете скачать адаптивные шаблоны для Blogger из Интернета .
Адаптивное меню хорошо адаптированное к устройству будет иметь другой вид, если он открыт с рабочего стола или мобильного телефона. Точка останова, то есть точка перехода с одного дисплея на другой, обычно устанавливается в 768 пикселей, что является разрешением iPad. Шрифты Google также использовались для дальнейшей настройки. Библиотека jQuery также используется . Если они уже присутствует в вашем шаблоне, пропустите вставку строки кода, выделенной желтым цветом.
Установка меню намного проще, чем может показаться, и трудности касаются только настройки цветов, редактирование текста и установке вашего меню. Внешний вид меню при открытии с мобильного телефона выглядит следующим образом
В браузере вы должны будете щелкнуть значок меню в виде трех горизонтальных линий, чтобы открыть различные элементы, которые будут отображаться ниже и которые можно снова скрыть одним щелчком мыши. Если меню открывается с рабочего стола, оно будет содержать те же элементы что и мобильная, только добавляется анимация.
После сохранения шаблона для возможного восстановления, перейдите в Тема -> Редактировать HTML и найдите одну из строк <header> или </header> . Первый указывает на начало заголовка, а второй — на конец. Если вы хотите , чтобы ваше меню было выше заголовка код вставляется выше <header> , но если вы хотите , чтобы показать меню ниже заголовка, вы должны вставить код ниже </header> . Код в каждом случае одинаков и имеет следующий вид:
<!— Menu Responsive Inizio —><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: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 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=’#‘>Home</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><!— Menu Responsive Fine —>
Потом сохраняет шаблон.
Настройки
Чтобы настроить меню, вы можете изменить цветовые коды, которые которые я использовал, чтобы адаптировать их к цветам тестового блога, а именно: #ffffff , #FEE5D0 , #D5803A и
#955928 . Семейство используемых Google Fonts — это Raleway, который можно изменить.
Последняя часть кода — это та, которая определяет содержание меню. Синий текст в является пунктами меню и URL — адреса страниц должны заменить знака ( # ). Вы также можете добавить несколько записей, вставив другие строки с этим синтаксисом
<li><a href=‘URL_LINK’>VOCE MENÙ</a></li>
В заключение я напомню, что выделенная желтой линией строка — это jQuery, и ее можно опустить, если эта библиотека уже присутствовала в модели Blogger . Наконец, продолжительность анимации,определяемая CSS3, составляет 0,3 с; то есть три десятых секунды .
