Меню Recallbar сворачивается в иконку, при наведении мышкой оно разворачивается, но возникла сложность с мобильными устройствами. Не всегда удобно открытие меню при наведении, проще клик. Один раз кликнул- меню открылось, второй раз по иконке меню кликнул- меню закрылось. В связи с эти написал коротенький скрипт, который добавляется в файл functions.php активной темы.
//Меню в мобильной версии 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
}
CosworthRS сказал(а)
Не всегда удобно открытие меню при наведении, проще клик.
Я тестировал на мобильном дефолтное меню реколлбара - кликнув по иконке меню раскрывается
Единственное отличие - тапнуть надо чтобы закрылось не по иконке - а по пустому пространству
p.s. type="text/javascript" - уже давно не требуется указывать.ю Браузеры поддерживают, валидаторы принимают короткий тег
Я тестировал на мобильном дефолтное меню реколлбара - кликнув по иконке меню раскрывается
С мобильниками порой возникают разные причуды, зависит от производителя, версии ПО и другого. У меня не на всех опробованных мобильниках корректно работает.
P.S. За инфу, спасибо.
P.P.S. Можно и слайдер сделать на чистом CSS, но опять же, не везде работает.
Но после теста на разных устройствах, решил отказаться от варианта одновременного использования клика и Hover (наведение мыши на объект). Для мобильных версий оставил только клик, так как hover не всегда хорошо работает. Зависит от производителя, модели оборудования, встроенного ПО. Так же убрал полностью левое меню для оборудования с разрешением от 1300 пикселей, так как используется основное меню.
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’>
