Navbars and Menus
learn how to create and build a responsive menu and navbar/header with phenix css/js combined to make the creation of a responsive menu/navigation as easy as possible
Core Concept
the concept and mechanism behind the phenix menu javascript plugin are simple and have only the functionality that you need to build a multi-level dropdown menu that you can style as you wish or use the pre-designed phenix menu and customize it to fit your design concept, and here a few points to keep in mind while you working with the menu :
- the menu must have a
[data-id]value for proper responsiveshow/hidebehavior alongside the[menu-toggle]button. - the
mobilethe option allows you to create a newcloneof the menu to style it differently and freely outside the original menu and it goes directly before</body>. - the menu mechanism supports an infinite number of
nested menuslevel andmega-menu. - using the main style class
px-navigationis highly recommended for proper and easy styling. - the hover option adds support for showing the sub-menus on hover and it works only for desktop screens and phenix css
px-navigationis required for it.
Options Table
| Option | Description | Default | Data Type |
|---|---|---|---|
menu_id | the id of the menu wrapper for responsive toggle show/hide. | none | string |
mobile | the mobile responsive mode as a toggle dropdown or custom build menu. | dropdown | string |
hover | enable or disable show/hide on hover for the desktop. | false | boolean |
effect | show/hide effect [fade, slide, custom] | slide | string |
sub_active | the active class name for all sub-menu in the primary menu. | px-submenu-active | string |
arrow | dropdown arrow icon class names | none | string |
<!-- Main Menu --> <nav class="px-navigation hidden-md-down" data-id="main-menu" data-hover="true" data-mobile="custom" data-effect="fade"> <ul> <li>....</li> </ul> </nav> <!-- // Main Menu --> <!-- Toggle Button for Responsive --> <a href="#" class="btn primary menu-toggle hidden-lg-up" data-id="main-menu">Main Menu</a>
//====> Basic Init <====//
Phenix('.px-navigation').menu();
//====> Custom Options <====//
Phenix('.px-navigation').menu({
menu_id : 'main-menu', //===> Menu CSS ID
hover : true, //===> Dropdown on Hover [Desktop only]
mobile : 'dropdown', //===> Responsive Mode [dropdown, custom]
effect : 'slide', //===> Dropdown Effect [slide, fade, custom]
sub_active : 'px-submenu-active', //===> Submenus CSS Active Class [px-submenu-active]
arrow : "fas fa-angle-down", //===> Dropdown Arrow icon class names
});
Navigation Menu
in the next example you can see a navigation menu built with the phenix menu component and the utility css you can use it directly in your code and customize it with your style.
<!-- Main Menu --> <nav class="px-navigation hidden-md-down pdx-20 pdy-10 bg-white mb-20" data-arrow="far fa-angle-down" data-id="main-menu" data-hover="true" data-mobile="custom" data-effect="fade"> <ul class="flexbox reset-list fs-15"> <li><a href="#">Custom Responsive Menu</a></li> <li><a href="#">Phenix Themes</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">submenu item</a></li> <li><a href="#">Unlimited levels</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> <li><a href="#">nested menu</a></li> </ul> <!-- // Submenu [lvl-1] --> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">Developers Guide</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">the 1st Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 2nd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a> <!-- Submenu [lvl-3] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- Submenu [lvl-3] --> </li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> </ul> <!-- // Submenu [lvl-1] --> </li> </ul> </nav> <!-- // Main Menu --> <!-- Toggle Button for Responsive --> <a href="#" class="btn light menu-toggle hidden-lg-up" data-id="main-menu">Toggle Menu</a>
//====> Menu Activate <====//
Phenix('.px-navigation').menu();
/*==== Phenix Navigation ====*/
.px-navigation {
/*==== CSS Options ====*/
--font-size : 14px;
--space-in : 10px;
--height : 34px;
--color : var(--gray-color);
--color-hvr : var(--primary-color);
--background : transparent;
--background-hvr : var(--primary-offwhite);
--font-weight : var(--bold-weight);
}
/*==== Submenu Theme ====*/
.submenu {
/*==== CSS Options ====*/
--height : 26px;
--radius : 5px;
--background : white;
--space-in : 15px;
--color : var(--gray-color);
--color-hvr : var(--primary-color);
--box-shadow : 3px 3px 8px 0 rgba(0,0,0, 0.05);
}
Nested Vertical Menu
in the examples below we will use the same menu with a different style a vertical multi-level menu by using .px-vertical class name added to the .px-navigation wrapper and of course using the css utilities to modify and customize the general design.
<!-- Main Menu --> <nav class="px-navigation px-vertical bg-white mb-20 border-1 border-alpha-10" data-hover="1" data-arrow="far fa-angle-right" data-id="demo-menu-3"> <!-- Title --> <h4 class="fs-14 pdy-10 pdx-20 bg-alpha-05">Vertical Menu</h4> <!-- --> <ul class="reset-list fs-15 pdx-20"> <li><a href="#">Responsive Menu</a></li> <li><a href="#">Phenix Themes</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">submenu item</a></li> <li><a href="#">Unlimited levels</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> <li><a href="#">nested menu</a></li> </ul> <!-- // Submenu [lvl-1] --> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">Developers Guide</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">the 1st Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 2nd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a> <!-- Submenu [lvl-3] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- Submenu [lvl-3] --> </li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> </ul> <!-- // Submenu [lvl-1] --> </li> </ul> </nav> <!-- // Main Menu -->
<!-- Main Menu --> <nav class="px-navigation px-vertical bg-white mb-20 border-1 border-alpha-10" data-arrow="far fa-angle-down"> <!-- Title --> <h4 class="fs-14 pdy-10 pdx-20 bg-alpha-05">Vertical Nested Menu</h4> <!-- --> <ul class="reset-list fs-15 pdx-20"> <li><a href="#">Responsive Menu</a></li> <li><a href="#">Phenix Themes</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">submenu item</a></li> <li><a href="#">Unlimited levels</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> <li><a href="#">nested menu</a></li> </ul> <!-- // Submenu [lvl-1] --> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">Developers Guide</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">the 1st Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a> <!-- Submenu [lvl-2] --> <ul> <li><a href="#">the 2nd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a> <!-- Submenu [lvl-3] --> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> <!-- Submenu [lvl-3] --> </li> <li><a href="#">Learn About Us</a></li> </ul> <!-- // Submenu [lvl-2] --> </li> </ul> <!-- // Submenu [lvl-1] --> </li> </ul> </nav> <!-- // Main Menu -->
Responsive Menu
the menu custom responsive mode lets you create another menu in another place than the original and style it differently for mobile with your concept, you can create it manually from the code below or you can use the generated structure to play with it from your CSS using the menu ID.
Test Toggle Menu [custom]<!-- Custom Responsive Menu -->
<nav id="${menu_id}" class="px-custom-menu">
<!-- Menu Wrapper -->
<div class="menu-wrapper">${menu.clone}</div>
<!-- Close Trigger -->
<a href="#${menu_id}" class="menu-toggle"></a>
</nav>
<!-- // Custom Responsive Menu -->
Mega Menu
in the example below you can find the code to build a dropdown Mega-Menu.
<!-- Main Menu --> <nav class="px-navigation position-rv hidden-md-down pdx-20 bg-white mb-20" data-arrow="far fa-angle-down" data-id="demo-menu" data-hover="true"> <ul class="flexbox reset-list fs-15"> <li><a href="#">Mega Menu</a> <!-- Megamenu --> <div class="megamenu fluid pd-20"> <!-- Grid --> <div class="row gpx-15"> <!-- Column --> <div class="col-12 col-md-4 col-lg-3"> <!-- Title --> <h4 class="fs-14 divider-b">Quick Links</h4> <!-- Menu --> <ul class="reset-list"> <li><a href="#">Megamenu Link</a></li> <li><a href="#">Contact US</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">Phenix Themes</a></li> <li><a href="#">Phenix Design</a></li> </ul> <!-- Divider --> <span class="divider-t pdt-5 mt-10 display-block"></span> <!-- Contact --> <ul class="reset-list"> <li class="tx-icon far fa-phone">002-01122974539</li> <li class="tx-icon far fa-envelope">[email protected]</li> </ul> </div> <!-- Column --> <div class="col-12 col-md-4 col-lg-3"> <a href="#"><img src="http://via.placeholder.com/300x400" alt="" class="fluid"></a> </div> <!-- Column --> <div class="col-12 col-md-4 col-lg-3"> <!-- Title --> <h4 class="fs-14 divider-b">Another Links</h4> <!-- Menu --> <ul class="reset-list"> <li><a href="#">Megamenu Link</a></li> <li><a href="#">Contact US</a></li> <li><a href="#">Phenix Design</a></li> </ul> <!-- Divider --> <span class="divider-t mt-10 display-block"></span> <!-- Title --> <h4 class="fs-14 divider-b">Another Links</h4> <!-- Menu --> <ul class="reset-list"> <li><a href="#">Another Link</a></li> <li><a href="#">Phenix Themes</a></li> <li><a href="#">Phenix Design</a></li> </ul> </div> <!-- Column --> <div class="col-12 col-md-4 col-lg-3"> <a href="#"><img src="http://via.placeholder.com/300x190" alt="" class="fluid mb-20"></a> <a href="#"><img src="http://via.placeholder.com/300x190" alt="" class="fluid mb-10"></a> </div> <!-- // Column --> </div> <!-- // Grid --> </div> <!-- // Megamenu --> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">Multilevel Dropdown</a> <!-- Submenu [lvl-1] --> <ul> <li><a href="#">submenu item</a></li> <li><a href="#">checkboxes list</a> <ul> <li> <!-- Option Control [checkbox] --> <label class="option-control small" data-type="checkbox"> <input type="checkbox" name="check-1"> <span class="fas fa-check">Checkbox Example</span> </label> <!-- Option Control [checkbox] --> </li> <li> <!-- Option Control [checkbox] --> <label class="option-control small" data-type="checkbox"> <input type="checkbox" name="check-1"> <span class="fas fa-check">Checkbox Example</span> </label> <!-- Option Control [checkbox] --> </li> <li> <!-- Option Control [checkbox] --> <label class="option-control small" data-type="checkbox"> <input type="checkbox" name="check-1"> <span class="fas fa-check">Checkbox Example</span> </label> <!-- Option Control [checkbox] --> </li> </ul> </li> <li><a href="#">nested menu</a></li> <li><a href="#">Unlimited levels</a> <ul> <li><a href="#">the 2nd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a> <ul> <li><a href="#">the 3rd Level Menu</a></li> <li><a href="#">Demo Link</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Learn About Us</a></li> </ul> </li> <li><a href="#">Learn About Us</a></li> </ul> </li> </ul> <!-- // Submenu [lvl-1] --> </li> <li><a href="#">Developers Guide</a></li> </ul> </nav> <!-- // Main Menu -->
.px-navigation > ul > li {
padding-top: 6px;
padding-bottom: 6px;
}
Classes and Attributes
in the next table, you can find a list of classes and attributes that are related to the phenix js menu stylesheet.
| Cheat | Description | Default |
|---|---|---|
| phenix menu style component as menu wrapper. | none |
| for the vertical mode of the menu | none |
| for the megamenu wrapper. | none |
data-mobile | the mobile responsive mode as a toggled dropdown or a custom build menu. | |
| enable or disable show/hide on hover for the desktop. | |
| show/hide effect [fade, slide, custom]. | |
| the active class name for the first level of the menu. | |
| dropdown arrow icon class names | |