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

Сайтостроение 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
Комментариев: 23
  • Сергей

    Благодарю. Только я скрипты в footer для надежности прописал. А иконку изображения заменил на иконку из шрифтов font-awesome.

    • WordSmall

      Правильно. Это же не жесткие правила. Редактируйте, меняйте, делайте лучше.)

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