简体   繁体   English

mmenu帮助-如何将“ Selected”类添加到当前页面(可能使用“ currentItem”插件)

[英]mmenu help - how to add “Selected” class to current page (maybe using “currentItem” addon)

I'm using mmenu to create a menu. 我正在使用mmenu创建菜单。 While I'm open to advice on whether to use jquery or PHP (best practice advice), I need to be able to easily include my menu on each new page. 尽管我愿意接受有关使用jquery还是PHP的建议(最佳实践建议),但我需要能够轻松地在每个新页面上包含菜单。 I hope this makes updates easier. 我希望这可以使更新更容易。

The problem is that mmenu does not seem to automatically activate the active li on page load. 问题在于mmenu似乎并不会自动激活页面加载时的活动li。 Once a link to a new page is clicked, the li appears selected, but once the new page loads and the scripts start over and I arrive at the main menu. 单击指向新页面的链接后,li会显示为被选中,但是一旦加载了新页面并且脚本重新开始,我便到达主菜单。 The issue might be further complicated by the fact that I have submenus. 我有子菜单,这个问题可能会变得更加复杂。

I have tried using the 3rd party "currentitem" addon for mmenu with no success. 我尝试将第三方“ currentitem”插件用于mmenu,但未成功。

This is a simplified menu example. 这是一个简化的菜单示例。

<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>

You need to add the class 'mm-selected' to the parent li tag for the active href, this will make your menu open at the correct position. 您需要将类“ mm-selected”添加到活动href的父li标签中,这将使菜单在正确的位置打开。

<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>

I hope this helps. 我希望这有帮助。

Derek 德里克

If I'm understanding the question correctly, I'd just loop through the <a> tags until you find a match with window.location.href.indexOf(href) . 如果我正确理解了这个问题,我将遍历<a>标记,直到找到与window.location.href.indexOf(href)匹配的项。 If you have a really big menu, I'm sure someone else here may recommend a more optimized solution- maybe prepping the class using PHP would be better in that case. 如果您的菜单非常大,我相信这里的其他人可能会建议一个更优化的解决方案-在这种情况下,使用PHP准备类可能会更好。

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

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

Then after that, init Mmenu with the current-page class set to the classNames configuration for selected . 然后,将current-page类设置为selectedclassNames配置初始化Mmenu。

$("#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. 这是小提琴。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM