For the proper positioning, place the .px-nav
s before .px-navbar
and .px-content
elements.
Add .px-nav-left
or .px-nav-right
to the
.px-nav
element to place it left or right.
Use .px-nav-box
elements to add custom content.
If you want make the .px-nav
element collapsed by default,
just add the .px-nav-collapse
class to the .px-nav
.
.px-nav-collapse
class,
it will have effect only if the nav state is not stored before, because
the PxNav plugin restores the previous nav state by default. To prevent this
behaviour, you need to turn off the storeState
option.
Add the .px-nav-off-canvas
class to hide the .px-nav
when collapsed. If you want hide the nav only on large and extra large
screen sizes, use the .px-nav-off-canvas-desktops
class
instead of .px-nav-off-canvas
.
Add the .px-nav-static
class to the .px-nav
to make all .px-nav-dropdown
s permanently expanded.
To make the nav fixed, add the .px-nav-fixed
class.
<body class="px-navbar-fixed">
<nav class="px-nav px-nav-fixed">
...
</nav>
<nav class="navbar px-navbar">
...
</nav>
<div class="px-content">
...
</div>
</body>
PxNav plugin is initialized on pre-existing markup.
data-
, for example:
<nav class="px-nav px-nav-left" data-accordion="false" data-store-state="false">...</nav>
.
$('.px-nav').pxNav(options);
Option | Default | Description |
---|---|---|
accordion | true | Enable accordion behaviour. |
transitionDuration | 300 |
Transition duration (milliseconds) - used for the transition fallback.
Must be equal to SCSS's variable $px-nav-transition-duration .
|
dropdownCloseDelay | 400 | Delay in milliseconds before closing a dropdown menu (after mouseleave event triggered). |
enableTooltips | true | Enable tooltips. |
animate | true | Enable animations. |
storeState | true | Store/restore the nav state. |
storagePrefix | 'px-nav.' | Storage key prefix. |
modes |
{ phone: ['xs'], tablet: ['sm', 'md'], desktop: ['lg', 'xl'], } |
The nav mode breakpoints. See more info below. |
require(['jquery', 'px/plugins/px-nav'], function($) {
...
});
The PxNav plugin works in three modes:
The nav modes are activated according to the current viewport breakpoint.
Look at the modes
config option:
For example, to activate desktop mode (instead of tablet mode) on medium screen sizes:
Edit the _variables.scss
file and assign a lower breakpoint value
to the $px-nav-tablets-breakpoint
/$px-nav-desktops-breakpoint
variable (according to the mode which you want to change):
// Default:
// $px-nav-desktops-breakpoint: $screen-lg-min;
$px-nav-desktops-breakpoint: $screen-md-min;
Init the PxNav plugin with updated config:
// Default:
// tablet: [ 'sm', 'md' ]
// desktop: [ 'lg', 'xl' ]
$('.px-nav').pxNav({
modes: {
tablet: [ 'sm' ],
desktop: [ 'md', 'lg', 'xl' ],
},
});
You can call a public method of PxNav instance using the syntax:
$('.px-nav').pxNav('methodName');
[1] The parameter can be a string, jQuery object or DOM element. For example the next calls are equivalent:
$('.px-nav').pxNav('activateItem', '#some-nav-item');
$('.px-nav').pxNav('activateItem', $('#some-nav-item'));
$('.px-nav').pxNav('activateItem', document.getElementById('some-nav-item'));
[2] Root dropdown - a dropdown which is a direct child of the .px-nav-content
element:
<nav class="px-nav">
<ul class="px-nav-content">
<li class="px-nav-item px-nav-dropdown"> <!-- Root dropdown -->
<a href="#">...</a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item px-nav-dropdown">...</li>
<li class="px-nav-item px-nav-dropdown">...</li>
</ul>
</li>
<li class="px-nav-item px-nav-dropdown"> <!-- Root dropdown -->
<a href="#">...</a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item px-nav-dropdown">...</li>
<li class="px-nav-item px-nav-dropdown">...</li>
</ul>
</li>
</ul>
</nav>
Method name | Description | toggle | Toggle the nav state. |
---|---|
expand | Expand the nav. |
collapse | Collapse the nav. |
isFixed | Returns true if the nav is fixed, otherwise returns false . |
isStatic | Returns true if the nav has the .px-nav-static class, otherwise returns false . |
isCollapsed | Returns true if the nav is collapsed, otherwise returns false . |
activateItem(el[1]) |
Make the el must have the .px-nav-item class. Dropdowns cannot be activated.
|
openDropdown(el[1], showDropdown = true) |
Show/expand the
If the
If the el must have the .px-nav-dropdown class.
|
closeDropdown(el[1]) |
Hide/collapse the el must have the .px-nav-dropdown class.
|
toggleDropdown(el[1]) |
Open/hide the el must have the .px-nav-dropdown class.
|
closeAllDropdowns(parent[1] = $('.px-nav-content')) |
Close all opened dropdowns inside the parent must have the .px-nav-dropdown class.
|
freezeDropdown(el[1]) |
Freeze the el must have the .px-nav-dropdown class.
|
unfreezeDropdown(el[1]) |
Unfreeze the el must have the .px-nav-dropdown class.
|
isFloatingDropdown(el[1]) |
Returns el must have the .px-nav-dropdown class.
|
getDropdownContainer(el[1]) |
Returns the dropdown container. If the el must have the .px-nav-dropdown class.
|
isDropdownOpened(el[1]) |
Returns el must have the .px-nav-dropdown class.
|
isDropdownFrozen(el[1]) |
Returns el must have the .px-nav-dropdown class.
|
append(item, parent[1] = $('.px-nav-content')) |
Insert the item to the end of the parent element. See the insert method.
|
prepend(item, parent[1] = $('.px-nav-content')) |
Insert the item to the beginning of the parent element. See the insert method.
|
insert(item, position, parent[1] = $('.px-nav-content'))) |
Insert the
The
The
The Examples:
|
remove(item[1]) |
Remove the item must have the .px-nav-item class.
|
destroy | Destroy the PxNav instance. |
You can subscribe on PxNav events using the syntax:
$('.px-nav').on('event.px.nav', function(e) {
// ...
// Preventable events can be prevented:
// e.preventDefault();
});
Event | Description |
---|---|
expand* |
This event is fired immediately when the |
expanded |
This event is fired when the nav has expanded. |
collapse* |
This event is fired immediately when the |
collapsed |
This event is fired when the nav has collapsed. |
destroy* |
This event is fired immediately when the |
dropdown-open* |
This event is fired immediately when the |
dropdown-opened |
This event is fired when the dropdown has opened. |
dropdown-close* |
This event is fired immediately when the |
dropdown-closed |
This event is fired when the dropdown has closed. |
dropdown-frozen |
This event is fired when the dropdown has frozen. |
dropdown-unfrozen |
This event is fired when the dropdown has unfrozen. |
In addition, you can subscribe on initialized
event, which is fired when
a nav is initialized:
$('.px-nav').on('initialized', function() {
// ...
});
To use PxNav plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-nav.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-nav.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-nav']);
Alternatively, you can include PxNav plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-nav',
files: [
'path/to/js/pixeladmin/plugins/px-nav.js',
'path/to/js/pixeladmin/directives/angular-px-nav.js',
],
},
]);
px-nav
directive
Specify template-url
attribute on the element to
load nav content from a template.
NOTE: The template-url
attribute
expects an angular expression instead of a literal string.
<px-nav>...content...</px-nav>
<px-nav template-url="'path/to/nav/template.html'"></px-nav>
You can use px-nav
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 PxNav element:
<px-nav instance="ctrl.$nav">...</px-nav>
function SomeController() {
// Pointer
this.$nav = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$nav('expand');
this.$nav('isFixed');
this.$nav('append', $item);
});
PxNav's options can be specified as attributes. All options expect an angular expression instead of a literal string.
<px-nav accordion="false"
enable-tooltips="false"
storage-prefix="'main-nav.'">...</px-nav>
Event handlers can be bound using attributes:
<px-nav on-collapse="ctrl.collapse"
on-dropdown-open="ctrl.dropdownOpen">...</px-nav>
function SomeController() {
this.collapse = function(e) { ... }
this.dropdownOpen = function(e) { ... }
});