[英]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
类设置为selected
的classNames
配置初始化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
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.