Need a active submenu after refresh (jquery accordion menu)

Question

I had created a menu with jquery, the issue is when i click on a submenu; site refreshes and then the menu doesn't remain active state, I want it to show active its menu and submenu when clicked.. also created a fiddle http://jsfiddle.net/akshaydesai/ptghs8xo/

<ul class="menu">

<li><div><a href="#">PRODUCTS</a></div>
    <ul>
        <li><a href="#">Scada Software</a></li>
        <li><a href="#">Energy Monitoring</a></li>
        <li><a href="#">Tension Monitoring</a></li>
        <li><a href="#">Protocol Gateways</a></li>
        <li><a href="#">Gas Monitoring</a></li>
                            <li><a href="#">Led Display</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">SOLUTIONS</a></div>
                        <ul>
                            <li><a href="#">Power & energy</a></li>
                            <li><a href="#">Process Automation</a></li>
                            <li><a href="#">Medical Diagnostics</a></li>
                            <li><a href="#">Machine Tools</a></li>
                            <li><a href="#">Remote Monitoring</a></li>
                            <li><a href="#">Industries</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">OUR EXPERTISE</a></div></li>
                <li><div><a href="#">ABOUT US</a></div></li>
                <li><div><a href="#">CONTACT US</a></div></li>

            </ul>

.menu ul{
    text-align:justify;
    width:300px;
    min-width:500px;
    margin-top:60px;
}
.menu ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
.menu ul li{
    display:inline-block;
    list-style:none;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.menu ul li a{
    text-decoration:none;
    color:#000;
}
.menu ul li:hover a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
    display:none;
}

.menu ul li:hover ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu ul li:hover ul li a{
    color:#000;
    border:none;
    margin-right:25px;
}
.menu ul li:hover ul li:hover a{
    color:#CCCC00;
}
.menu li.active a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu li.active ul li a{
    color:#000;
    margin-right:25px;
    border-bottom:none;
}
.menu li.active ul li:hover a{
    color:#CCCC00;
    margin-right:25px;
}
.hide{
    display:none;
}

$(document).ready(function(){

    $(".menu > li > div").click(function(){   
      if(false == $(this).next().is(':visible')) {
        $('.menu ul').slideUp(700);
      }
      $(this).next().slideToggle(700);
    });

    var url = window.location.href;
    var $current = $('.menu li ul a[href="' + url + '"]');
    $current.parents('.menu ul').slideToggle();
    $current.next('.menu ul').slideToggle();

});

after you set it, a simple `alert( url );` might resolve your problems. — Roko C. Buljan, Aug 15 '14 at 06:09

score 1 · Answer 1 · edited May 23 '17 at 11:53

EDIT There is nothing wrong with your code, assuming that you have set the correct hrefs, like:

<li><a href="http://localhost/software">Scada Software</a></li> // I'm using a localhost example here just to simplify.

This works. If not, check the url:

Add directly after var url = window.location.href;

this: console.log('url:' + url);

or this: alert('url:' + url);

and the current url will be outputted.

You can also use cookies (or another way to store a persistent variable) to recall the active state after refreshing the page. Here's an example of using cookies with jQuery: How to set/unset cookie with jQuery?

score 1 · Accepted Answer · answered Aug 15 '14 at 08:15

1

Use separate URLs in href, corresponding to each page. So, when the page is refreshed, URL will be changed and menu on the page will exactly know which page is currently opened and which menu must be visible.

answered Aug 15 '14 at 08:15

neli

149
5

Oh, now I can see, what's the problem. Your window.location.href contains full URL, and your link element contains only subpath. Use the whole URL in Energy Monitoring` – neli Aug 15 '14 at 09:18

Need a active submenu after refresh (jquery accordion menu)

2 Answers2