Адаптивное меню для Blogger на двух уровнях

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



Это меню представлено с переработкой кода для загрузки файлов на Google Sites . Адаптивный дизайн или дизайн отзывчивый, является методом который используется для создания веб - страниц , которые адаптируются графически в различных разрешениях экрана, в которых они открыты. Учитывая большое развитие мобильных устройств и учитывая, что теперь трафик со смартфонов и планшетов для определенных типов сайтов стал не только очень важным, но даже распространенным, полезно постараться вести блог с внешним видом, который дружелюбен для тех, кто посещает его с мобильного устройства.
Пользователи Blogger могут активировать мобильную версию, чтобы иметь сайт, который можно легко просматривать даже с мобильного телефона. Это, однако, приводит к отказу от того, что касается боковых панелей, которые не отображаются, и к меню, даже если вы выбираете настроенную мобильную версию, не открываются правильно. Давайте посмотрим, как мы можем создать меню, которое будет отображаться как в настольной версии, так и в мобильной версии, с разными режимами навигации.

На предыдущем скриншоте показано меню, открытое обычным настольным браузером . При открытии на смартфоне, меню представлено таким образом


мобильная версия



В планшетах меню будет выглядеть немного иначе


В планшетах меню будет выглядеть немного иначе




После сохранения шаблона перейдите в Тема> Редактировать HTML , найдите тег </head> и сразу же вставьте следующий код.

<!-- Адаптивное меню Пуск--><link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><!-- File CSS per personalizzare aspetto menu -->  <link href='https://sites.google.com/site/progetto3322/archivio/hybridmenu.css' rel='stylesheet'/><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"/>
<script src="
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"/>
<![endif]-->
<![endif]--><!-- Адаптивное меню конец  -->

где выделенная серым цветом часть используется исключительно для устройств, которые используют Internet Explorer 9/10/11 . Если вас не интересуют посетители, у которых еще есть этот браузер, мы можем обойтись без их вставки. Файл javascript, выделенный зеленым цветом был загружен на Google Drive, и было бы целесообразно изменить его, а затем снова загрузить на тот же хостинг. Изменения в основном касаются чтобы сделать их более гармоничными с кодами вашего сайта.

Далее мы ищем строку в шаблоне блога, которая является следующей

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

В некоторых старых шаблонах все еще может быть только тег <body>. Затем мы ищем закрывающий тег, который в обоих случаях является </body> . Сразу после и над этими двумя строками вставляются еще две, чтобы весь видимый код блога был в div с классом- wrapper.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'><div id='wrapper'>... Codice della parte visibile del blog ...</div></body>

Этот шаг необходим для горизонтального перемещения содержимого страницы при открытии меню в режиме мобильного устройства . Теперь нам нужно вставить фактическое меню между строкой <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> и строкой
<div id='wrapper'> только что вставленой. Вот пример кода меню


<!-- Адаптивное меню Пуск --><nav id='mobile-menu'/><nav id='hybridmenu'><ul class='main-menu'><li class='mobile-menu-item'><i class='fa fa-bars'/></li><li class='logo'>  <a href='URL_LINK' title='Titolo Logo'>    <img alt='nome-logo' src='https://lh6.googleusercontent.com/UXipNDtbkCc78c1U7T-YXoj6LNTzKqeg4lZshsuV30JL=w105-h96-no'/>  </a></li>                 <li class='parent'>  <a href='#'><i class='fa fa-html5'/><span>Menu Elemento 1</span></a>  <ul class='sub-menu'>    <li><a href='#'>Sottomenu Elemento 1</a></li>    <li><a href='#'>Sottomenu Elemento 2</a></li>    <li><a href='#'>Sottomenu Elemento 3</a></li>    <li><a href='#'>Sottomenu Elemento 4</a></li>  </ul></li><li class='parent'>  <a href='#'><i class='fa fa-css3'/><span>Menu Elemento 2</span></a>  <ul class='sub-menu'>    <li><a href='#'>Sottomenu Elemento 1</a></li>    <li><a href='#'>Sottomenu Elemento 2</a></li>    <li><a href='#'>Sottomenu Elemento 3</a></li>  </ul></li><li class='parent'>  <a href='#'><i class='fa fa-gear'/><span>Menu Elemento 3</span></a></li>        <li class='menu-right parent'>  <a href='#'><i class='fa fa-phone'/><span>Menu Elemento 5</span></a>  <ul class='sub-menu'>    <li><a href='#'>Sottomenu Elemento 1</a></li>    <li><a href='#'>Sottomenu Elemento 2</a></li>    <li><a href='#'>Sottomenu Elemento 3</a></li>  </ul></li><li class='menu-right parent'>  <a href='#'><i class='fa fa-comment'/><span>Menu Elemento 4</span></a>  <ul class='sub-menu'>    <li><a href='#'>Sottomenu Elemento 1</a></li>    <li><a href='#'>Sottomenu Elemento 2</a></li>  </ul></li>               </ul></nav><!-- Адаптивное меню конец  -->

Мы еще не закончили. Теперь мы должны вернуться к строке </body> и вставить этот последний код поверх него.

<!-- Пуск в меню адаптивных скриптов --><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/><script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'/><script src='https://sites.google.com/site/progetto3322/archivio/hybridmenu.js'>  </script><!-- Адаптивный скрипт Menu -->

Наконец сохраняем шаблон. Возможно, нам нужно обобщить положение трех блоков кода

<!-- Адаптивное меню начало  -->
... Код первого блока ...
<!-- Адаптивное меню завершение -->
</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<!-- Адаптивное меню запуск  -->
... Код второго блока ...
<!-- Адаптивное меню конец  -->
<div id='wrapper'> 
...Код шаблон исходного шаблона ... 
 </div> 
<!-- адаптивное меню  скрипта Start -->
... код третьего блока ...
<!-- адаптивное меню  скрипта End -->

в котором они были окрашены в синий цвет строки и код уже присутствует. Поскольку вставка сценариев выше строки </body> является обычной практикой, после установки этого меню, было бы целесообразно вставить эти новые коды выше строки </div>, выделенной коричневым цветом вместо</body> .

персонализации

Как сказано, для внешнего вида меню, вам нужно отредактировать файл css выделенный зеленым цветом. Другой javascript, выделенный таким же образом, должен быть загружен в учетную запись Google Drive пользователя, чтобы избежать проблем с пропускной способностью. В двух файлах есть комментарии на русском языке для облегчения персонализации. Это меню использует JQuery и JQuery UI .


В меню есть логотип, который можно настроить, заменив его изображением PNG размером около 100x100 пикселей . Любая ссылка может быть связана с этим логотипом, как и на главной странице. Ссылки на различные элементы должны быть вставлены вместо знаков решётка ( # ). Существует два класса меню: родительский, который будет размещать элементы слева, и родительское меню, который будет размещать их справа. Могут быть введены другие основные меню (левое или правое) и другие вторичные меню с единственным требованием для поддержания того же синтаксиса.

ОткрытьЗакрытьКомент
Cancel