Cirrus

#Trees

A tree is a CSS only list that lays out menu-items in a vertical menu with a toggle.

#Structure

A tree has children that are denoted with the tree-item class. The tree-item can then have menu list of menu-items in the tree-item-body with the title above it being a tree-item-header.

Structure
  • tree
    • input - this input must either be a checkbox or radio. The input must also use the u-none class. The id must be the same as the associated tree-item-header.
    • tree-item-header - the label that the user will click on to toggel the dropdown.
    • tree-item-body consists of the menu to be shown.

#Basics

The toggle is created by a simple input (checkbox or radiobutton depending on the behavior you want) with a check property.

Regular Tree (Checkboxes)

<div class="tree">
    <div class="tree-item">
        <input type="checkbox" id="tree1" class="u-none">
        <label class="tree-item-header" for="tree1">
            <span class="icon">
                                    <i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i>
                                </span> Trees
        </label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Oak</a></li>
                <li class="menu-item"><a href="!#">Birch</a></li>
                <li class="menu-item">
                    <div class="tree">
                        <input type="checkbox" id="tree2" class="u-none">
                        <label class="tree-item-header" for="tree2">
                            <span class="icon">
                                                    <i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i>
                                                </span> Evergreens
                        </label>
                        <div class="tree-item-body">
                            <ul class="menu">
                                <li class="menu-item"><a href="!#">Cedar</a></li>
                                <li class="menu-item"><a href="!#">Loblolly Pine</a></li>
                                <li class="menu-item"><a href="!#">Pitch Pine</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="tree">
    <div class="tree-item">
        <input type="checkbox" id="tree3" class="u-none">
        <label class="tree-item-header" for="tree3">
            <span class="icon">
                                    <i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i>
                                </span> Fruits
        </label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Mangosteen</a></li>
                <li class="menu-item"><a href="!#">Durian</a></li>
                <li class="menu-item"><a href="!#">Jabuticaba</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="tree">
    <div class="tree-item">
        <input type="checkbox" id="tree4" class="u-none">
        <label class="tree-item-header" for="tree4">
            <span class="icon">
                                    <i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i>
                                </span> Flowers
        </label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Jade Vine</a></li>
                <li class="menu-item"><a href="!#">Ghost Orchid</a></li>
                <li class="menu-item"><a href="!#">Corpse Flower</a></li>
            </ul>
        </div>
    </div>
</div>

Exclusive Tree (Radio)

<div class="tree">
    <div class="tree-item">
        <input type="radio" id="tree5" class="u-none" name="radioTree">
        <label class="tree-item-header" for="tree5"><span class="icon"><i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i></span>Trees</label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Oak</a></li>
                <li class="menu-item"><a href="!#">Birch</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="tree">
    <div class="tree-item">
        <input type="radio" id="tree6" class="u-none" name="radioTree">
        <label class="tree-item-header" for="tree6"><span class="icon"><i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i></span>Fruits</label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Mangosteen</a></li>
                <li class="menu-item"><a href="!#">Durian</a></li>
                <li class="menu-item"><a href="!#">Jabuticaba</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="tree">
    <div class="tree-item">
        <input type="radio" id="tree7" class="u-none" name="radioTree">
        <label class="tree-item-header" for="tree7"><span class="icon"><i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i></span>Flowers</label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Jade Vine</a></li>
                <li class="menu-item"><a href="!#">Ghost Orchid</a></li>
                <li class="menu-item"><a href="!#">Corpse Flower</a></li>
            </ul>
        </div>
    </div>
</div>

Mixed Tree

<div class="tree">
    <div class="tree-item">
        <input type="radio" id="mixTree1" class="u-none">
        <label class="tree-item-header" for="mixTree1"><span class="icon"><i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i></span>(Radio Button)</label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item"><a href="!#">Menu Item 1</a></li>
                <li class="menu-item">
                    <div class="tree">
                        <div class="tree-item">
                            <input type="checkbox" id="mixTree2" class="u-none">
                            <label class="tree-item-header" for="mixTree2"><span class="icon"><i class="fa fa-wrapper fa-chevron-right small" aria-hidden="true"></i></span>(Checkbox)</label>
                            <div class="tree-item-body">
                                <ul class="menu">
                                    <li class="menu-item"><a href="!#">Menu Item 1.1</a></li>
                                    <li class="menu-item"><a href="!#">Menu Item 1.2</a></li>
                                    <li class="menu-item"><a href="!#">Menu Item 1.3</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="menu-item"><a href="!#">Menu Item 3</a></li>
            </ul>
        </div>
    </div>
</div>

#Tree Nav Layout

A great way to use the tree class is by embedding it inside a tree-nav as a fixed menu on the side of the page.

Structure
  • tree-nav-body
    • tree-nav-header - holds a link used to trigger the sidebar to appear. Visible on tablet or smaller screen dimensions.
    • tree-nav - sidebar that appears on the left.
      • tree - the tree component mentioned above containing different menu options.
    • tree-nav-close - link used to represent a close button for the menu. Visible on tablet or smaller screen dimensions.

For mobile devices (<= 768px), the tree-nav-header will be visible to show a toggle switch to show the tree-nav.

To force the tree-nav to be visible on mobile displays, add the tree-nav--visible class to it.