1 Topic by PunBB

Topic: Как установить адаптивное меню на WordPress

Установка адаптивного меню на WordPress это актуальная тема поскольку мобильные устройства набирают все большую популярность. В этой теме я постараюсь описать как сделать простое меню для мобильных устройств на примере WordPress 4. Если не уверены в своих знаниях и способностях, спрашивайте прежде что либо устанавливать методом научного тыка.

Подключаем библиотеку jquery (если ее нет) в шапку сайта ;
Прописываем маленький код в файл functions.php, который добавит новое меню в Вашу тему;
Создайте новое меню в Вашей теме (перейдите в раздел — внешний вид — меню);
Пропишите непосредственно само меню в шапке сайта header.php;
Установите в подвал сайта footer.php функциональный скрипт;
Прописать стили для мобильного меню в style.css.

2 Reply by PunBB (edited by PunBB 2016.06.06 01:01)

Re: Как установить адаптивное меню на WordPress

1. Подключаем библиотеку jquery (если ее нет) в шапку сайта <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2. Прописываем маленький код в файл functions.php, который добавит новое меню в Вашу тему:

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

3. Теперь перейдите в раздел - внешний вид - меню - и создайте новое меню с именем - menu_mobile - в области Navigation Mobile.

4. Пропишите непосредственно само меню в шапке сайта header.php:

<div id="front_search"><span class="search-icon"></span>
<div class="search-box-wrapper ">
<form method="get" class="searchform-mob" action="<?php echo esc_url( home_url( '' ) ); ?>">
<input type="text" class="in-search" name="s" value="Поиск по блогу..." onfocus="this.value=(this.value=='Поиск по блогу...') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Поиск по блогу...' : this.value;" />
<input type="submit" value="">
</form></div></div>
<div class="menuwrapp_mobile">
  <a class="mobilemenu_toggle" href="#" ></a>
  <?php if ( has_nav_menu( 'primary mobile' ) ) { ?>
  <?php wp_nav_menu( array('container'=> '', 'theme_location' => 'primary mobile', 'items_wrap'  => '<ul class="menu_mobile">%3$s</ul>'  ) ); ?>
  <?php } else { ?>
  <?php wp_nav_menu(  array( 'menu_class'  => 'menu_mobile' ) ); ?>
  <?php } ?>
</div><div class="clearboth"></div>

5. Установите в подвал сайта footer.php функциональный скрипт:

<script type="text/javascript">
jQuery(document).ready(function()
{
  jQuery ('.mobilemenu_toggle').click (function (eventObject)
  {
    jQuery('#front_search').find('.search-box-wrapper').slideUp(200);
    jQuery(this).parents ('.menuwrapp_mobile').find ('.menu_mobile').stop().slideToggle(200);
    return false;
  });

  jQuery('.search-icon').click (function ()
  {
    jQuery('.menuwrapp_mobile').find('.menu_mobile').slideUp(200);
    jQuery(this).parents('#front_search').find('.search-box-wrapper').stop().slideToggle(200);
    return false;
  });
  
  jQuery ('.menu_mobile > .menu-item > a').click(function (eventObject)
 {
  var jSub = jQuery(this).parents('.menu-item').find('.sub-menu');
if(jSub.length)
{
  jSub.stop().slideToggle(200);
  return false;
}
 });
});
</script>

6. И пропишите стили, по умолчанию style.css:

/* css mobile */
.menuwrapp_mobile{display:none;}
#front_search{display:none;}
.search-icon{display:none;}

@media screen and (max-width:999px) {
.menuwrapp_mobile{background:#333;width:100%;height:auto;padding:5px 0;margin:0;display:block;}
.mobilemenu_toggle{height:36px;width:36px;display:block;margin-left:10px;background:url('images/mob-menu-light.png') no-repeat;}
.menu_mobile{background:#444;margin-top:5px;font-size:18px;overflow:hidden;padding:0;display:none;}
.menu_mobile li{border-top:1px solid #777;margin:0;}
.menu_mobile li:hover{background:#555;}
ul.menu_mobile {list-style-type:none;margin:0;padding:0;}
.menu_mobile a {width:100%;color:#eee;display:block;font:14px/40px Arial,sans-serif;padding:0 0 8px 15px;height:31px;}  
.menu_mobile a:hover {text-decoration:none;color:#ccc;}
.menu_mobile .sub-menu{background:#333;display:none;position: static;}
ul.menu_mobile .sub-menu {list-style-type:none;margin:0;padding:0;}
.menu_mobile .sub-menu a{padding-left:30px}

Класс рубрики

 {background-image: url('images/menu-arrow-down.png');background-repeat:no-repeat;background-position: 95% 8px;}

Класс рубрики:

hover{background-image: url('images/menu-arrow-down.png');background-repeat:no-repeat;background-position: 95% 8px;}

#front_search {display:block;float:right;position:relative;margin-top:5px;}
.search-icon {background:url("images/search.png" ) no-repeat;border:none;cursor:pointer;display:block;float:right;height:36px;margin-right:10px;width:36px;}
.searchform-mob{width:150px;background:#fff;border:1px solid #ddd;color:#777;font-size:13px;height:26px;margin:0 0 2px;padding:0 5px;}
.searchform-mob .in-search {width:130px;background:none;border:none;color:#999;float:left;font-family:Arial,Tahoma,sans-serif;font-size:13px;height:26px;margin:0;outline:none;padding:0;}
.search-box-wrapper {display:none;position:absolute;right:0;background:#333;top:100%;padding:10px;z-index:900;}
.searchform-mob > input[type="submit"] {background:url("images/search_submit.png") repeat;
border:none;cursor:pointer;display:block;float:right;height: 26px;width: 16px;}
}