Navigation Menu
Skeleton FX provides full functionality, animated, multilevel drop-down menu, which consists of three separate modules: Top Main menu, Context menu and Mobile Main menu. Menu item generation performed by PHP function included in the themes functions.php file. All three modules included in the theme template files. So navigation will fully operate with the default configuration.
All modules can provide two types of menu items: Full (all menu items are derived) and Top level (derived only the top-level menu items). Also you can specify drop-down sub menus animation effect. For Context menu you can indicate whether the active page menu element will open the top-level menu item.
PHP code structure is as follows:
<?php get_navigation_items(return_page_slug(), $target='main', $is_animated=false, $is_sub_open=true); ?>
Minimized code is as follows (will be formed full Top Main menu without drop-down animation):
<?php get_navigation_items(return_page_slug()); ?>
It looks like this:
With navigation menu you can use Skelton-FX predefined color modifiers classes: .primary, .seccess, .danger and .warning for items highlights (must be attached CSS module "Extend CSS"). Also for necessary menu items you can assign any FontAwesome icon (must be attached CSS module "FontAwesome"). To determine this features to the required page field "Meta Description" add next commands: menu_class=your-color-class (for item highlight) and(or) menu_icon=fa-your-icon (for icon use). If for page both features will be used they must be separated by semicolon (;). In example: menu_class=primary; menu_icon=fa-cog (in this case menu item has blue background and flywheel icon from left side).
Top Main menu
Displayed on devices with screen resolution ≥ 768px. This module added in the template header.inc.php file and performs top level Main menu. But you can place it anywhere. If you want to output Top-level Main menu items then to the variable $target assign value 'main-top-level'. Top-level Main menu ignores variables $is_animated and $is_sub_open values therefore there is no need to type them.
Top-level Main menu code can be as follows:
<?php get_navigation_items(return_page_slug(), 'main-top-level'); ?>
It looks like this:
Context menu
Displayed on all devices (if the code is included). This module added in the template template.php file in the sidebar area and performs Context menu for active page. You can place it anywhere inside Sidebar, block or HTML object. If you want to output Full Context menu items then to the variable $target assign value 'context-noparents'. If only active page parent menu element items then to the variable $target assign value 'context-noparents-current'. For enabling Drop-down animation effect to the variable $is_animated assign value true. If you do not want the active page parent sub menu would be opened then to the variable $is_sub_open assign value false.
Minimized code is as follows (will be formed full Context menu without drop-down animation):
<?php get_navigation_items(return_page_slug(), 'context-noparents'); ?>
Code with the use of animation parameter (will be formed full Context menu with drop-down animation effect and opened parent sub menu. See Example #1):
<?php get_navigation_items(return_page_slug(), 'context-noparents', true); ?>
Code for active page parent menu element items (will be formed parent menu items Context menu only. See Example #2):
<?php get_navigation_items(return_page_slug(), 'context-noparents-current'); ?>
Examples:
Mobile Main menu
Displayed on devices with screen resolution ≤ 768px. This module added in the template header.inc.php file and performs Main menu for Mobile devices. If you want to output Top-level Mobile menu items then to the variable $target assign value 'offcanvas-top-level'. Top-level Mobile menu ignores variables $is_animated and $is_sub_open values therefore there is no need to type them.
Minimized code is as follows (will be formed full Mobile Main menu without drop-down animation):
<?php get_navigation_items(return_page_slug(), 'offcanvas'); ?>
To see how it works reduce your browser screen resolution to 767px.
Context Sitemap
Displayed on all devices (if the code is included). This is an additional feature with which you can easily create Sitemap type menu. This function has no additional parameter. To create Sitemap menu structure just add to your template or page following code:
<?php get_navigation_items(return_page_slug(), 'context-sitemap'); ?>
Example: