Created
January 4, 2023 22:16
-
-
Save jonedmiston/f7617f48df49212dec76e267bf4c82b6 to your computer and use it in GitHub Desktop.
Layered Dropdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .dropdown-header { | |
| display: block; | |
| padding: 5px 16px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: #535353; | |
| white-space: nowrap; | |
| font-weight: 700; | |
| } | |
| </style> | |
| <h3>Tiered Dropdown</h3> | |
| <style> | |
| .dropdown-menu .dropdown-submenu-toggle { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .dropdown-submenu-toggle > .caret { | |
| color: rgb(52 58 64 / 50%); | |
| margin-left: auto; | |
| transform: rotate(-90deg); | |
| transition: transform 125ms; | |
| } | |
| .dropdown-submenu-toggle.open > .caret { | |
| transform: rotate(0deg); | |
| } | |
| .dropdown-submenu > ul.dropdown-menu { | |
| position: relative; | |
| padding: 0; | |
| margin: 0; | |
| border-radius: 0; | |
| box-shadow: none; | |
| list-style: none; | |
| border: 0; | |
| width: 100%; | |
| } | |
| .dropdown-submenu > .dropdown-menu>li>a { | |
| padding-left: 40px; | |
| } | |
| </style> | |
| <script> | |
| // jquery ready | |
| $(document).ready(function() { | |
| // Make Dropdown Submenus possible | |
| $('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){ | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $(this).toggleClass('open').next('ul').toggle(); | |
| }); | |
| }); | |
| </script> | |
| <!-- Single button --> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| Add Another Account <span class="caret"></span> | |
| </button> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Benevolence</a></li> | |
| <li><a href="#">Mission Christmas</a></li> | |
| <li class="dropdown-submenu"> | |
| <a href="#" class="dropdown-submenu-toggle">Support <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Auten, Joel & Haley</a></li> | |
| <li><a href="#">Cooper, Bethany</a></li> | |
| <li><a href="#">Daniel, Bradley & Katie</a></li> | |
| <li><a href="#">Hedges, Amanda</a></li> | |
| <li><a href="#">McCue, Samantha</a></li> | |
| <li><a href="#">Northrop, Dusty & Heather</a></li> | |
| <li><a href="#">Roberts, Hannah</a></li> | |
| <li><a href="#">Rothove, Brian</a></li> | |
| <li><a href="#">Speak, Miranda (Kairos)</a></li> | |
| <li><a href="#">Swank, Steven & Maddy</a></li> | |
| <li><a href="#">Topping, Nic & Kennedy</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown-submenu"> | |
| <a href="#" class="dropdown-submenu-toggle">Local Outreach <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">KC Dream Center</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown-submenu"> | |
| <a href="#" class="dropdown-submenu-toggle">Mission 2023 <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Eastern Mediterranean 2023</a></li> | |
| <li><a href="#">Utah Spring 2023</a></li> | |
| <li><a href="#">Utah Fall 2023</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown-submenu"> | |
| <a href="#" class="dropdown-submenu-toggle">Building Fund <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Olathe Building</a></li> | |
| <li><a href="#">Ottawa Building</a></li> | |
| <li><a href="#">Kansas City, KS Building</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Lifesong Adoption Fund</a></li> | |
| <li><a href="#">Hilltop Church - Utah (Jared Gregory Plan)</a></li> | |
| <li><a href="#">Life Grillers Contribution</a></li> | |
| <li class="dropdown-submenu"> | |
| <a href="#" class="dropdown-submenu-toggle">Camp <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">LifeMission Kids</a></li> | |
| <li><a href="#">LifeMission Youth</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| <hr> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment