/ Сайтостроение / Адаптивность / Меню для мобильной версии

Меню для мобильной версии

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается.

Трансформируем меню в иконку

Стандартный код вывода меню

<nav id="topmenu" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>

CSS

#menu-icon {
color: #fff;
padding: 0 10px;
line-height: 50px;
cursor: pointer;
display: none;
position: absolute;
top: 0px;
right: 0px;
}

#menu-icon:hover {
background-color: #032f5e;
}

@media (max-width:480px) {

#menu-icon {display:block;}
	  
.menu-head-menu-container /* контейнер меню, класс может отличатся */ {
  width: 80%; 
  background-color: #111; 
  float: right; 
  margin-right: 80px;
  display:none;
}

}

Script

jQuery(document).ready(function($){

// prepend menu icon
$('#topmenu').prepend('<div id="menu-icon">Меню</div>');

// toggle nav
$("#menu-icon").on("click", function(){
$("#menu-main-menu").slideToggle();
$(this).toggleClass("active");
});

});

Обоснованность данного способа

Данный способ подходит для простой верстки. В последнее время делаю немного по другому: отдельно вывожу иконку в том месте, где нужно, которая отображается только в мобильной версии. При этом меню наоборот скрывается (в моб.версии) и раскрывается относительно всей шапки (position: absolute;) по нажатию кнопки МЕНЮ.

Мобильный поиск

То же самое делаем с поиском. Добавляем невидимую в десктопной версии кнопку поиска, которая появляется в моб. версии (поиск при этом исчезает).
Скрипт:

// toggle search 
$("#search-button").on("click", function(){
$("#searchform").toggleClass('searchform-open');
$(this).toggleClass("active");
$('#s2').focus();
});

Стили кнопки и открытого поиска:

#search-button {
    background-color: #0990dd;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    font-size: 18px;
    display: none;
}

.searchform-open {display: block !important; top: 55px;}

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Отделяем планшет от телефона

Отделяем планшет от телефона

Как известно функция wordpress wp_is_mobile() определяет мобильные устройства без разбора: телефон или планшет данная функция не распознает. Более точную идентификацию устройства можно делать с помощью плагина WP Mobile Detect. С Читать далее »

Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Прилепленное меню

Прилепленное меню

Делаем шапку сайта (включающую логотип, меню и контакты) прилепленной к верхнему краю экрана, при перемотке сайта вниз. Оборачиваем необходимый для «прилеплевания» блок в div id=»stick_menu». В данном сайте верстка такая: Читать далее »

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

Пока нет комментариев. Будь первым!

Меню для мобильной версии
Загрузка JavaScript динамически
Рекомендации для васЗагрузка JavaScript динамическиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.