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