Need help in the process of creating your own WordPress theme?
The Mega Menu extension gives the end-user the ability to construct advanced navigation menus.
Important
This extensions is not be visible by default in Unyson Extensions page. To make it appear in that list, you have to:
Add the extension name in theme manifest
$manifest['supported_extensions'] = array( 'megamenu' => array(), );
Or set the WP_DEBUG
constant to true
When it is turned on, it enriches menu with the following:
The extension adds the following css classes:
.menu-item-has-icon
.menu-item-has-mega-menu
.sub-menu-has-icons
.mega-menu
.mega-menu-row
.mega-menu-col
The markup will be the following:
li.menu-item-has-mega-menu
div.mega-menu
ul.mega-menu-row
li.mega-menu-col
li.mega-menu-col
li.mega-menu-col
ul.mega-menu-row
li.mega-menu-col
li.mega-menu-col
li.mega-menu-col
Note
All other standard WordPress classes and HTML remains the same.
<ul>
<li class="menu-item-has-mega-menu menu-item-has-icon">
<a class="fa fa-exclamation" href="#">Mega Menu 1</a>
<div class="mega-menu">
<ul class="sub-menu mega-menu-row">
<li class="mega-menu-col">
<a href="#">Just Links</a>
<ul class="sub-menu">
<li>
<a href="#">Menu Item 1</a>
</li>
...
</ul>
</li>
<li class="mega-menu-col">
<a href="#">Links with Icons</a>
<ul class="sub-menu sub-menu-has-icons">
<li class="menu-item-has-icon">
<a class="fa fa-inbox" href="#">Menu Item 1</a>
<p>Praesent quis enim euismod, fringilla quam vitae, consectetur quam.</p>
</li>
<li class="menu-item-has-icon">
<a class="fa fa-wrench" href="#">Menu Item 2</a>
</li>
...
</ul>
</li>
</ul>
</div>
</li>
<li class="menu-item-has-icon">
<a class="fa fa-info-circle" href="#">Home</a>
<ul class="sub-menu sub-menu-has-icons">
<li class="menu-item-has-icon">
<a class="fa fa-info-circle" href="#">Page 2</a>
</li>
<li class="menu-item-has-icon">
<a class="fa fa-info-circle" href="#">Page 3</a>
<ul class="sub-menu sub-menu-has-icons">
<li class="menu-item-has-icon">
<a class="fa fa-key" href="#">Page 4</a>
</li>
<li class="menu-item-has-icon">
<a class="fa fa-briefcase" href="#">Page 5</a>
</li>
<li class="menu-item-has-icon">
<a class="fa fa-gavel" href="#">Page 6</a>
<ul class="sub-menu sub-menu-has-icons">
<li class="menu-item-has-icon">
<a class="fa fa-globe" href="#">Page 7</a>
</li>
<li>
<a href="#">Page 8</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
By default the icon is added to
<a href="..." class="fa fa-...">Menu item</a>
If you want to change it to
<a href="..."><i class="fa fa-..."></i> Menu item</a>
overwrite this view in your theme
<?php if (!defined('FW')) die('Forbidden');
// file: {theme}/framework-customizations/extensions/megamenu/views/item-link.php
/**
* @var WP_Post $item
* @var string $title
* @var array $attributes
* @var object $args
* @var int $depth
*/
{
$icon_html = '';
if (
fw()->extensions->get('megamenu')->show_icon()
&&
($icon = fw_ext_mega_menu_get_meta($item, 'icon'))
) {
$icon_html = '<i class="'. $icon .'"></i> ';
}
}
// Make a menu WordPress way
echo $args->before;
echo fw_html_tag('a', $attributes, $args->link_before . $icon_html . $title . $args->link_after);
echo $args->after;