I'm developing a website using Bootstrap framework v2.0.1.
When my website is browsed on devices like iPhone, iPad, other tablets, smartphones, etc. the horizontal menu that appears in browser on PC or laptop gets collapsed to an icon. This icon is placed at top right corner of the screen of device.
When user touches this icon the menu gets expanded. If user touches any of the menu items from this expanded menu the menu gets collapse(closed) and the respective page linked with that menu gets open.
Till now everything works fine for me. But I want to collapse(close) the expanded(opened) menu when user touches anywhere on the surface of the screen that appears below the expanded(opened) menu.
I tried to achieve this but couldn't succeed in my attempt so asking for your help.
For your reference I'm putting below the HTML and jQuery code that I tried:
The HTML code that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="example-fixed-layout.css" rel="stylesheet">
<link href="bootstrap-responsive.css" rel="stylesheet">
<link href="bootstrap-modal.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="band" href="index.php"><img src="logo.png"/></a>
<div class="nav-collapse"><!-- This is the menu that I want to toggle -->
<ul class="nav pull-right navbar-fixed-bottom" style="font-size:11px">
<li><a href="login.php"><i class="icon-user icon-black"></i>LOGIN</a></li>
<li><a href="register.php"><i class="icon-pencil icon-black"></i>REGISTER</a></li>
<li><a href="request.php"><i class="icon-edit icon-black"></i>MY REQUESTS</a></li>
<li><a href="status.php"><i class="icon-edit icon-black"></i>STATUS</a></li>
<li><a href="contact.php"><i class="icon-envelope icon-black"></i>CONTACT</a></li>
<li><a href="profile.php"><i class="icon-user icon-black"></i>MY ACCOUNT</a></li>
<li><a href="location.php"><i class="icon-map-marker icon-black"></i> LOCATE HERE</a></li>
<li><a href="login.php"><i class="icon-user icon-black"></i>LOG OUT</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="padding-top: 125px;">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<div class="container">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<div class="container" style="margin-bottom:70px;">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<footer style="background-color:#000" id="footer">
<div class="container">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
</footer>
<script src="jquery.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-alert.js"></script>
<script src="bootstrap-button.js"></script>
<script src="bootstrap-carousel.js"></script>
<script src="bootstrap-collapse.js"></script>
<script src="bootstrap-dropdown.js"></script>
<script src="bootstrap-modal.js"></script>
<script src="bootstrap-popover.js"></script>
<script src="bootstrap-scrollspy.js"></script>
<script src="bootstrap-tab.js"></script>
<script src="bootstrap-transition.js"></script>
<script src="bootstrap-typeahead.js"></script>
<script src="bootstrap-modalmanager.js"></script>
</body>
</html>
The jQuery code I tried but it didn't work out:
$(document).ready(function(){
$("div.container").click(function(e){ // When user touches anywhere on any of the div present with class "container" we detect what element we are clicking.
if ($(!e.target).hasClass(".nav-collapse")){ //if the element is not our menu, we use the inbuilt bootstrap method to collapse back(close) this expanded(opened) menu i.e. <div class="nav-collapse">-----</div>
$('.nav-collapse').collapse('hide');
};
});
});
In short I want to collapse back(close) the expanded(opened) menu when user touches anywhere at any part on any of the . Also the original functionality of collapsing(closing) the menu upon selection of any of the menu item should remain as it is. It shouldn't get affect in any way.
How should I achieve this?
Thanks in advance.
If I understand correctly, your requirement is to close the menu if it is open when clicked on any one of the div.containers outside the menu bar. You can do it as:
$("div.container").click(function(e) { // When any `div.container` is clicked
if (!$(this).parents().hasClass("navbar")) { // to check if it's not the menu links that are clicked
if ($('.nav-collapse').hasClass('in')) { //if the navbar is open (we only want to close it when it is open or else it causes a glitch when you first click outside)
$('.nav-collapse').collapse('hide'); //hide the navbar
}
}
});