Справка по mmenu - как добавить класс "Выбранные" на текущую страницу (возможно, с использованием дополнения "currentItem")

Question

Я использую Mmenu для создания меню. Хотя я открыт для советов о том, использовать ли jquery или PHP (рекомендации по передовому опыту), мне нужно иметь возможность легко включать мое меню на каждой новой странице. Я надеюсь, что это делает обновления проще.

Проблема в том, что mmenu, похоже, не автоматически активирует активную страницу при загрузке страницы. После того, как нажата ссылка на новую страницу, li появляется выбранным, но как только новая страница загружается, и сценарии запускаются снова, и я попадаю в главное меню. Проблема может быть еще более осложнена тем, что у меня есть подменю.

Я попытался использовать сторонний аддон "currentitem" для mmenu, но безуспешно.

Это упрощенный пример меню.

<nav id="menu">
<li>
   <ul>
      <li><a href="/root/page1.html">page1</a></li>
      <li>
          <ul>
               <li><a href="/root/page2.html">page2</a></li>
               <li><a href="/root/page3.html">page3</a></li>
          </ul>
      </li>
   </ul>
</ul>
</nav>

Answer 1

Вам нужно добавить класс 'mm-selected' в родительский тег li для активного href, это сделает ваше меню открытым в правильной позиции.

<nav id="menu">
<li>
   <ul>
      <li class="mm-selected"><a href="/root/page1.html">page1</a></li> <-- this will be highlighted and will open the sub menu below.
      <li>
          <ul> <-- this sub menu will show when the parent is selected
               <li><a href="/root/page2.html">page2</a></li>
               <li><a href="/root/page3.html">page3</a></li>
          </ul>
      </li>
   </ul>
</ul>
</nav>

Надеюсь, это поможет.

Дерек

Answer 2

Если я правильно понимаю вопрос, я бы просто перебрал <a> теги, пока не найдете совпадение с window.location.href.indexOf(href), Если у вас действительно большое меню, я уверен, что кто-то еще может порекомендовать более оптимизированное решение - возможно, в этом случае лучше подготовить класс с использованием PHP.

$('#menu a').each(function(){
    var href = $(this).attr('href');

    if ( window.location.href.indexOf(href) >= 0 ){
        $(this).parent('li').addClass('current-page');
    }
});

Затем, после этого, инициируйте Mmenu с current-page класс установлен на classNames конфигурация для selected,

$("#menu").mmenu({
    //Options        
    "offCanvas": {
        "zposition": "front" //Just an example option
    }
}, {
    //Configuration
    classNames: {
        selected: "current-page" //Change this class to match the default li you want
    }
});

Вот скрипка