Tornado Logo

Dropdown Buttons - Tornado UI v2

Dropdown allows a user to select a value/item from a series of items/options can be used for a Dropdown Menu or Cart Menu etc.

Sass Customize

in order to edit the Dropdown Theme you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/components/_dropdowns.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Dropdown Button Structure

to create a Dropdown Button that opens a Standard Menu first you create an div with class name dropdown then add inside of it you create a button/link with class name dropdown-btn and Next to that button you will create the Hidden Dropdown List with ul or div and class name dropdown-list and then make your list items and links/options inside your dropdown-list element and if you need to change the event behavor to Hover to Show the dropdown list you can to it by adding data attribute data-event=”hover” to the dropdown container.

<!-- Dropdown Button -->
<div class="dropdown">
    <a href="#" class="dropdown-btn btn ti-arrow-down-chevron-light">Dropdown Example</a>
    <ul class="dropdown-list">
        <li><a href="#">User Profile</a></li>
        .....
    </ul>
</div>

<!-- Hover Dropdown Button -->
<div class="dropdown" data-event="hover">
    <a href="#" class="dropdown-btn btn ti-arrow-down-chevron-light">Dropdown Example</a>
    <ul class="dropdown-list">
        <li><a href="#">User Profile</a></li>
        .....
    </ul>
</div>

Dropdown Cart List

dropdown have muliple different themes the eCommerce Cart List is one of this theme and to create it you can add a class name cart-list to the dropdown-list wrapper watch the example below

<!-- Cart Button -->
<div class="dropdown">
    <a href="#" class="dropdown-btn btn light ti-arrow-down-chevron-light">Dropdown Cart List</a>
    <ul class="dropdown-list cart-list">
        <!-- small cart -->
        <li class="cart-item">
            <a href="#" class="image"><img src="http://via.placeholder.com/75x75" alt=""></a>
            <div class="info">
                <a href="#"><h3>Lorem Ipsum is simply dummy text of the printing</h3></a>
                <h4 class="count">count <input type="number" value="5"></h4>
                <h5 class="price">Price : 325$</h5>
            </div>
            <a href="#" class="ti-close remove-item"></a>
        </li>
        <!-- info item -->
        <li class="info-item">Sub Total : 352$</li>
        <!-- info item -->
        <li class="info-item">Total : 375$</li>
        <!-- buttons item -->
        <li class="btns-item">
            <a href="#" class="btn small primary">Checkout</a>
            <a href="#" class="btn small secondary">Cart Items</a>
        </li>
    </ul>
</div>

Dropdown Contact List

as mentioned above different themes this the Contact information List is one of this theme and to create it you can add a class name
contact-us to the dropdown-list wrapper watch the example below.

<!-- Contact Button -->
<div class="dropdown">
    <a href="#" class="dropdown-btn btn light ti-arrow-down-chevron-light">Dropdown Contact List</a>
    <ul class="dropdown-list contact-us">
        <li><h3>Contact US</h3></li>
        <li class="contact-item ti-mail">
            <span class="title">Email</span>
            <a href="mailto:emailname@sitename.com">emailname@sitename.co</a>
            <p>Responding in 24 Hours</p>
        </li>
        <li class="contact-item ti-whatsapp">
            <span class="title">Whatsapp</span>
            <a href="https://api.whatsapp.com/send?phone=0025-5567-3364-336">0025-5567-3364-336</a>
            <p>Available 24h a day</p>
        </li>
    </ul>
</div>

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