Keep the hover state on the last clicked menu item

Question

I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.

Here's an example: http://jsfiddle.net/Stylock/ta8g4/

In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.

I assume it's because you're switching pages on your real website, right? And the new page initializes the menu slider again... — ahren, Mar 13 '13 at 10:08
As it works in the fiddle, please add the code from your website. — insertusernamehere, Mar 13 '13 at 10:08
If it doesn't work on your website, please provide a link to it — Maen, Mar 13 '13 at 10:08
Is it navigating to a new page when you click it in the site? If it reloads the page all the javascript will rerun from scratch and you'll lose the state — David Fregoli, Mar 13 '13 at 10:10
It does navigate me to a new page and I think that is the problem. How do I make it so it doesn't initialize the menu slider? — Stylock, Mar 13 '13 at 10:16
you should then add the class in the html generated with the serverside language — David Fregoli, Mar 13 '13 at 10:45

score 0 · Accepted Answer · answered Mar 13 '13 at 10:08

0

You could add a class to the item like .selected

And in your css you apply the same style to the .selected than the :hover

http://api.jquery.com/addClass/

Or you cloud also modify the css using jQuery. But the first solution is more flexible.

Edit: Use the callback function to add/remove class, after your effect

answered Mar 13 '13 at 10:08

Maresh

4,644
25
30

Here it doesn't work on the fiddle (Chrome under linux(ubuntu)) – Maresh Mar 13 '13 at 10:13
I might try this solution. I'm curious though why jsfiddle doesn't work on Linux? – Stylock Mar 13 '13 at 10:40

score 0 · Answer 2 · answered Mar 13 '13 at 10:13

0

This might be a solution to the right direction: Onclick check if the menu already has a classname to get the background changed remove that class from there Add the class where you clicked some minor css changes are needed and u will have solved it

have a great day

answered Mar 13 '13 at 10:13

Matthias Wegtun

1,231
1
9
13

I'm a total newbie. It would take me quite a while to figure out how to do that stuff. – Stylock Mar 13 '13 at 10:55
I think by taking time it's better so you would better understand I'll help you just follow the following links: http://api.jquery.com/addClass/ http://api.jquery.com/on/ http://api.jquery.com/removeClass/ $('.ClassYouClicked').on('click', function(){ // remove the class previously added // add the class on your current item you clicked (hint $(this) ) }) good luck! – Matthias Wegtun Mar 13 '13 at 13:28

score 0 · Answer 3 · answered Mar 13 '13 at 10:17

you can add a class when other page loads like to add on all pages like this is bad one

<script type="text/javascript">

    $(window).load(function () {
        $("#index").toggleClass("highlight");

    });


    $(window).unload(function () {
        $("#index").toggleClass("highlight");
    });

</script>

site i used this at http://www.hoteloperaindia.com/

or like this short one to add this to master page

 <script>
        $(function () {
            var loc = window.location.href; // returns the full URL
            if (location.pathname == "/")  {
                $('#home').addClass('active');
            }
            if (/index/.test(loc)) {
                $('#home').addClass('active');
            }
            if (/about/.test(loc)) {
                $('#about').addClass('active');
            }
            if (/accommodation/.test(loc)) {
                $('#accommodation').addClass('active');
            }
            if (/gallery/.test(loc)) {
                $('#gallery').addClass('active');
            }
            if (/tariff/.test(loc)) {
                $('#tariff').addClass('active');
            }
            if (/facilities/.test(loc)) {
                $('#facilities').addClass('active');
            }
            if (/contact/.test(loc)) {
                $('#contact').addClass('active');
            }
        });
</script>

site where i used this one http://rtshotel.in/

change it with your code

I will try the first solution. The second one isn't really an option because I use content management system. I would need modify that script every time someone creates a new page. — Stylock, Mar 13 '13 at 10:34
@Sahil Popli a little bit offtopic, do you have any idea how can I solve this similar issue? http://stackoverflow.com/questions/32687806/how-to-keep-the-menu-state-on-page-reload thanks — typo_, Sep 24 '15 at 19:51

Keep the hover state on the last clicked menu item

3 Answers3