Это меню представлено с переработкой кода для загрузки файлов на 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=’"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://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=’"loading" + data:blog.mobileClass’>
<!— Адаптивноеменю запуск —>
… Код второго блока …
<!— Адаптивноеменю конец —>
<div id=’wrapper’>
…Код шаблон исходного шаблона …
</div>
<!— адаптивное меню скрипта Start —>
… код третьего блока …
<!— адаптивное меню скрипта End —>
в котором они были окрашены в синий цвет строки и код уже присутствует. Поскольку вставка сценариев выше строки </body> является обычной практикой, после установки этого меню, было бы целесообразно вставить эти новые коды выше строки </div>, выделенной коричневым цветом вместо</body> .
персонализации
Как сказано, для внешнего вида меню, вам нужно отредактировать файл css выделенный зеленым цветом. Другой javascript, выделенный таким же образом, должен быть загружен в учетную запись Google Drive пользователя, чтобы избежать проблем с пропускной способностью. В двух файлах есть комментарии на русском языке для облегчения персонализации. Это меню использует JQuery и JQuery UI .
В меню есть логотип, который можно настроить, заменив его изображением PNG размером около 100×100 пикселей . Любая ссылка может быть связана с этим логотипом, как и на главной странице. Ссылки на различные элементы должны быть вставлены вместо знаков решётка ( # ). Существует два класса меню: родительский, который будет размещать элементы слева, и родительское меню, который будет размещать их справа. Могут быть введены другие основные меню (левое или правое) и другие вторичные меню с единственным требованием для поддержания того же синтаксиса.
