Это часть статьи как сделать мобильную версию сайта специально выведена в отдельный урок дабы избежать путаницы в создание меню. Действия описаны кратко и понятно затруднений по идее быть не должно и в итоге получим очень удобное мобильное меню.
Как видите, в демонстрации мобильное меню приятное в дизайне и удобное в использовании. А еще что важно его можно приделать к любому шаблону без особых усилий.
Установка.
Открываем файл 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 (точное название не помню, уже удалил).
Именно он не давал нормально работать сайту.
Уже не помню, но вопрос вроде был решен)