CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kachan2011
kachan2011

Reputation: 11

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: enter image description here

I found some example, like add the class ".active", and put it in <li>, like:

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

But, it not working.

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/

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

Upvotes: 0

Views: 990

Answers (1)

Franky238
Franky238

Reputation: 519

Try something like this

JS:

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

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. They have easy documentation and very good mobile first elements. Try it here Bootstrap

Upvotes: 1

Related Questions