NAVIGATION MENUS

Tornado v2 Provides A Bunch Of Responsive Menu’s With Multiple Themes Horizontally and vertically With Easy To Customize With Sass.

NAVIGATION INITIALIZE

Tornado has Typescript Method to Activate responsive navigation menu functionality you can call out the method like this Tornado.menus.navigation(selector); and the selector must represent the navigation menu list wraper class name.

//=====> Import Menus Methods <=====//
import Menus from './Base/Menus';

//====> Typescript Usage <====//
Menus.navigation('.navigation-menu');

//====> Global Usage <====//
Tornado.menus.navigation('.navigation-menu');

NAVIGATION MARKUP

Tornado provide a predesigned navigation menu component to create responsive navigation menu in a simple way you can see the code below to build one and it contains container with class navigation-menu and data-id attribute for identify the menu and inside of it your menu list after thats comes the toggle menu button to show/hide in mobile devices witch most have class name .menu-btn with data-id attribute to identify the menu to open.

<!-- Main Menu -->
<div class="navigation-menu" data-id="main-menu">
    <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">About US</a></li>
        <li><a href="#">Download</a>
            <!-- Dropdown List -->
            <ul>
                <li><a href="#">Production Version</a></li>
                <li><a href="#">Development Version</a></li>
                <li><a href="quick-start.html">Quick Start CDN</a></li>
            </ul>
            <!-- // Dropdown List -->
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

<!-- Menu Toggle Mobile Button -->
<a href="#" class="menu-btn ti-menu-round" data-id="main-menu"></a>

COLORED NAVIGATION

tornado navigation menu can be colored with 3x colors default, primary, dark you can use them simply by adding the color class name to the navigation-menu wrapper element.

<!-- Primary Colored Main Menu -->
<div class="navigation-menu primary" data-id="menu-1">
    <ul>
        <li><a href="#">Menu Theme</a></li>
        ...
    </ul>
</div>

<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn icon-btn ti-menu-round" data-id="menu-1"></a>

NAVIGATION SASS MIXIN

you can customize the navigation menu by targeting the menu .navigation-menu { ..mixin.. } and use the SASS mixin inside of it @include custom-navigation ( options ); see the example below.

@include navigation-custom-theme (
    $height:3.375rem,             //==> Height
    $font-size:0.9375rem,         //==> Font-size
    $font-weight:$medium-weight,  //==> Font Weight
    $item-gutter : 0.9375rem,     //==> Space Between Items
    $color:$gray-color,           //==> Text Color
    $hvr-color:$primary-color,    //==> Hover Color
    $hvr-bg:transparent,          //==> Hover Background
    //===> Sub Menu <===//
    $sub-color:$black-color,       //==> Submenu Color
    $sub-bg:$reverse-color,        //==> Submenu Background
    $sub-font-size:0.875rem,       //==> Submenu Font-size
    $sub-height:2.5rem,            //==> Submenu Height
    $sub-hvr-bg:$primary-color,    //==> Submenu Hover Background
    $sub-hvr-color:$reverse-color  //==> Submenu Hover Color
);

MOBILE THEME SASS MIXIN

you can customize the mobile menu theme by targeting the menu id from the data-id attribute #menu_id { ..mixin.. } and use the SASS mixin inside of it @include mobile-menu ( options ); see the example below.

@include mobile-menu (
    $menu-width : 280px, //====> Menu Width
    $menu-background : $reverse-color, //====> Menu Background
    $item-padding : 1.25rem, //====> Menu Item Padding
    $item-height : 2.875rem, //====> Item Height
    $item-font-size : 1rem, //===> Item Font Size
    $item-active-bg : $primary-color, //====> Activated Item Background
    $item-active-color : $reverse-color, //===> Activated Item Color
    $sub-height : 2.875rem, //====> Sub Item Height
    $sub-font-size : 0.9rem, //====> Sub Item Font Size
    $sub-bg : #f1f1f1, //===> Sub Item Background
    $sub-color : $dark-color, //===> Sub Item Color
    $divider-color : rgba(0, 0, 0, .10), //====> Menu Item Border Color
    $icon-size : 1.25rem, //====> Menu Item Icons Font Size
    $menu-direction: $direction, //====> Menu Direction Position [left,right]
);

NESTED MENU INITIALIZE

Tornado has Typescript Method to Activate vertical nested menu functionality you can call out the method like this Tornado.menus.nestedList(selector); and the selector must represent the menu list wraper class name.

//=====> Import Menus Methods <=====//
import Menus from './Base/Menus';

//====> Typescript Usage <====//
Menus.nestedList('.nested-menu');

//====> Global Usage <====//
Tornado.menus.nestedList('.nested-menu');