Geek Answers Handbook

How to minimize (close) the extended Bootstrap menu on devices such as iPhone, iPad, smartphones, tablets, etc., by Touching anywhere except the menu?

I am developing a website using the Bootstrap v2.0.1 framework .

When my site is viewed on devices such as iPhone, iPad, other tablets, smartphones, etc., the horizontal menu displayed in a browser on a PC or laptop collapses to an icon. This icon is located in the upper right corner of the device screen.

When the user touches this icon, the menu expands. If the user touches any of the menu items from this advanced menu, the menu becomes short-term (closed), and the corresponding page associated with this menu opens.

So far, everything is working fine for me. But I want to minimize (close) the extended (open) menu when the user touches somewhere on the surface of the screen that appears under the extended (open) menu.

I tried to achieve this, but could not succeed in my attempt, so I ask you for help.

For your reference, I put below the HTML and jQuery code that I tried:

HTML code 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:

$(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 (close) an extended (open) menu when the user touches anywhere in any part on any of them. Also, the initial functionality of minimizing (closing) the menu when choosing any of the menu items should remain as it is. This should not be affected.

How do I achieve this?

Thanks in advance.

+4
1

, - , div.container . :

 $("div.container").click(function(e) { // When any `div.container` is clicked
     if (!$(this).parents().hasClass("navbar")) { // to check if it 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
         }
     }
 });

+4

More articles:


All Articles