http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная › Новости

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

Опубликовано: 01.09.2018

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

Бургер-меню на JQUERY

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



Посмотреть Demo

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

Установка.

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


jQuery #1: Адаптивное меню

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-й строке стилей указано изображение иконки ее можете заменить на свою или скачать ниже.
Карта
rss