Мобильное меню

Сайтостроение WordSmall

Это часть статьи как сделать мобильную версию сайта специально выведена в отдельный урок дабы избежать путаницы в создание меню. Действия описаны кратко и понятно затруднений по идее быть не должно и в итоге получим очень удобное мобильное меню.

Посмотреть Demo

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

Установка.

Открываем файл functions.php и в конце перед знаком ?> вставляем код:

function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile'));
}
add_action( 'after_setup_theme', 'extra_setup' );

Этим кодом мы регистрируем новое меню в шаблоне. Дальше переходив в админ-панель сайта на вкладку Внешний вид-Меню и, создаем новое меню.

Мобильное меню

Галочки ставим так, как на скриншоте и жмем сохранить. Затем, слева выбираем Страницы-Все-Выделить все-Добавить в меню и еще раз нажмите сохранить.

Мобильное меню

Так, полдела сделали теперь открываем файл header.php ищем где выводиться главное меню выглядит примерно так:

<?php  wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'top-menu', 'depth' => '2' ) ); ?>

После него сразу вставляем мобильное меню.

<div class="menuwrapp_mobile">
        <a class="mobilemenu_toggle" href="#" ><?php _e( 'Menu'); ?></a>
        <?php if ( has_nav_menu( 'primary' ) ) { ?>
        <?php wp_nav_menu( array('container'=> '', 'theme_location' => 'primary', 'items_wrap'  => '<ul class="menu_mobile">%3$s</ul>'  ) ); ?>
        <?php } else { ?>
        <?php wp_nav_menu(  array( 'menu_class'  => 'menu_mobile' ) ); ?>        
        <?php } ?>
</div>

Не спешите закрывать файл нужно еще между тегами <head></head> добавить скрипт и если вы ранее не подключали библиотеку jQuery, то ее также следует подключить.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.mobilemenu_toggle').click(function(eventObject) {
                eventObject.preventDefault();
        }).toggle(function(){
                jQuery(this).parents('.menuwrapp_mobile').find('.menu_mobile').slideDown(200);
        }, function(){
                jQuery(this).parents('.menuwrapp_mobile').find('.menu_mobile').slideUp(200);
        });        
});
</script>

Этот скрипт нужен для правильной работы мобильного меню. Вот теперь сохраняем этот файл и открываем стили style.css и где-то в конце прописываем стили для мобильного меню.

@media screen and (min-width:481px) and (max-width:768px) {

/**  Menu Mobile  **/
.menuwrapp_mobile{
        margin:0;
        position:relative;
        display: block;
}
.mobilemenu_toggle {
    background: url("images/menuicon.png") no-repeat scroll 100% 50% #3f3f3f;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
        margin: 10px 0 0;
}

.mobilemenu_toggle:hover {
    color: #fff;
}

.menu_mobile{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D4D4D4;
    font-size: 18px;
    overflow: hidden;
    padding: 0;
        display:none;
}
.menu_mobile .sub-menu{
        background:none;
        display:block;
        position: static;
}
.menu_mobile li {
    border-top: 1px solid #e3e3e3;
}
.menu_mobile a {
    background: none repeat scroll 0 0 ##E5E5E5;
    color: #cc0000;
    display: block;
    font: 700 12px/40px Arial,sans-serif;
    padding: 0 0 0 20px;
    text-align: left;
}
.menu_mobile a:hover {
    opacity: 0.9;
        text-decoration:none;
        background:#CB0000;
        color: #fff;
}
.menu_mobile .sub-menu a{
        padding-left:30px
}
.menu_mobile  .sub-menu .sub-menu a{
        padding-left:30px
}

/** END  Menu Mobile  **/
}

Два момента, которые хотелось бы пояснить:

1. мобильное меню, как правило, заключается в медиа-запросах поэтому необходимо за пределами медиа-запросов его скрыть прописав display:none.

.menuwrapp_mobile {
display: none;
}

2. Второй момент, главное меню его также следует скрыть только это делается в медиа-запросах.

Пример:

@media screen and (min-width:481px) and (max-width:768px) {
.menu {
display: none;
}
}

Действия объясняются следующим образом:

если ширина экрана, больше пикселей чем указано в медиа-запросе (@media), то активное меню будет обычное;

если ширина меньше, то обычное меню прячется с помощью свойства display:none;, а активным становится мобильное меню.

В 9-й строке стилей указано изображение иконки ее можете заменить на свою или скачать ниже.

Мобильное меню

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 31
  • Алексей

    Спасибо!

  • Александр

    Работает! спасибо :)

    • WordSmall

      Не за что! Приходите еще)

  • Алексей

    Как изменить направление раскрытия меню? Оно открывается вниз, а надо вверх.

    • WordSmall

      Проще найти меню, которое сразу задумывалось раскрываться вверх.

      • Алексей

        Не хотелось подключать bootstrap, когда css написан, но видимо придется. Надо было сразу его использовать, а не умничать ;-)

        Спасибо за ответ.

      • WordSmall

        Необязательно bootstrap, если хорошенько поискать... вот пару примеров:

        codepen.io/modDesigns/pen/YyKwGj

        www.jqueryscript.net/menu...lideup-Menu.html

        codepen.io/doddsy105/pen/wJtLf

  • SimplyCu

    Всем привет! Может подскажет кто :). У меня на блоге имеется некая мобильная версия. (irinaroslova.ru) Делала не я.

    У этой версии имеется мобильное меню. После моих ковыряний блога мобильное меню не раскрывается и переходит на адрес блога+# Собственно вопрос — где должно быть... Что-то... Что отвечает за реакцию на клик по меню... Что я сломала? ))

    Да.Явно использовалось jquery... И... надеюсь, — я не сносила никаких плагинов.

    Ну или другой вопрос — как мне убрать из кода старое меню , дабы поставить новое понятное

    • WordSmall

      Здравствуйте! Печальная история, надеюсь она станет для вас небольшим уроком, на будущее)) Что касается исправления, думаю нет такой крайней необходимости сносить это меню, чтобы поставить новое.

      Проще исправить ваши внесенные изменения. Самый легкий вариант — обратиться к бэкапу файлов, если такой имеется. Если нет, то поищите в текущей теме файлы с разрешением js, в них вам нужно найти отвечающий класс меню .a-menu2. Ну, а дальше уже смотреть в чем именно проблема.

  • yorkie

    Добрый день!

    Не подскажете ли мне куда вставить мобильное меню в файле «Header» если нет вообще ничего про меню в нём? Тема «Vantage».

    Вот что непосредственно в файле Header:

    <?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package vantage * @since vantage 1.0 * @license GPL 2.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <link rel="icon" href="http://granit-garant.by/favicon.ong" type="image/x-icon" /> <link rel="shortcut icon" href="http://granit-garant.by/favicon.png" type="image/x-icon" /> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php do_action('vantage_before_page_wrapper') ?> <div id="page-wrapper"> <?php do_action( 'vantage_before_masthead' ); ?> <?php get_template_part( 'parts/masthead', apply_filters( 'vantage_masthead_type', siteorigin_setting( 'layout_masthead' ) ) ); ?> <?php do_action( 'vantage_after_masthead' ); ?> <?php vantage_render_slider() ?> <?php do_action( 'vantage_before_main_container' ); ?> <div id="main" class="site-main"> <div class="full-container"> <?php do_action( 'vantage_main_top' ); ?>

    • WordSmall

      Здравствуйте! Так в этой теме изначально меню адаптивное для мобильных устройств. Но, если хотите это поставить, то в вашей теме главное меню находится в файле parts/menu.php... попробуйте поместить в этот файл после всех функций.

  • Kate

    Доброго дня! У меня проблема в следующем — использую тему «BeHealthy», у нее уже есть адаптивная версия сайта для мобильного, но меня не устраивает адаптивное меню. Сделала все, как вы написали, но меню ничуть не изменилось — все такое же стандартное... Что мне надо изменить, что бы получилось такое же как у вас?

    • WordSmall

      Kate, Здравствуйте! Если вы все правильно сделали, то результат должен быть положительным. На крайний случай попробуйте почистить кэш или используйте клавиши Ctrl + F5. И скажите, перед установкой этого меню вы старое мобильное меню удалили, которое изначально в теме присутствует? Судя по коду темы, меню выводится через select, а именно: <select id="mobile-main-menu" class="mobile-menu">.

      Попробуйте его удалить, зачистить хвосты, убрать к нему стили и внедрить это меню.

  • worpressmen

    Как заменить в моб версии кнопку «Primary menu» на «Меню»

    • WordSmall

      В этом меню из статьи? Там такого вообще нет.

  • Sasha

    Здравствуйте, тема colormag, не работает кнопка меню. Что я только не делал. Тема респонсив. Не пойму в чем проблема. Помогите плиз

    • WordSmall

      Здравствуйте. Так это меню не с моего урока. Когда оно перестало работать? Ведь изначально оно работает.

      • Sasha

        WordSmall, Да, работало. Скажитепожалуйста. Если я сделаю как у вас написано. Мне дополнительно старое меню нужно сносить?

  • Sasha

    у меня не получилось(((

    • WordSmall

      Нужно, потому что их будет два. Но лучше исправить это. Вспомните, после чего оно перестало работать. Попробуйте по очереди по отключать плагины. И может вы подключали свою версию библиотеки jquery.

  • Sasha

    честно не помню, было давно. Вы не поможете? Киньте почту свою.

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