Jump to content

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


Recommended Posts

Здравствуйте!
В главном меню сайта ряд ссылок скрыты за скриптом (т.е. 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 для адаптивного меню - не вариант (((

Link to post
Share on other sites

Не работает, потому что 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/';
    });
});

 

Link to post
Share on other sites
6 минут назад, xmka сказал:

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

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

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...