On extra small and small screens, a .dropdown-toggle
element
with [href!='#']
will behave as a regular link.
To make the navbar fixed on top of the page, add the .px-navbar-fixed
class to the .px-navbar
's parent element.
<body class="px-navbar-fixed">
<nav class="navbar px-navbar">
...
</nav>
</body>
For the proper positioning, place the the .px-navbar
between
.px-nav
and .px-content
elements.
PxNavbar plugin is initialized on pre-existing markup.
$('#navbar').pxNavbar();
require(['jquery', 'px/plugins/px-navbar'], function($) {
...
});
In common cases, you don't need to initialize PxNavbar instance manually –
it will be initialized automatically on the .navbar-toggle
button click.
<nav class="navbar px-navbar">
<div class="navbar-header">
...
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#px-navbar-collapse" aria-expanded="false"><i class="navbar-toggle-icon"></i></button>
<div class="navbar-collapse collapse" id="px-navbar-collapse" aria-expanded="false">
...
</div>
</nav>
You can call a public method of PxNavbar instance using the syntax:
$('#navbar').pxNavbar('methodName');
Method name | Description |
---|---|
updateScrollbar | Update the navbar's scrollbar. |
destroy | Destroy the PxNavbar instance. |
To use PxNavbar plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-navbar.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-navbar.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-navbar']);
Alternatively, you can include PxNavbar plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-navbar',
files: [
'path/to/js/pixeladmin/plugins/px-navbar.js',
'path/to/js/pixeladmin/directives/angular-px-navbar.js',
],
},
]);
px-navbar
directive
Specify template-url
attribute on the element to
load navbar content from a template.
NOTE: The template-url
attribute
expects an angular expression instead of a literal string.
<px-navbar>...content...</px-navbar>
<px-navbar template-url="'path/to/navbar/template.html'"></px-navbar>
You can use px-navbar
directive where you want.
And when the scope is destroyed the directive will be destroyed.
You can define instance
attribute to get a pointer to PxNavbar element:
<px-navbar instance="ctrl.$navbar">...</px-navbar>
function SomeController() {
// Pointer
this.$navbar = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$navbar('updateScrollbar');
});