Link to home
Create AccountLog in
Avatar of eugene007
eugene007

asked on

[Bootstrap] Navigation Bar Collapse

The code below is a responsive top navigation bar and upon clicking on the menu link it collapse. However there is a problem whereby when I click on "Maintenance" it collapses. By right it is suppose to collapse when I select options below the "Maintenance".

header.php

		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
		   <div class="container">
			 <div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 	
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand">logo</a>
			 </div>
			 <div class="navbar-collapse collapse">
			 <ul class="nav navbar-nav navbar-right">
			  <li><a href="#!/Employee">Employee</a></li>
			  <li><a href="#!/User">User</a></li>
			  <li class="dropdown">
				  <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>
				  <ul class="dropdown-menu">
					<li class="dropdown-header">Admin & Dashboard</li>
					<li><a href="#!/Employee">Employee</a></li>
					<li><a href="#!/User">User</a></li>
					<li class="divider"></li>
					<li class="dropdown-header">Portfolio</li>
					<li><a href="#!/Employee"></a></li>
					<li><a href="#!/Employee"></a></li>
				  </ul>
			   </li>
			   <li><a href="#!/Employee">Contact</a></li>
			 </ul>
			 </div>
			</div>
        </div>
		<br/><br/><br/><br/>

Open in new window


EmployeeController.js

    $('.nav a').on('click', function(){
		$(".navbar-collapse").collapse('hide');
    }); 

Open in new window


Apart from that, Are there ways to prevent this menu from overlapping on my contents.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

I have put your code into this online sample

http://www.marcorpsa.com/ee/t2320.html

Not seeing the problem - can you describe relative to the above sample?
Avatar of eugene007
eugene007

ASKER

In a responsive view (mobile) for the nav bar, when I click on "Maintenance" it doesn't show me the option below it. Rather the nav bar closes. However in full screen (laptop) it works.
menu_02.jpg
Could it be due to my libraries (position or missing library). I am using AngularJS single page app template and here is the main page code with all the libraries:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">  
    <head>
        <meta charset="UTF8">
        <title>MyStore</title>
		<link href="assets/css/main.css" rel="stylesheet" type="text/css">
		<link href="assets/css/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="assets/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Add the usual things here -->
    </head>
    <body>
	
		<?php include 'assets/templates/theme/header.php';?>
	
	    <div id="maincontent">
            <div id="view" ui-view></div>
        </div>
		
		<?php include 'assets/templates/theme/footer.php';?>

        <script src="assets/vendor/angular/angular.min.js"></script>
        <!--<script src="assets/vendor/angular-route/angular-route.min.js"></script> -->
		<script src="assets/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="assets/vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
		 <script src="assets/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
		<script src="assets/vendor/satellizer/dist/satellizer.js"></script>
		<script src="assets/vendor/ngSweetAlert/SweetAlert.min.js"></script>
		<script src="assets/vendor/sweetalert/dist/sweetalert.min.js"></script>
		<script src="assets/js/myApp.js"></script>
		
		<script src="assets/js/controllers/main/EmployeeController.js"></script>
		<script src="assets/js/controllers/main/AuthenticationController.js"></script>
		<script src="assets/js/controllers/main/UserController.js"></script>
		
		<script src="assets/js/controllers/modal/employee/AddEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/ViewEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/UpdateEmployeeController.js"></script>
		
		<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
        <script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
</html>  

Open in new window

Does it work correctly in my sample?
Your sample works. I'll do a code comparison and revert back.
Still can't. Perhaps i'll host the code and you could see the result. Otherwise i'll push the code to Github if I can't find a temporary hosting.
You should consider using Angular directives for Bootstrap - (https://angular-ui.github.io/bootstrap/) and look at the collapse directive.

You can use a stat var to trigger the collapse.

And these references discuss this in more detail
https://github.com/angular-ui/bootstrap/issues/394#issuecomment-69488620
http://stackoverflow.com/questions/14741988/twitter-bootstrap-navbar-with-angularjs-collapse-not-functioning
From the above link
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
    <div class="container">
        <button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed"> 
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
        </button> <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse" uib-collapse="isCollapsed">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a>
                </li>
                <li><a href="#">Lessons</a>
                </li>
                <li><a href="#">Grades</a>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
                </li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
</div>
<!-- /navbar-inner -->
</div>

Open in new window

var myApp = angular.module('myApp', ['ui.bootstrap']);

function NavBarCtrl($scope) {
    $scope.isCollapsed = true;
}

Open in new window

Here is a fiddle for the above (not mine) http://jsfiddle.net/KY5Mf/
I solved the problem.

I replaced the following line of code

<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>

Open in new window


to the following line of code

 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>

Open in new window


As for the Java script I replaced the following line of code

    $('.nav a').on('click', function(){
		$(".navbar-collapse").collapse('hide');
    }); 

Open in new window


to the following line of code

	$(".navbar-nav li a").click(function(e) {
		if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
			$(".navbar-collapse").collapse('hide');
		}
	});
	
	$('.navbar-collapse .dropdown-menu').click(function(){
		$(".navbar-collapse").collapse('hide');
	});

Open in new window


Therefore after clicking on the menu and submenu link the menu hides. Perhaps there is a better solution.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I implemented your suggestion

	 <header>  
	   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		   <div class="container-fluid">
			 <div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed"> 	
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand">logo</a>
			 </div>
			 <div class="navbar-collapse collapse" data-ng-class="{collapse: isCollapsed}">
				 <ul class="nav navbar-nav navbar-right">
					  <li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Employee</a></li>
					  <li ng-click="isCollapsed=!isCollapsed"><a href="#!/User">User</a></li>
					  <li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
						  <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Maintenance <span class="caret"></span></a>
						  <ul class="dropdown-menu" role="menu">
							<li class="dropdown-header">Admin & Dashboard</li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Employee</a></li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/User">User</a></li>
							<li class="divider"></li>
							<li class="dropdown-header">Portfolio</li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee"></a></li>
							<li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee"></a></li>
						  </ul>
					   </li>
					   <li ng-click="isCollapsed=!isCollapsed"><a href="#!/Employee">Contact</a></li>
				 </ul>
			 </div>
			</div>
        </nav>
	 </header>
	<br/><br/><br/><br/>

Open in new window

Did it work?
Yes it did :)
However I need to make it responsive.
Just put your code into this sample http://www.marcorpsa.com/ee/t2328.html

Seems responsive - what am I missing?
In mobile view it is responsive. However when I expand the menu in a mobile view then I cannot scroll the menu to see and make selection on available options. I was reading some comments given by google search that this could be due to the <body> being shorter than then the menu.
Try adding this style to your page

html, body {
   min-height: 100%;
}

Open in new window

If that does not work try with plain height
html, body {
   height: 100%;
}

Open in new window

I tried that but it doesn't work.
Do you have a link

Otherwise force body to a min-height of a value that you know is large enough to contain the menu.

Interested to know though - why is the content on the page not sufficient to push the body down enough for the menu?
To provide a link for access:

First option through teamviewer
Second option is to point a DNS to my localhost (laptop) [NOT SECURE]
Third option is to upload the codes to github
Can you not do a minimal mockup and put it in a Fiddle or Plunkr?
Ok. That's new and i'll try now.
The code doesn't run well on both Fiddle or Plunkr. I even copied, paste and tested the code from your source (http://www.marcorpsa.com/ee/t2328.html) and it doesn't work.
Ok, can't really help unless I can replicate.
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
As answered.
That makes sense. Difficult to call it without seeing it though, the sample I posted above had the fixed-top and still seemed to work