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
EmployeeController.js
Apart from that, Are there ways to prevent this menu from overlapping on my contents.
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/>
EmployeeController.js
$('.nav a').on('click', function(){
$(".navbar-collapse").collapse('hide');
});
Apart from that, Are there ways to prevent this menu from overlapping on my contents.
CSSBootstrapAngular
Last Comment
Julian Hansen
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
menu_02.jpg
ASKER
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>
Does it work correctly in my sample?
ASKER
Your sample works. I'll do a code comparison and revert back.
ASKER
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
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>
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
ASKER
I solved the problem.
I replaced the following line of code
to the following line of code
As for the Java script I replaced the following line of code
to the following line of code
Therefore after clicking on the menu and submenu link the menu hides. Perhaps there is a better solution.
I replaced the following line of code
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>
to the following line of code
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Maintenance<b class="caret"></b></a>
As for the Java script I replaced the following line of code
$('.nav a').on('click', function(){
$(".navbar-collapse").collapse('hide');
});
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');
});
Therefore after clicking on the menu and submenu link the menu hides. Perhaps there is a better solution.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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/>
Did it work?
ASKER
Yes it did :)
ASKER
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?
Seems responsive - what am I missing?
ASKER
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%;
}
html, body {
height: 100%;
}
ASKER
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?
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?
ASKER
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
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?
ASKER
Ok. That's new and i'll try now.
ASKER
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
http://www.marcorpsa.com/ee/t2320.html
Not seeing the problem - can you describe relative to the above sample?