Это часть статьи как сделать мобильную версию сайта специально выведена в отдельный урок дабы избежать путаницы в создание меню. Действия описаны кратко и понятно затруднений по идее быть не должно и в итоге получим очень удобное мобильное меню.
Как видите, в демонстрации мобильное меню приятное в дизайне и удобное в использовании. А еще что важно его можно приделать к любому шаблону без особых усилий.
Установка.
Открываем файл 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-й строке стилей указано изображение иконки ее можете заменить на свою или скачать ниже.
Благодарю. Только я скрипты в footer для надежности прописал. А иконку изображения заменил на иконку из шрифтов font-awesome.
Правильно. Это же не жесткие правила. Редактируйте, меняйте, делайте лучше.)
Не работает выпадающее меню в теме colormag:
Решение этой проблемы отключить (удалить) плагин autoptimize (точное название не помню, уже удалил).
Именно он не давал нормально работать сайту.
Уже не помню, но вопрос вроде был решен)
JoJo, Спасибо вам, добрый человек! Все перерыла в поисках инфы по неработающему меню в мобилке, только ваш комментарий помог!
Почему у меня оно в index.php просто скрывается?
Может у кого такая же проблема была, подскажите?
В смысле скрывается? Это же мобильное меню, в указанный размер ширины оно будет отображаться.
WordSmall, Во время загрузки я меню замечаю, но оно изчезает. Так только на главной.
Возможно, на главной какой-то конфликт с другими библиотеками, которые не подключаются на других страницах. И лучше всего подключить скрипт более правильно.
К примеру, через существующий файл JS или создать новый, если такого не имеется. А затем через файл functions подключить к сайту. Примеры можно здесь посмотреть wordsmall.ru/sajtostroeni...ed-insights.html
И попробуйте даже без подключения jquery, которая указана в статье.
Как убрать element.style — это кажется стиль. В нём прописывается «display:none».
Он вешается на мобильное меню. Найти element.style не могу.
Хотя display:none; добавляется в element.style только в index.php
Спасибо полезная статья