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

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

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

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

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

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> <link href='https://sites.google.com/site/progetto3322/archivio/hybridmenu.css' rel='stylesheet'/><![endif]-->

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

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

<body expr:class='"loading" + data:blog.mobileClass'>

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

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

Этот шаг необходим для горизонтального перемещения содержимого страницы при открытии меню в режиме мобильного устройства . Теперь нам нужно вставить фактическое меню между строкой <body expr:class='"loading" + 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcW2Pa57vsVdBSYuT1HbMczeK7FkVUoELcmgPoW6BVEiKSATgRq2rtK5cA8hFjjT_cztuRy5rEz-rHMAmK5qVx6ekLO0xrdCw9gi5f-4CSK0UuvD690NtqZFHlTRlrgcyCcGz5gfRC3Md/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>

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

... Код первого блока ...

</head>
<body expr:class='"loading" + data:blog.mobileClass'>

... Код второго блока ...

<div id='wrapper'>
...Код шаблон исходного шаблона ...
</div>

... код третьего блока ...

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

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

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

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

Cancel