1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Адаптация горизонтального меню (проблема с кликами)

Главные вкладки

Аватар пользователя Троша Троша 20 мая 2019 в 13:17

Здравствуйте.
Есть сайт troicaslonim.by с горизонтальным меню, которое посредством манипулятора (мышь) работает хорошо: при наведении на любую рубрику - раскрывается список дочерних пунктов (подрубрик), при левом клике - происходит преход в выбранную рубрику (подрубрику).
Но на смартфонах при навигации с сэнсорного экрана, чтобы открылись подрубрики нужной рубрики, нужно коснуться ее. При этом список подрубрик открывается, но сразу же происходит перенаправление пользователя в саму рубрику.
Как сделать, чтобы при навигации с сэнсорного экрана при первом касании по рубрике открывался список входящих в нее подрубрик, а только при втором касании происходил переход в выбранную (с уже открытым списком) саму рубрику либо ее подрубрику (взависимости от выбора пользователя)?
С искренней благодарностью ко всем, кто попробует помочь!

Комментарии

Аватар пользователя VasyOK VasyOK 20 мая 2019 в 16:33

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

Аватар пользователя Троша Троша 20 мая 2019 в 17:30

Superfish - блоки изначально отключены. Сама тема их не предполагает. Горизонтальное меню синхронизировано со словарями таксономии.
Может можно прописать для меню через css чтобы при первом клике по рубрике не происходил переход по ссылке, а открывался список дочерних терминов...

Аватар пользователя veligursky veligursky 20 мая 2019 в 22:46

Троша wrote:
Superfish - блоки изначально отключены. Сама тема их не предполагает. Горизонтальное меню синхронизировано со словарями таксономии.
Может можно прописать для меню через css чтобы при первом клике по рубрике не происходил переход по ссылке, а открывался список дочерних терминов...

клик для css - это чтото новое, может лучше js?

Аватар пользователя sas@drupal.org sas@drupal.org 21 мая 2019 в 9:39
1

Как сделать, чтобы при навигации с сэнсорного экрана при первом касании по рубрике открывался список входящих в нее подрубрик, а только при втором касании происходил переход в выбранную (с уже открытым списком) саму рубрику либо ее подрубрику (взависимости от выбора пользователя)?

через js например использовать touchstart
рабочий пример

...
                $('.menu:first .owl-item > li.expanded, .menu:first > li.expanded', thisEl).each(function () {
                    $(this).on('touchstart', '> a', function () {
                        if ($(this).hasClass('touchstart')) {
                            $(this).addClass('touchstart-2');
                        } else {
                            $('.menu:first .owl-item > li.expanded a, .menu:first > li.expanded a', thisEl).removeClass('touchstart');
                            $(this).addClass('touchstart');
                        }
                    });
                    $(this).on('click', '> a', function () {
                        if ($(this).hasClass('touchstart')) {
                            if (!$(this).hasClass('touchstart-2')) {
                                return false;
                            } else {
                                $(this).removeClass('touchstart').removeClass('touchstart-2');
                            }
                        }
                    });
                });
...
Аватар пользователя VasyOK VasyOK 21 мая 2019 в 9:43
2

Троша, ставите в Суперфишь - автоматом соаздается блок.
В настройках этого блока указываете ваше меню. И там мышкой понажмайте все опции.
В page.tpl.php убирайте вывод главного меню.
И на его месте возможно нужно сделать регион.
В этот регион помещаете блок от Суперфиш.
Остается поработать со стилями.

Аватар пользователя Троша Троша 24 мая 2019 в 18:09

Благодарю. Попробовали так:
в файле стлей:

@media screen and (max-width: 768px) and (min-width: 320px){
#main-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
z-index: 100;
}

#menu {
padding-top: 49px;
margin: 0 -10px;
}

#menu ul li {
float: none;
display: block;
}

.sf-menu li:hover ul, .sf-menu li.sfHover ul, #menu ul li:hover ul {
left: 0;
top: 54px;
z-index: 999;
position: static;
width: 100%;
padding-left: 15px;
}

#menu > .menu > li.expanded > a.active {
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}

.header_sandvich {
display: block !important;
}
}

.header_sandvich {
width: 16px;
height: 14px;
background: url(../images/sandvich.svg) no-repeat center center;
cursor: pointer;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
position: absolute;
top: 20px;
right: 20px;
display: none;
z-index: 101;
}
Затем в конце файла со скриптами добавили:

jQuery(function($){

$('.menu:first .owl-item > li.expanded, .menu:first > li.expanded').each(function () {
$(this).on('touchstart', '> a', function () {
if ($(this).hasClass('touchstart')) {
$(this).addClass('touchstart-2');
} else {
$('.menu:first .owl-item > li.expanded a, .menu:first > li.expanded a').removeClass('touchstart');
$(this).addClass('touchstart');
}
});
$(this).on('click', '> a', function () {
if ($(this).hasClass('touchstart')) {
if (!$(this).hasClass('touchstart-2')) {
return false;
} else {
$(this).removeClass('touchstart').removeClass('touchstart-2');
}
}
});
});

$('#header').append( "

" );

$('.header_sandvich').on('click', function(){
$('#main-menu').slideToggle();
});

});