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

Question

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

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

Я пробовал использовать сторонний «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

Если я правильно понять вопрос, я бы просто перебрать <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 
    } 
}); 

Here's a Fiddle.

Answer 2

Вам нужно добавить класс «мм выбранного» для родительского тега 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> 

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

Derek