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

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

Проблема в том, что mmenu, похоже, не активирует автоматически активный li при загрузке страницы. После нажатия ссылки на новую страницу 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>

jquery css add-on mmenu currentitem
person eagle    schedule 19.08.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

Дерек

person Derek Buntin    schedule 02.01.2017

arrow_upward
1
arrow_downward

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

Вот скрипка.

person GreatBlakes    schedule 25.11.2015