modest-bp

Проблема со скриптовым меню при адаптивной вёрстке

4 сообщения в этой теме

Здравствуйте!
В главном меню сайта ряд ссылок скрыты за скриптом (т.е. href #, но по событию onclick на пункте меню с определённым id вызывается window.location.href = с нужной ссылкой)

Проблема в следующем.
Вёрстка адаптивная, и для узких экранов - своё меню (с теми же самыми id у пунктов меню), которое на широком экране имеет display: none (соответствующие правила прописываются в классе "responsive", присвоенном div-у, в который вложено адаптивное меню). На узких экранах, соответственно, "полноформатное" меню скрывается за display: none.

То есть в коде страницы присутствует по два элемента с одним и тем же id. Меню для широких экранов находится ниже в тексте кода, но на один уровень вложенности выше, чем меню для узких экранов, поэтому на узких экранах скрипт не понимает, что от него требуется. Получается, что пользователь мобильника жмёт на пункт адаптивного меню, а события onclick не происходит (в то время как на "широком" меню всё ок).

В упрощённом виде HTML такой:

<div id="nav">
   <div class="responsive">
      <ul id="menu">
         <li id="item-01">...</li>
         <li id="item-02">...</li>
         <li id="item-03">...</li>
      </ul>
   </div>
   <ul id="menu">
      <li id="item-01">...</li>
      <li id="item-02">...</li>
      <li id="item-03">...</li>
   </ul>
</div>

Скрипт для перехода по ссылкам выглядит так:

jQuery(document).ready(function($) {
    $("#item-01").on("click", function(e){ 
       window.location.href = '/page-1/';
    });
    $("#item-02").on("click", function(e){ 
       window.location.href = '/page-2/';
    });
    $("#item-03").on("click", function(e){ 
       window.location.href = '/page-3/';
    });
});

Подскажите, пожалуйста, как заставить это всё добро работать и в адаптивной вёрстке (т.е. чтобы и меню из div.responsive работало)? В идеале сделать так, чтобы работало то меню, которое в данный момент отображается (т.е. НЕ display: none). Менять id для адаптивного меню - не вариант (((

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Не работает, потому что id не могут быть одинаковыми.

Почему не сделать на классах или для второго меню изменить id, а код немного поправить

<div id="nav">
   <div class="responsive">
      <ul id="menu">
         <li id="item-01">...</li>
         <li id="item-02">...</li>
         <li id="item-03">...</li>
      </ul>
   </div>
   <ul id="m-menu">
      <li id="m-item-01">...</li>
      <li id="m-item-02">...</li>
      <li id="m-item-03">...</li>
   </ul>
</div>
jQuery(document).ready(function($) {
    $("#item-01, #m-item-01").on("click", function(e){ 
       window.location.href = '/page-1/';
    });
    $("#item-02, #m-item-02").on("click", function(e){ 
       window.location.href = '/page-2/';
    });
    $("#item-03, #m-item-03").on("click", function(e){ 
       window.location.href = '/page-3/';
    });
});

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
6 минут назад, xmka сказал:

Почему не сделать на классах или для второго меню изменить id, а код немного поправить

Спасибо за ответ. Да, это понятно, что с разными id такой вопрос вообще бы не стоял. Но поменять id мне не по силам, поскольку такой код адаптивного HTML зашит в самом шаблоне сайта (который вообще не предполагает какие-либо ID для пунктов меню), а присвоение ID происходит плагином, который подставляет разные меню на разные страницы (menu swapper). Короче говоря, для плагина менюшек здесь действительно только одно меню. Но шаблон-то его воспринимает как два: обычное, и адаптивное.

С учётом того, что к сайту прикручена ещё целая тонна плагинов, влезать в это чревато крупными проблемами и необходимостью чистки натуральных Авгиевых конюшен. 

Вот я и ищу возможность подкорректировать сам скрипт в надежде, что в нём можно будет сослаться не только на id, но и на класс. Ну как в CSS прописываются правила вроде div.responsive>#item-01. Разница в этом конкретном случае в том, что здесь вложенность не непосредственная (как в представленной мной упрощённой структуре), а через древо из 3-4 блоковых элементов (((

Так что здесь надо каким-то образом указать в скрипте, что он "выполняется для элемента с id item-01, вложенного в структуру элемента со стилем responsive". Вот какое-то такое решение нужно... Ну или "выполняется для элемента, на которого не распространяется правило display: block"

Поскольку в скриптах я вообще дуб-дубом, то наверняка есть ещё какое-то кулибинское решение. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

И вообще, имеет ли смысл так танцевать с бубнами в целях организации внутренней перелинковки? Получается ли таким обрмзом перегонять вес в нужном направлении, или поисковики благополучно считывают такие "ссылки", и эффекта от этих фокусов - ноль? Может быть, мне просто сделать ссылки обычными ссылками, а не задействовать скрипт?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу