Tornado Logo
Download

Responsive Menu's

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 Putin 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 Class's 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 -->

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 Giv an Attribute Named data-logo to the Navigation Menu Wrapper Tag and inside of it put 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="main-menu" 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="main-menu"></a>
</div>
<!-- // Navigation wraper -->

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

Navigation Customize

in order to Customize the Navigation Menu Themes it's pretty much easy as piece of cake , You Can Override 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 { @mixin navigation-custom-theme ( options ); } as Showing in Code Below. 


.navigation-menu {
    @mixin 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
    );
}

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 with name nested-menu then adding a title element recommended to be an 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.

Standard Menu Theme

Primary Menu Theme

Dark Menu Theme

Gray Menu Theme


<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 { @mixin nested-menu ( options ); } as Showing in Code Below. 


.nested-menu {
    @mixin 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 Class's

Class Name Description
primary goes to the menu wrapper div
dark goes to the menu wrapper div
gray goes to the menu wrapper div
Next Navbar/Headers Previous Typography