vendredi 11 septembre 2015

I need drop down menu to close after # selection in mobile

In our mobile site we are using a hamburger drop-down menu to navigate to different sections on the mobile home page. Our problem is that the menu does not automatically close afterwards. The user has to click off afterwards to make the drop down hide.

HTML

<div id="menuSlideIn">
                <ul>
                    <li><a href="#item1">About</a></li>
                    <li><a href="#item2">Academics</a></li>
                    <li><a href="#item3">Cost</a></li>
                    <li><a href="#item4">Orientation</a></li>
                    <li><a href="#item5">Student Life</a></li>
                </ul>
            </div> 
<div id="about">
                    <a name="item1></a>
                    <div class="inner">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder11" runat="server"></asp:ContentPlaceHolder>
                        <div class="toTop black"><a href="#"></a></div>
                    </div>
                </div>

javascript

        $('#menuSlideIn').css("bottom", function () { return (-1 * $('#menuSlideIn').height()); });
        $("#menuSlideIn").toggle("slide");
        $('#menuHamburger').click(function () {
            $("#menuSlideIn").toggle("slide");
        });

css

#menuHamburger{
    float:left;
    padding: 8px 5px;
}
#searchImg {
    float:right;
    padding: 8px 5px;
}
.menuText{
    float:left;
    font-size:24px;
    color: #ffce00;
}
#menuSlideIn{
    height: auto;
    width: auto;
    background: #000;
    position:absolute;
    z-index: 100000;
}
#menuSlideIn li{
    padding: 5px 10px;
}
#menuSlideIn li a{
    color: #fff;
}



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire