For the life of me I can't get the list items centered in the page. Can anyone lend a hand? I just want the six li elements centered until it kicks over to mobile. JS fiddle: https://jsfiddle.net/qkre9v17/ Here's the html:
<div class="header">
<img src="logo_ph.png" />
<div class="nav-collapse" id="nav">
<ul>
<li class="dropdown">
Management
<ul>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>OUR ENVIRONMENT STORY</li>
</ul>
</li>
<li class="dropdown">
Environment
<ul>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
</ul>
</li>
<li class="dropdown">
Social
<ul>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
</ul>
</li>
<li class="dropdown">
Economic
<ul>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
</ul>
</li>
<li class="dropdown">
Governance
<ul>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
<li>Sub link</li>
</ul>
</li>
<li class="dropdown">
Company Profile
</li>
</ul>
</div>
</div>
Related
I need to make a responsive navbar menu containing items and subitems. I've tried with bootstrap but it turns inconvenient adding submenus.
There is any tool, framework, code or plugin that can help me with this?
My website it's made with AngularJS.
Bootstrap Navbar with submenu
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('nav')) {
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
$('.nav li.open').not($(this).parents("li")).removeClass("open");
return false;
});
});
#media (min-width: 767px) {
.navbar-nav .dropdown-menu .caret {
transform: rotate(-90deg);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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" href="#">NavBar</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>GitHub</li>
<li>
Menu 1 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.1]</li>
<li>Another action [Menu 1.1]</li>
<li>Something else here [Menu 1.1]</li>
<li class="divider"></li>
<li>Separated link [Menu 1.1]</li>
<li class="divider"></li>
<li>One more separated link [Menu 1.1]</li>
<li>
Dropdown [Menu 1.1] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.2]</li>
<li>
Dropdown [Menu 1.2] <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Dropdown [Menu 1.3] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.4]</li>
<li>Another action [Menu 1.4]</li>
<li>Something else here [Menu 1.4]</li>
<li class="divider"></li>
<li>Separated link [Menu 1.4]</li>
<li class="divider"></li>
<li>One more separated link [Menu 1.4]</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.1]</li>
<li>Another action [Menu 2.1]</li>
<li>Something else here [Menu 2.1]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.1]</li>
<li class="divider"></li>
<li>One more separated link [Menu 2.1]</li>
<li>
Dropdown [Menu 2.1] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.2]</li>
<li>Another action [Menu 2.2]</li>
<li>Something else here [Menu 2.2]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.2]</li>
<li class="divider"></li>
<li>
Dropdown [Menu 2.2] <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Dropdown [Menu 2.3] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.4]</li>
<li>Another action [Menu 2.4]</li>
<li>Something else here [Menu 2.4]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.4]</li>
<li class="divider"></li>
<li>One more separated link [Menu 2.4]</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
You may try for this:
<nav class="navbar navbar-inverse">
<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>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</div>
it will looks as follows:
I want to create a menu like this but without using ng-repeat:
<ul class="sidebar-navi">
<li ng-repeat="item in items" ng-click="showChilds(item)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}
<ul>
<li ng-show="item.active">
<span>First</span>
</li>
<li ng-show="item.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
the problem is that I didn't find a way to pass parameter to this function showChilds (the current li) I tried to work with id but it didn't work:
<ul class="sidebar-navi">
<li id="first" ng-click="showChilds(first)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first.active">
<span>First</span>
</li>
<li ng-show="first.active">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="showChilds(second)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second.active">
<span>First</span>
</li>
<li ng-show="second.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
and my controller will contain only this function
$scope.showChilds = function (item) {
item.active = !item.active
}
I don't want to use $scope.items anymore
I have updated your HTML. If you are not using ng-repeat then you can use ng-init to initialize one variable and toggle that variable on ng-click to show/hide sub menus. Your updated sample is here
<ul class="sidebar-navi">
<li id="first" ng-click="first = !first" ng-init="first = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first">
<span>First</span>
</li>
<li ng-show="first">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="second = !second" ng-init="second = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second">
<span>First</span>
</li>
<li ng-show="second">
<span>Second</span>
</li>
</ul>
</li>
</ul>
Everytime I click on a tab I want it to become active. How should I achieve this?
<ul class="nav nav-pills pull-left" role="pilllist">
<li class="active" data-placement="right" title="Voucher Details"><a data-toggle="pill" role="pill" ng-href="#/">Pay Vouchers</a>
</li>
<li><a ng-href="#/paycode" data-toggle="pill" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
</li>
<li><a ng-href="#/deduction" data-toggle="pill" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
</li>
<li><a ng-href="#/tax" data-toggle="pill" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
</li>
<li><a ng-href="#/timeoff" data-toggle="pill" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
</li>
<li id="hid"><a ng-href="#/grosspay" data-toggle="pill" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
</li>
</ul>
One way to do it is to have a variable which stores the current tab in your scope . For example:
// In the controller
$scope.tab = 0;
// In the HTML
<ul class="nav nav-pills pull-left" role="pilllist">
<li ng-class="{active: tab===0}">
<a ng-click="tab=0" ng-href="#/" data-placement="right" title="Voucher Details">Pay Vouchers</a>
</li>
<li ng-class="{active: tab==1}">
<a ng-click="tab=1" ng-href="#/paycode" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
</li>
<li ng-class="{active: tab==2}">
<a ng-click="tab=2" ng-href="#/deduction" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
</li>
<li ng-class="{active: tab==3}">
<a ng-click="tab=3" ng-href="#/tax" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
</li>
<li ng-class="{active: tab==4}">
<a ng-click="tab=4" ng-href="#/timeoff" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
</li>
<li id="hid" ng-class="{active: tab==5}">
<a ng-click="tab=5" ng-href="#/grosspay" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
</li>
</ul>
Currently I have two tabs, that I can open by clicking either, but I'd like the first one to be opened by default..
<ul class="nav nav-tabs">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>
<div ng-show="activeTab=='implementation'" >
<h4>test heading</h4>
</div>
<div ng-show="activeTab=='videos'">
<h4>test heading</h4>
</div>
Any suggestions?
What about just initializing activeTab?
<ul class="nav nav-tabs" ng-init="activeTab = 'implementation'">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>
So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery
$('.nav li a').not('.dropdown-toggle').on('click', function(){
$('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example twitter-boostrap-navbar-with-angular-js-collapse-not-functioning but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)
Oh and if that help, my navbar Bootstrap 3 menu looks like this
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Portfolio<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add</li>
<li>Undo</li>
<li>List</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Probably a bit late, but here is a bootstrap 3.x version of the answer I gave in the question you referenced - http://jsfiddle.net/N99dQ/
This time, I have used ng-init instead of a controller, but both ways will work. Also worth mentioning, if you are not using the dropdowns, you'll only need to include ['ui.bootstrap.collapse']
HTML:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-init="isCollapsed = true" 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" href="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
var myApp = angular.module('myApp', ['ui.bootstrap']);
As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/
HTML
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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" href="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JS
var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);
function NavBarCtrl($scope, $location) {
$scope.isCollapsed = true;
$scope.menu1 = [
{text: 'first', link : '/first'},
{text: 'second', link : '/second'},
{text: 'third', link : '/third'},
{text: 'fourth', link : '/fourth'},
{text: 'fifth', link : '/fifth'}
];
$scope.go = function(path) {
$scope.isCollapsed = true;
$location.path('#/' + path);
}
}
Rather importing a heavy "ui.bootstrap" I feel that this will be simple JS fix:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.