Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 6470

5.6.5 Child NavItem With Grand Children

Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<li class="nav-item active" data-nav="child">
    <div class="flex flex_row">
        <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                    <span class="fa-stack">
                    <i class="fas fa-minus fa-stack-1x"></i>
                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                    </span>
            </div></div>        <div class="flex_auto self_center">
            <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                <ul class="ul_none flex_column flex">
                    <li class="nav-item " data-nav="child">
                        <div class="flex flex_row">
                            <div class="flex flex_column flex_none justify_start">
                                <div class="flex_none">
                                    <span class="fa-stack">
                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                            </div>
                        </div>
                    </li>                    <li class="nav-item " data-nav="child">
                        <div class="flex flex_row">
                            <div class="flex flex_column flex_none justify_start">
                                <div class="flex_none">
                                    <span class="fa-stack">
                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                            </div>
                        </div>
                    </li>                    <li class="nav-item " data-nav="child">
                        <div class="flex flex_row">
                            <div class="flex flex_column flex_none justify_start">
                                <div class="flex_none">
                                    <span class="fa-stack">
                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                            </div>
                        </div>
                    </li>                    <li class="nav-item " data-nav="child">
                        <div class="flex flex_row">
                            <div class="flex flex_column flex_none justify_start">
                                <div class="flex_none">
                                    <span class="fa-stack">
                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                            </div>
                        </div>
                    </li>                    <li class="nav-item  active " data-nav="grandchild">
                        <div class="flex flex_row">
                            <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                                <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                                        <span class="fa-stack">
                                        <i class="fas fa-minus fa-stack-1x"></i>
                                        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                        </span>
                                </div></div>                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                                <nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
                                    <ul class="ul_none flex_column flex">
                                        <li class="nav-item  " data-nav="greatGrandChild">
                                            <div class="flex flex_row">
                                                <div class="flex_auto self_center">
                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                </div>
                                            </div>
                                        </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                            <div class="flex flex_row">
                                                <div class="flex_auto self_center">
                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                </div>
                                            </div>
                                        </li>                                        <li class="nav-item active " data-nav="greatGrandChild">
                                            <div class="flex flex_row">
                                                <div class="flex_auto self_center">
                                                    <a class=" active text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                </div>
                                            </div>
                                        </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                            <div class="flex flex_row">
                                                <div class="flex_auto self_center">
                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                </div>
                                            </div>
                                        </li>                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</li>
Copy Code