Menus - Features Page

Menu Default

1. General Menu Default

Default Menu ( .menu-default) is the general menu that can be added to the header or anywhere else in the site content. It can have one or multiple levels(.submenu). Each menu element has the class .item.


<div class="menu-default">
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        <li><a href="" class="item">Item 02</a></li>
        <li><a href="" class="item">Item 03</a></li>
        <li><a href="" class="item">...</a></li>
        <li class="has-submenu">
            <a href="" class="item">Item with submenu</a>
            <ul class="submenu">
                <li><a href="" class="item">Submenu 01</a></li>
                <li><a href="" class="item">Submenu 02</a></li>
                <li><a href="" class="item">...</a></li>
            </ul>
        </li>
    </ul>
</div>

Menu Items

Menu can have the following elements:

FP Select


<ul class="main-menu">
    <li><a href="" class="item">Simple Text</a></li>
    <li><a href="" class="item">
            <i class="icon icon-account-circle-1"></i>
            <span>Icon and text</span>
        </a>
    </li>
    <li><a href="" class="item"><img src="image_05.jpg" alt="">
            <span>Image</span>
         </a>
    </li>
    <li><input class="item" type="text" value="" placeholder="Input"></li>
    <li>
        <select  class="item dropdown">
            <option value="0">0</option>
            ...
        </select>
    </li>
    <li>
        <div class="fltp item">
            <input type="text" value="" required>
            <label class="placeholder" data-big-placeholder="FP Input" data-little-placeholder="This is an input example"></label>
        </div>
    </li>
    <li>
        <div class="fltpfltp item">
            <select name="dropdown" size="13" class="dropdown" required>
                <option value="0">0</option>
            ...
            </select>
            <label class="placeholder">FP Select</label>
        </div>
    </li>
</ul>

Dropdown

There are multiple settings applied to the menu that affect the position and width of the containing drop-downs.

.dropdown-open-right

By Default, menu drop-downs are left aligned to its parent. Using.dropdown-open-right, you can right align them.


<div class="menu-default dropdown-open-right">
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        <li><a href="" class="item">Item 02</a></li>
        <li><a href="" class="item">Item 03</a></li>
        <li><a href="" class="item">...</a></li>
        <li class="has-submenu">
            <a href="" class="item">Item with submenu</a>
            <ul class="submenu">
                <li><a href="" class="item">Submenu 01</a></li>
                <li><a href="" class="item">Submenu 02</a></li>
                <li><a href="" class="item">...</a></li>
            </ul>
        </li>
    </ul>
</div>

.icons-left or .icons-right

This two classes have the role to align the icons from the text, left or right, no matter the order in HTML.

This alignment is available for any .item element that is inside a .submenu element and no matther the level.


<div class="menu-default icons-left">
    <ul class="main-menu">
        <li>
            <a href="" class="item">
                <i class="icon icon-account-circle-1"></i>
                <span>Item 01</span>
            </a>
        </li>
        <li>
            <a href="" class="item">
                <span>Item 01</span>
                <i class="icon icon-account-circle-1"></i>
            </a>
        </li>
        <li class="has-submenu">
            <a href="" class="item">Here</a>
            <ul class="submenu">
                <li>
                    <a href="" class="item">
                        <span>Submenu 01</span>
                        <i class="icon icon-account-circle-1"></i>
                    </a>
                </li>
                <li>
                    <a href="" class="item">
                        <i class="icon icon-account-circle-1"></i>
                        <span>Submenu 02</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

.dropdown-fullwidth

This option transforms the dropdown width to 100% but its content will stay equal to the with of the .container element.

This feature is responsive. You can use the following classes depending on the resolution:

.dropdown-mobile-fullwidth for mobile
.dropdown-tablet-fullwidth for tablet
.dropdown-desktop-fullwidth for desktop
.dropdown-large-desktop-fullwidth for large-desktop
.dropdown-fullwidth for all resolutions


<div class="menu-default dropdown-fullwidth">
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        ...
        <li class="has-submenu">
            <a href="" class="item">Item with submenu</a>
            <ul class="submenu">
                <li><a href="" class="item">Submenu 01</a></li>
                <li><a href="" class="item">Submenu 02</a></li>
                <li><a href="" class="item">...</a></li>
            </ul>
        </li>
    </ul>
</div>

.dropdown-fluid-fullwidth

This option transforms the dropdown width and its content to 100%.

Transition Effect

Transition to use when animating menu in and out. Defaults to slide down or slide up depending on dropdown direction.

To change the transition effect, you need to change the transition value in .dropdown() function from function.js file.


$(".has-submenu").dropdown({
    on: "click",
    transition: "fade up",
    selector: {
        menu: ".submenu",
        item: ".item"
    },
    ...
});

Other transition values:

none
scale
fade, fade up, fade down, fade left, fade right
horizontal flip, vertical flip
drop
fly up, fly down, fly left, fly right
swing up, swing down, swing left, swing right
browse, browse right
slide up, slide down, slide left, slide right
tada
bounce

Styling

Menus inside one header will inherit its specific styling - click here for header section styling.

Specific dropdown variables are found in header-section-module.variables and for top header section are:

@topHeaderSectionDropdownBackgroundColor
@topHeaderSectionDropdownTextColor
@topHeaderSectionDropdownLinkColor
@topHeaderSectionDropdownAccentColor
@topHeaderSectionDropdownBorderColor
@topHeaderSectionDropdownShadow
@topHeaderSectionDropdownItemPadding

Megamenu

Lorem ipsum

2. Flex Menu

To avoid elements going outside the header container area, due to a high number of elements added to a header, we introduced the FlexMenu feature.
Adding class .flexMenu to .menu-default, will move the elements, that normally would go outside the screen area, into a submenu located at the end of the menu.


<div class="menu-default flexMenu dropdown-open-right">
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        ...
    </ul>
</div>

To replace the added Menu icon you can edit linkText and linkTextAll in function .flexMenu() from functions.js.


trimLongMenu: function () {

    $(".flexMenu > ul").flexMenu({
        popupAbsolute: false,
        showOnHover: false,
        linkText: "<a class="item hamburger hamburger-elastic"><span class="hamburger-box"><span class="hamburger-inner"></span></span></a>",
        linkTextAll: "<a class="item hamburger hamburger-elastic"><span class="hamburger-box"><span class="hamburger-inner"></span></span></a>"
    });
    
}

By default we are using hamburger icon module for flexMenu trigger.

Styling

Actually Flex Menu is a dropdown, so all the styles that are applied to this menu are in fact dropdown styles.
see dropdown styling

3. Burger Default

Defining burger menu notion, as any menu that has its content shown after a trigger/button action.

In .burger-default case, the menu content is inside a dropdown. .burger-default feature works together with .flexMenu.

Trigger

Its trigger is generated by the .flexMenu() function.
click here to read more.

Open Direction

Opening direction is the one from the dropdown. By default the dropdown opens to the left and to open it to the right you need to use .dropdown-open-right class.
click here to read more.

Transition Effect

Transition Effect is the one from the dropdown and it can be changed by reading this.


<div class="menu-default burger-default flexMenu">
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        ...
    </ul>
</div>

Responsive

This feature is responsive. You can use the following classes depending on the resolution:

.burger-mobile-default for mobile
.burger-tablet-default for tablet
.burger-desktop-default for desktop
.burger-large-desktop-default for large-desktop
.burger-default for all resolution

Styling

Actually .burger-default is a dropdown, so all the styles are dropdown styles.
see dropdown styling

4. Burger Sidemenu

Applying the class .burger-sidemenu to .menu-default, menu content will be positioned in one of the site sides. Content will become visible when actioning a trigger/button.

We will present how to build a burger sidemenu.

Trigger

Specific trigger that opens mymenu01 has the class .sidemenu-trigger and looks like this:


<a href="" class="sidemenu-trigger" data-trigger-for="mymenu01">
    <i class="icon icon-navigation-show-more-22"></i>
</a>

for :


<div class="burger-sidemenu" data-burger="mymenu01">
    ...
</div>

You can also use the hamburger icon module in a .sidemenu-trigger this way:


<a href="" class="sidemenu-trigger hamburger hamburger-spin item" data-trigger-for="menu01">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>

For more details on hamburger icon click here.

Open Direction

Opening Direction is required and needs to be specified on .burger-sidemenu element using the following classes:

.sidebar-open-left - for open left
.sidebar-open-right - for open right

Open Left

Open Right


<!-- Sidemenu Trigger with hamburger-->
<a href="" class="sidemenu-trigger hamburger hamburger-spin item" data-trigger-for="menu01">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>

<div class="burger-sidemenu sidemenu-open-right" data-burger="mymenu01">
    ...
</div>

Transition Effect

There are several effects that can be used when opening/closing a burger sidemenu.

Push - using .push-sq - the default effect
Uncover - using .uncover-sq
Slide along - using .slide-along-sq
Slide out - using .slide-out-sq

Push

Uncover

Slide Along

Slide Out


<div class="burger-sidemenu sidemenu-open-right uncover-sq" data-burger="mymenu01">
    ...
</div>

Close Trigger

To close the .burger-sidemenu you can use the trigger inside or outside the menu.

There are many cases when opening the menu will make the trigger access inaccessible. In this case we can add a trigger inside the .menu-default that can close it.


<!-- Outside Sidemenu Trigger  -->
<a href="" class="sidemenu-trigger hamburger hamburger-spin item" data-trigger-for="mymenu01">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>
<div class="menu-default" data-burger="mymenu01">

    <!-- Inside Sidemenu Trigger or Close Sidemenu Trigger -->
    <a href="" class="sidemenu-trigger hamburger hamburger-spin item" data-trigger-for="mymenu01">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
    </a>
    
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        ...
    </ul>
</div>

Responsive

This feature is responsive. You can use the following classes depending on the resolution:

.burger-mobile-sidemenu for mobile
.burger-tablet-sidemenu for tablet
.burger-desktop-sidemenu for desktop
.burger-large-desktop-sidemenu for large-desktop
.burger-sidemenu for all resolution

Styling

Menus inside the header will inherit the header specific styling - click here for header section styling.

Specific variables for .burger-sidemenu are found in header-section-module.variables and for top header are:

@topHeaderSectionSidemenuBackgroundColor
@topHeaderSectionSidemenuTextColor
@topHeaderSectionSidemenuLinkColor
@topHeaderSectionSidemenuAccentColor
@topHeaderSectionSidemenuItemPadding

5. Burger Modal

Applying .burger-modal class to .menu-default will make the menu content to appear inside a modal. Content will become visible when actioning a trigger.

Trigger

The specific trigger that opens mymodal01 will have the .modal-trigger class and it looks like:


<a href="" class="modal-trigger" data-trigger-for="mymodal01">
    <i class="icon icon-navigation-show-more-22"></i>
</a>

for :


<div class="burger-modal" data-burger="mymodal01">
    ...
</div>

You can also use the hamburger icon module in a .sidemenu-trigger this way:


<a href="" class="modal-trigger hamburger hamburger-spin item" data-trigger-for="mymodal01">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>

For more details on hamburger icon click here.

Open Direction

The only opening direction is from top to bottom.

Transition Effect

The only transition effect is slide down.

Close Trigger

To close the .burger-modal you can use the trigger inside as well as outside the menu.

Close trigger from inside the menu is exactly the same as the trigger detailed above.


<!-- Outside Modal Trigger  -->
<a href="" class="modal-trigger hamburger hamburger-spin item" data-trigger-for="mymodal01">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>
<div class="menu-default burger-modal" data-burger="mymodal01">

    <!-- Inside Modal Trigger or Close Modal Trigger -->
    <a href="" class="modal-trigger hamburger hamburger-spin item" data-trigger-for="mymodal01">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
    </a>
    
    <ul class="main-menu">
        <li><a href="" class="item">Item 01</a></li>
        ...
    </ul>
</div>

Responsive

This feature is responsive. You can use the following classes depending on the resolution:

.burger-mobile-modal for mobile
.burger-tablet-modal for tablet
.burger-desktop-modal for desktop
.burger-large-desktop-modal for large-desktop
.burger-modal for all resolution

Styling

Menus inside the header will inherit the header specific styling - click here for header section styling.

The variable for burger modal can be found in header-section-module.variables and for top header is:

@topHeaderSectionModalItemPadding


<header class="header-section ths"> ... </header>
<header class="header-section mhs"> ... </header>
<header class="header-section bhs"> ... </header>