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 nav 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 wraper 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');Nested Menu Markup
tornado provide another menu component in shape of nested lists inside each other and you can create one simply by creating a container called .nested-menu and inside of put your list see the code below, and it can be colored with adding classes primary, dark, gray to .nested-menu container.
<div class="nested-menu">
<h2 class="title">Standard Menu Theme</h2>
<ul>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Web Front End Dropdown</a>
<ul>
<li><a href="#">Tutorials</a></li>
<li><a href="#">FE Tips & Tricks</a></li>
<li><a href="#">Front Sub Category</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">FE Tips & Tricks</a></li>
</ul>
</li>
<li><a href="#">PHP Programing</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery Tuturials</a></li>
<li><a href="#">UI/UX Inspiration</a></li>
</ul>
</div>Nested Menu Sass Mixin
you can customize the nested menu theme by targeting the menu .nested-menu { ..mixin.. } and use the SASS mixin inside of it @include nested-menu ( options ); see the example below.
.nested-menu {
@include nested-menu (
$height:35px, // Height
$font-size:15px, // Font-size
$font-weight:400, // Font Weight
$color:#1c1c1c, // Text Color
$hvr-color:#4166d6, // Hover Color
$hvr-bg:transparent, // Hover Background
$space-size:25px, // Gutter Size
// submenu
$sub-color:#1c1c1c, // Submenu Color
$sub-bg:rgba(0,0,0,0.05), // Submenu Background
$sub-font-size:14px, // Submenu Font-size
$sub-height:30px, // Submenu Height
$sub-hvr-bg:rgba(0,0,0,0.05), // Submenu Hover Background
$sub-hvr-color:$black-color // Submenu Hover Color
);
}Utlities Classes
| Class Name | Description |
|---|---|
| primary | goes to the menu wrapper div |
| dark | goes to the menu wrapper div |
| gray | goes to the menu wrapper div |
| collapsed | menu wraper to hide and menu button to show |