Foundation 6 boilerplate
A Pen by Rafi Benkual on CodePen.
Created
November 21, 2016 16:15
-
-
Save helanan/2c13e5187099689aaf96b7ebcceb7b2d to your computer and use it in GitHub Desktop.
3-way responsive menu example
This file contains hidden or 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
| <div class="row"> | |
| <div class="columns"> | |
| <ul class="vertical menu large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown"> | |
| <li> | |
| <a href="#">Item 1</a> | |
| <ul class="vertical menu"> | |
| <li> | |
| <a href="#">Item 1A</a> | |
| <ul class="vertical menu"> | |
| <li><a href="#">Item 1A</a></li> | |
| <li><a href="#">Item 1B</a></li> | |
| <li><a href="#">Item 1C</a></li> | |
| <li><a href="#">Item 1D</a></li> | |
| <li><a href="#">Item 1E</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Item 1B</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">Item 2</a> | |
| <ul class="vertical menu"> | |
| <li><a href="#">Item 2A</a></li> | |
| <li><a href="#">Item 2B</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">Item 3</a> | |
| <ul class="vertical menu"> | |
| <li><a href="#">Item 3A</a></li> | |
| <li><a href="#">Item 3B</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or 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
| $(document).foundation(); | |
This file contains hidden or 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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script> |
This file contains hidden or 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
| .menu { | |
| background: #2c3840; | |
| @media screen and (min-width: 64em) { | |
| padding: 1rem 0; | |
| } | |
| a { | |
| color: #fff; | |
| } | |
| } | |
| .is-drilldown-submenu-parent>a:after { | |
| border-color: transparent transparent transparent #fff; | |
| } | |
| .js-drilldown-back>a:before { | |
| border-color: transparent #fff transparent transparent; | |
| } | |
| .is-accordion-submenu-parent>a:after { | |
| border-color: #fff transparent transparent; | |
| } | |
| .dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after { | |
| border-color: #fff transparent transparent; | |
| } | |
| .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { | |
| border-color: transparent transparent transparent #fff; | |
| } |
This file contains hidden or 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
| <link href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment