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