Dropdown

TorqueUI is a responsive web design centric UI Framework with components made for the modern web.
 
Download TorqueUI

Dropdown

Toggleable, contextual menu for displaying lists of links. The dropdown component made interactive with JavaScript.

Usage

Using the JavaScript dropdown plugin it is possible to click toggle the dropdown menus by switching the visibility class .open. To enable the toggle functionality TorqueUI uses the data-attribute data-toggle with the property data-toggle='dropdown'. The plugin is build around two data attributes:

  • data-toggle="dropdown" the initiator.
  • data-target the target of the toggle.

To use the Javascript plugin add the data-toggle="dropdown" to a link or a button.

<div class="dropdown">
    <button class="button" data-toggle="dropdown">Dropdown toggle</button>
    <div class="dropdown-menu">
        <div class="dropdown-container">        
            <ul> ... </ul>
        </div>
    </div>
</div>

It is also possible to place the trigger or toggle button outside the dropdow the dropdown by using the data-target data attribute. The property inside the target attribute is a CSS selector to the dropdown you want to toggle data-target="#mydropdown".

<button class="button" data-toggle="dropdown" data-target="#dropdown-example">Dropdown toggle</button>
<div id="dropdown-example" class="dropdown">
    <div class="dropdown-menu">
        <div class="dropdown-container">        
            <ul> ... </ul>
        </div>
    </div>
</div>

Usage examples.

It is easy to add Javascript functionality to a dropdown with the Javascript dropdown plugin included in the main Javascript file.

Dropdown in a navbar

<nav class="navbar-collapse in">
<ul class="nav nav-default">
  <li class="dropdown">
    <span data-toggle="navigation" class="marker"><i class="fa fa-fw fa-caret-down"></i></span>
    <a href="...">Home</a>
    <div class="dropdown-menu">
        <div class="dropdown-container">        
            <ul>
                <li><a href="...">Link 1</a></li>
                <li><a href="...">Link 2</a></li>
                <li><a href="...">Link 3</a></li>
                <li><a href="...">Link 4</a></li>
                <li><a href="...">Link 5</a></li>
            </ul>
        </div>
    </div>                    
   </li>
  <li class="active"><a href="...">Profile</a></li>
  <li><a href="...">Messages</a></li>
</ul>
</nav>

Dropdown on a button

<div class="dropdown">
    <button class="button" data-toggle="dropdown" style="float:left;">Dropdown</button>
    <div class="dropdown-menu">
        <div class="dropdown-container">        
            <ul>
                <li><a href="...">Link 1</a></li>
                <li><a href="...">Link 2</a></li>
                <li><a href="...">Link 3</a></li>
                <li><a href="...">Link 4</a></li>
                <li><a href="...">Link 5</a></li>
                <li><a href="...">Link 6</a></li>
                <li><a href="...">Link 7</a></li>
                <li><a href="...">Link 8</a></li>
                <li><a href="...">Link 9</a></li>
            </ul>
        </div>
    </div>
</div>

Dropdown on a button with target

<button class="button" data-toggle="dropdown" data-target="#dropdown-example">Dropdown</button>
<div id="dropdown-example" class="dropdown">
    <div class="dropdown-menu">
        <div class="dropdown-container">        
            <ul>
                <li><a href="...">Link 1</a></li>
                <li><a href="...">Link 2</a></li>
                <li><a href="...">Link 3</a></li>
                <li><a href="...">Link 4</a></li>
                <li><a href="...">Link 5</a></li>
                <li><a href="...">Link 6</a></li>
                <li><a href="...">Link 7</a></li>
                <li><a href="...">Link 8</a></li>
                <li><a href="...">Link 9</a></li>
            </ul>
        </div>
    </div>
</div>
  • © TorqueUI