помощ за mmenu - как да добавите избрания клас към текущата страница (може би с помощта на addon currentItem)

Използвам mmenu за създаване на меню. Въпреки че съм отворен за съвети дали да използвам jquery или PHP (съвет за най-добра практика), трябва да мога лесно да включвам менюто си на всяка нова страница. Надявам се, че това улеснява актуализациите.

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

Опитах се да използвам добавката „currentitem“ на трета страна за mmenu без успех.

Това е опростен пример за меню.

<nav id="menu">
<li>
   <ul>
      <li><a href="/bg/root/page1.html">page1</a></li>
      <li>
          <ul>
               <li><a href="/bg/root/page2.html">page2</a></li>
               <li><a href="/bg/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' към родителския ли етикет за активния href, това ще направи менюто ви отворено на правилната позиция.

<nav id="menu">
<li>
   <ul>
      <li class="mm-selected"><a href="/bg/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="/bg/root/page2.html">page2</a></li>
               <li><a href="/bg/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
    }
});

Ето един Fiddle.

person GreatBlakes    schedule 25.11.2015