简体   繁体   English

如何使响应式移动菜单保持活动状态?

[英]How to staying responsive mobile menu active?

I am trying to use this menu on my web, but here have a problem, that is how to keeping the menu active? 我正在尝试在网络上使用此菜单,但是这里有一个问题,那就是如何使菜单保持活动状态?

I hope when the user browse the Home page, the menu bar will like this: 我希望当用户浏览主页时,菜单栏会像这样: 在此处输入图片说明

I found some example, like add the class ".active", and put it in <li> , like: 我找到了一些示例,例如添加类“ .active”,并将其放在<li> ,例如:

<li class="active"><a href="#home">Home</a></li>

But, it not working. 但是,它不起作用。

HTML: HTML:

<div class="rmm" data-menu-style='graphite'>
    <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about-me'>About me</a></li>
        <li><a href='#gallery'>Gallery</a></li>
        <li><a href='#blog'>Blog</a></li>
        <li><a href='#links'>Links</a></li>
        <li><a href='#sitemap'>Sitemap</a></li>
    </ul>
</div>

Here is the demo: http://jsfiddle.net/7jgkzdf7/ 这是演示: http : //jsfiddle.net/7jgkzdf7/

Yesterday, I had been ask this question, however I make a lot of mistakes, I am sorry about that! 昨天,我一直在问这个问题,但是我犯了很多错误,对此我感到抱歉! Now, I post again. 现在,我再次发布。 Please help me to fix this problem! 请帮助我解决此问题!

Thanks!!! 谢谢!!!

Try something like this 试试这个

JS: JS:

$(".rmm ul li a").on('click', function () {
this.addClass('active');
});

CSS: CSS:

.rmm ul li a {
   url('http://responsivemobilemenu.com/demo/rmm-img/graphite-menu-bg-hover.png')
}

But this RMM (responsive mobile menu) is not good practice ... try to use Bootstrap. 但是,这种RMM(响应式移动菜单)不是一个好习惯……尝试使用Bootstrap。 They have easy documentation and very good mobile first elements. 他们具有简单的文档和非常好的移动优先元素。 Try it here Bootstrap 在这里尝试引导

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

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