Если в плагине активно верхнее меню «Recallbar», то в него можно разместить основное меню сайта. Добавление в это меню также, как и в обычное: админ-панель => внешний вид => меню => настройки меню, там ставится галочка рядом с «Recallbar» и нужное меню добавится. Меню Recallbar сворачивается в иконку, при наведении мышкой оно разворачивается, но возникла сложность с мобильными устройствами.
Не всегда удобно открытие меню при наведении, проще клик. Один раз кликнул- меню открылось, второй раз по иконке меню кликнул- меню закрылось. В связи с эти написал коротенький скрипт, который добавляется в файл functions.php активной темы или при использовании плагина My Custom Functions в него, чтобы не потерять изменения при обновлении темы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//Меню в мобильной версии Recallbar add_action('wp_footer', 'left_menu_rcl'); function left_menu_rcl(){ ?> <script type="text/javascript"> jQuery(function($){ $("#recallbar .rcb_left_menu").toggle( function () { $('#recallbar .rcb_menu').css({opacity:'1',visibility:'visible',top:'36px'}); }, function () { $('#recallbar .rcb_menu').css({opacity:'0',visibility:'hidden',top:'54px'}); }); }); </script> <?php } |
Теперь меню открывается, как при наведении указателя мыши, так и при клике.
Но после теста на разных устройствах, решил отказаться от варианта одновременного использования клика и Hover (наведение мыши на объект). Для мобильных версий оставил только клик, так как hover не всегда хорошо работает. Зависит от производителя, модели оборудования, встроенного ПО. Так же убрал полностью левое меню для оборудования с разрешением от 1300 пикселей, так как используется основное меню.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action('wp_footer', 'left_menu_rcl'); function left_menu_rcl(){ ?> <script> jQuery(function($){ $("#recallbar .rcb_left_menu").toggle( function () { $('#recallbar .rcb_menu').css({opacity:'1',visibility:'visible',top:'36px'}); }, function () { $('#recallbar .rcb_menu').css({opacity:'0',visibility:'hidden',top:'56px'}); }); }); </script> <?php } |
Вот такой код получился, по сути, тоже самое, только в одном месте отступ больше, чтобы сохранить все дефолтные настройки CSS, но в добавок к нему надо изменить шаблон Recallbar, чтобы всплывающее меню перестало быть дочерним элементом для блока <div class='rcb_left_menu'>
. Для этого нужно вынести <?php echo $rcb_menu; ?>
за пределы блока.
1 2 3 4 5 6 |
<?php if($rcb_menu): ?> <?php echo $rcb_menu; ?> <div class="rcb_left_menu"><!-- блок rcb_left_menu должен появляться только если есть пункты в меню --> <i class="fa fa-bars" aria-hidden="true"></i> </div> <?php endif; ?> |
При этом условие, что пустое меню не появляется будет выполняться.