Tornado Logo

Responsive Menus - Tornado UI v2

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

Navigation Menu

The Navigation Menu Comes With Multiple Theme Mode’s The Default Mode , The Functionality Menu Can Be Used by Just Making a Div Wrapper With Class Named navigation-menu and Marking The Menu With Attribute Named data-id=”menu-name” For Responsive Function , Then Structure Your List By Using ul List Element With Nested ul for Drop-Down Menus After You Done With Menu Structure Add a Button or A Hyperlink Beside The Menu Wrapper or any Where else With Class Named menu-btn and Mark That Button With The Same Data Id Attribute in order to connect the button with the menu See The Code Example Below.

<!-- 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="#">Support</a></li>
        <li><a href="#">Github</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>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn ti-menu-round" data-id="main-menu"></a>

Navigation Menu Theme

The Other Mode For The Navigation Menu is A Styled Navigation With Multiple Coloring Theme and That Also Can Be Done Easily Be Moving The Default Menu Structure Inside A Wrapper Div With Class Name navigation-wraper and The Coloring Themes Applied By Adding One More Class of 3x Classes gray , primary , dark See The Examples Below With Their code.

<!-- Navigation wraper -->
<div class="navigation-wraper">
    <!-- Main Menu -->
    <div class="navigation-menu" data-id="main-menu">
        <ul>
            <li><a href="#">Menu Theme</a></li>
            <li><a href="#">About US</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Github</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>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Main Menu Mobile Button -->
    <a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
<!-- // Navigation wraper -->

Navigation Mixin Theme Customize

in order to Customize the Navigation Menu Themes it’s pretty much easy as piece of cake , You Can Overide The Default Style in tornado-folder/scss/elements/responsive-menus.scss or Creating in Extra Custom Style By Using The Sass Mixin Function First You Will Define Your Menu Selector Lets Say For in Example You Want To Style a Menu Inside a Header So You Will Select it Like That .header-class .navigation-menu { @include navigation-custom-theme ( options ); } as Showing in Code Below.

.navigation-menu {
    @include navigation-custom-theme (
        $height:58px,                      // Height
        $font-size:14px,                  // Font-size
        $font-weight:500,                // Font Weight
        $color:#2b2b2b,                 // Text Color
        $hvr-color:blue,               // Hover Color
        $hvr-bg:transparent,          // Hover Background
        $sub-color:#1c1c1c,          // Submenu Color
        $sub-bg:#FFF,               // Submenu Background
        $sub-font-size:14px,       // Submenu Font-size
        $sub-height:40px,         // Submenu Height
        $sub-hvr-bg:#2b2b2b,     // Submenu Hover Background
        $sub-hvr-color:#FFF     // Submenu Hover Color
    );
}

Collapsed Mobile Menu Theme

in order to use the collapsed mode just add class collapsed to The Navigation Menu Wrapper and if You Want To Add a Logo For it Just Give an Attribute Named data-logo to the Navigation Menu Wrapper Tag and inside of it create the logo url , and to Customize the Navigation Menu Mobile Theme it’s pretty much easy as piece of cake , You Can Overide The Default Style in tornado-folder/scss/elements/_mobile-menu.scss

<!-- Navigation wraper -->
<div class="navigation-wraper collapsed">
    <!-- Main Menu -->
    <div class="navigation-menu" data-id="menu-0" data-logo="img/logo.png">
        <ul>
            <li><a href="#">Menu Theme</a></li>
            <li><a href="#">About US</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Github</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>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Main Menu Mobile Button -->
    <a href="#" class="menu-btn icon-btn ti-menu-round" data-id="menu-0"></a>
</div>
<!-- // Navigation wraper -->

Mobile Menu Theme Mixin

tornado provide a nice control of mixin for the mobile menu theme witch you can use to extend or change the colors,sizes,backgrounds,direction easly with sass mixin you can use it by adding the function/mixin inside a selector targeting specfice menu or all like that .mobile-menu#menu-id { @include mobile-menu(options); }.

@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]
);

Navigation Menu Primary

<!-- Navigation wraper -->
<div class="navigation-wraper primary">
    <!-- Main Menu -->
    <div class="navigation-menu" data-id="main-menu">
        <ul>
            <li><a href="#">Menu Theme</a></li>
            <li><a href="#">About US</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Github</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>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Main Menu Mobile Button -->
    <a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
<!-- // Navigation wraper -->

Navigation Menu Gray

<!-- Navigation wraper -->
<div class="navigation-wraper gray">
    <!-- Main Menu -->
    <div class="navigation-menu" data-id="main-menu">
        <ul>
            <li><a href="#">Menu Theme</a></li>
            <li><a href="#">About US</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Github</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>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Main Menu Mobile Button -->
    <a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
<!-- // Navigation wraper -->

Navigation Menu dark

<!-- Navigation wraper -->
<div class="navigation-wraper dark">
    <!-- Main Menu -->
    <div class="navigation-menu" data-id="main-menu">
        <ul>
            <li><a href="#">Menu Theme</a></li>
            <li><a href="#">About US</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Github</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>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Main Menu Mobile Button -->
    <a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
<!-- // Navigation wraper -->

Multi Level Wideget Menus

The Multi Lvl Menus is Nested Menus Inside Each Other For Making A Side Bar Menu or Some Wideget Menus, and its works as a Structure like navigation menu you created a div wrapper and give it a class name nested-menu then adding a title element recommended to be from h2 to h4 with class name title and you can remove it if no need for it , after the title you add your list ul elements nested inside each other.

<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 Customize

in order to Customize the Nested Menu Themes it’s Just Like Navigation Menu , You Can Override The Default Style in tornado-folder/scss/elements/responsive-menus.scss or Creating Your Own Custom Style By Using The Sass Mixin Function .ul-parent { @include nested-menu ( options ); } as Showing in Code 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
    );
}

Themes 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
data-theme=overlaps attributefor Navigation Menu Wrapper Different Mobile Menu Effect

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.