Collapsable drop down menu by default when switching page

Question

I am trying to fix a small issue where my dropdown menu is not collapsed by default when switching to another page, it acts as if it was opened and closes when I press the toggle button. Is there any simple way to fix this? I haven't found other questions to help my situation out.

HTML

<label id="menulabel"></label>

            <nav id="navbar">
                    <ul id="Mainnav">

                            <li class="hem">
                                <a href="index.html">
                                    <p>Hem<p>
                                </a>
                            </li>



                            <li id="portfolio">
                                <a href="#">
                                Portfolio ˅
                                </a>

                                <ul id="Subnav">

                                    <li>
                                    <a href="illustrator.html">
                                        Illustrator
                                    </a>
                                    </li>

                                    <li>
                                    <a href="photoshop.html">
                                        Photoshop
                                    </a>
                                    </li>

                                    <li>
                                    <a href="illustrator.html">
                                        InDesign
                                    </a>
                                    </li>

                                </ul>   

                            </li>

CSS

#menulabel {
    float:right;
    display: block;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: url(../img/icon/Menu.png) no-repeat center center;
}
    ul#Mainnav {
        margin-left:0;
        background:#000000;
        clear:left;
    }

    ul#Mainnav > li {
        float:none;
        width:auto;
        text-align: center;
        display:block;
        margin: 0;
        padding: 0;
    }

    a {
        color:white;
        font-weight:bold;
    }

    ul#Mainnav > li:hover {
        background: rgba(65, 177, 255, 1);

    }

    #Subnav  {
        display:none;
    }

    #Subnav.active  {
        display:block;
    }

JQUERY

$("#menulabel").click(function() {
    $("#navbar").toggleClass("active").stop(true, true).slideToggle(300);

});

score 0 · Answer 1 · answered Dec 18 '13 at 10:23

0

Try changing your CSS to this:

ul#Subnav {display:none !important;}

It looks like an earlier display:block is overriding that display:none you have there. Of course this might mean you also have to add !important to the .active rule. Alternatively, try getting rid of display:block on ul#Mainnav > li.

answered Dec 18 '13 at 10:23

sckd

405
3
11

When I use that !imporant code text, I get this in reply by the console ''event.returnValue is deprecated. Please use the standard event.preventDefault() instead. '' – Macksen Dec 18 '13 at 10:38
I can't see how that has anything to do with the CSS change. In any case, it's just a warning and appears to have been introduced recently (and also fixed for new jquery versions): http://stackoverflow.com/questions/20045162/event-returnvalue-is-deprecated-please-use-the-standard-event-preventdefault More importantly, did the fix work? :) – sckd Dec 19 '13 at 12:11

Collapsable drop down menu by default when switching page

1 Answers1