I've been banging my head against this for a while, and for some reason I'm unable to get a simple bootstrap navbar dropdown to work with angular ui-router and ui-bootstrap (1.3.3, the latest). Here's my current code:
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Your <img class="logo-img" src="assets/images/formio-logo-lg.png"> application.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ng-class="{active:isActive('calendar')}" ui-sref="calendar" ng-show="authenticated">Duty Shifts</a></li>
<li><a ng-class="{active:isActive('eventIndex')}" ui-sref="eventIndex" ng-show="authenticated">Events</a></li>
<li><a ng-class="{active:isActive('trainingIndex')}" ui-sref="trainingIndex" ng-show="authenticated">Training</a></li>
<li><a ng-class="{active:isActive('shiftIndex')}" ui-sref="shiftIndex" ng-show="authenticated">Shifts List</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="authenticated"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="content">
<div class="row" ng-cloak>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.message}}</uib-alert>
</div>
<div ui-view></div>
</div>
</div>
With this setup, I see the Admin dropdown menu, but clicking does nothing, whether or not I have a ui-sref attribute.
If I do everything suggested in the migration guide for dropdowns, like so:
<li uib-dropdown>
<a ui-sref="home" uib-dropdown-toggle uib-dropdown role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
it still doesn't work. I'm sure I'm missing something obvious, but I'm not sure what. I've looked at the ui-navbar package, but I don't want to have to re-tool everything just for a dropdown if I don't have to.
What am I doing wrong? And yes, I do have ui.bootstrap and ui.router injected in my app definition.
Thanks.
Here is working plunker based on your code.
The admin dropdown inside the navbar looks like:
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
When you click on training, it loads training.html in the div ui-view as a single page application. Note that in the ui-sref I added a ng-click to collapsed the main navigation.
The full navbar looks like:
<nav class="navbar navbar-inverse " role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click='navCollapsed = true'>Home</a></li>
<li><a ui-sref="home" ng-click='navCollapsed = true'>Link</a></li>
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
I configure the routing like this:
angular.module('plunker', ['ui.router', 'ui.bootstrap'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home'
})
.state('training', {
url: '/training',
templateUrl: 'training.html',
});
})
Let us know if that helps. Best.
Related
I've been trying to replicate the icons part in the navigation bar on this website https://www.vannuysmaserati.com/
This is what I have so far. I'm not using icons yet. I would like the dropdowns to use one dropdown menu not have one for each.
https://codepen.io/dmads2355/pen/bQPgbJ
<br>
<br>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
P <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>phone</p>
</ul>
</li>
<li class="dropdown">
H <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>Hours</p>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Thanks
i am using following nav code in my nav view
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="index.php">
<img src="img/logo.png" class='img-responsve' alt='Transskilks'/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="socialnav">
<li>Home</li>
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Talent Acquisition</li>
<li>Consulting & Advisory</li>
<li>Global Payroll Outsource</li>
<li>Time and Attendance System</li>
</ul>
</li>
<li>Contact</li>
<li><i class="fab fa-facebook-f"></i></li>
<li class="active"><i class="fab fa-twitter"></i></li>
<li class="active"><i class="fab fa-instagram"></i></li> </i></a></li>
<li class="active"><i class="fab fa-google-plus-g"></i></li>
<li class="active"> <i class="fab fa-linkedin-in"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
CSS:
`<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'`>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
Everything works fine but in mobile view navbar does not open , Can someone help me whats wrong here, i don't find any issues in console for other js files as well.
Try Putting the button outside the navbar itself. Moreover, make sure that there's no mismatch between the data-target of the button and the id of the tag, as the collapsing only works with IDs, not classes.
I have the following code in my HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a ui-sref="home" class="navbar-brand">GARS</a>
</div>
<div class="navbar-collapse collapse" ng-class="{'in': !navCollapsed}" id="navBarCollapse">
<ul class="nav navbar-nav" ng-if="mainCtrl.isLoggedIn">
<li><a ui-sref="picks">Picks</a></li>
<li><a ui-sref="matchup">Matchup</a></li>
<li><a ui-sref="standing">Standings</a></li>
<li><a ui-sref="allpicks">All Picks</a></li>
<li><a ui-sref="leaderboard">Leaderboard</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-if="!mainCtrl.isLoggedIn">
<li><a ui-sref="login">Login</a></li>
<!-- <li><a ui-sref="register">Register</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right" ng-if="mainCtrl.isLoggedIn">
<li><a ui-sref="settings">Welcome {{mainCtrl.nickname}}!</a></li>
<li>Logout</li>
</ul>
</div>
</div>
Everything works except when mobile device or when the collapsed (hamburger) button it clicked and you click on a link the menu stays there and renders page under it. I have tried every jQuery thing I have found on SO and still have not had success. Any ideas?
firstly apologies opening a question on which should be seen as a fairly simple issue....and it should be, but I cant get it working to save my life.
Maybe someone can just give this code a quick scan and tell me what I am doing wrong, as I am not to familiar with bootstap (which im using here) and HTML5
My Problem
Navbar working perfectly on home page but when copy and pasting navbar to other pages the services and menu links simply do not expand / collapse
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Finger Food Catering</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hot Platters</li>
<li>Cold Platters</li>
<li>Gourmet Platters</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Wedding Catering</li>
<li>Birthday Catering</li>
<li>Corporate Catering</li>
<li>Event Catering</li>
<li>Funeral Cateringg</li>
</ul>
</li>
<li>About</li>
<li>Testimonials</li>
<li>Inquire</li>
<li>Blog</li>
<li class="active">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span style="font-size:2.0em"><span style="color:#8AB8E6">Contact Us:</span> <body onload="_googWcmGet('number', '1300 785 701')">
<span class="number">1300 785 701</span>
</body> </a></li>
</ul>
</div>
</div>
</nav>
Are you using Materialize?
If you are, scroll down to the bottom of index.php where the scripts are and change <script src="../../bin/materialize.js"></script> to <script src="js/materialize.js"></script>
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav 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="#ns-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>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.