Адаптивное меню Blogger для ПК и мобильных устройств.

В этом посте я представлю отзывчивое меню. Я напоминаю, что Responsive Graphics, иначе называемый Responsiva, позволяет макету элементов адаптироваться к разрешению устройства, с которым открывается страница. Помните, что вы можете скачать адаптивные шаблоны для Blogger из Интернета .

Адаптивное меню хорошо адаптированное к устройству будет иметь другой вид, если он открыт с рабочего стола или мобильного телефона. Точка останова, то есть точка перехода с одного дисплея на другой, обычно устанавливается в 768 пикселей, что является разрешением iPad. Шрифты Google также использовались для дальнейшей настройки. Библиотека jQuery также используется . Если они уже присутствует в вашем шаблоне, пропустите вставку строки кода, выделенной желтым цветом.

Установка меню намного проще, чем может показаться, и трудности касаются только настройки цветов, редактирование текста и установке вашего меню. Внешний вид меню при открытии с мобильного телефона выглядит следующим образом

 

Внешний вид меню

 

В браузере вы должны будете щелкнуть значок меню в виде трех горизонтальных линий, чтобы открыть различные элементы, которые будут отображаться ниже и которые можно снова скрыть одним щелчком мыши. Если меню открывается с рабочего стола, оно будет содержать те же элементы что и мобильная, только добавляется анимация.

 

анимированная мышь

 

После сохранения шаблона для возможного восстановления, перейдите в Тема -> Редактировать HTML и найдите одну из строк <header> или </header> . Первый указывает на начало заголовка, а второй — на конец. Если вы хотите , чтобы ваше меню было выше заголовка код вставляется выше <header> , но если вы хотите , чтобы показать меню ниже заголовка, вы должны вставить код ниже </header> . Код в каждом случае одинаков и имеет следующий вид:

 

<!— Menu Responsive Inizio —><style>@import url(https://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 &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 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 —>

 

См. также:  Карта сайта для Blogger

Потом сохраняет шаблон.

Настройки

Чтобы настроить меню, вы можете изменить цветовые коды, которые которые я использовал, чтобы адаптировать их к цветам тестового блога, а именно: #ffffff , #FEE5D0 , #D5803A и

 #955928 . Семейство используемых Google Fonts — это Raleway, который можно изменить.

Последняя часть кода — это та, которая определяет содержание меню. Синий текст в  является пунктами меню и URL — адреса страниц должны заменить знака ( # ). Вы также можете добавить несколько записей, вставив другие строки с этим синтаксисом

 

<li><a href=‘URL_LINK’>VOCE MENÙ</a></li>


В заключение я напомню, что выделенная желтой линией строка — это jQuery, и ее можно опустить, если эта библиотека уже присутствовала в модели Blogger . Наконец, продолжительность анимации,определяемая CSS3, составляет 0,3 с; то есть три десятых секунды .

 

Ознакомьтесь также

Самые популярные компьютерные игры в России

Самые популярные компьютерные игры в России

Компьютерные игры популярны среди людей всех возрастов. В России также можно найти множество любителей игр, …

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *