Source: Foundation 6 Drilldown clickable parent link with sub-menu
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!-- Demo Header --> <div class="row collapse expanded"> <div class="column"> <h1 class="text-center"> <span>Drilldown</span>Click <a target="_blank" href="https://foundation.zurb.com/sites/docs/drilldown-menu.html"> { Docs 6.3.1 } </a> </h1> </div> </div> <!-- DRILLDOWN MENU TEST --> <div class="row demo-text"> <div class="columns small-12 text-center"> <p>{ Its now posible click on parent menu items that have a sub menu }</p> </div> </div> <nav> <ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true" data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'> <li class="has-submenu"> <a href="https://www.google.com" target="_blank">Item 1</a> <ul class="vertical menu"> <li><a href="#item-1A">Item 1A</a></li> <li><a href="#Item-1B">Item 2A</a></li> <li><a href="#Item-1C">Item 3A</a></li> </ul> </li> <li><a href="#Item-2">Item 2</a></li> <li><a href="#Item-3">Item 3</a></li> <li><a href="#Item-4">Item 4</a></li> <li><a href="#Item-5">Item 5</a></li> </ul> </nav> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/*** <-- Foundation Palette & Setup --> ***/ $primary: #1779ba; $secondary: #767676; $success: #3adb76; $warning: #ffae00; $alert: #CC4B35; $back-col: #ffffff; $font-col: #666; $base-font: 16px; /*** <-- Layout Styles --> ***/ body{ background: $back-col; color: $font-col; font-size: $base-font; } /*** <-- Demo Header --> ***/ h1{ margin-bottom: 4rem; padding: 1rem; text-transform: uppercase; font-size: 2em; font-weight: 300; border-bottom: 1px dashed #e2e2e2; span{ color: $primary; } a{ display: block; margin-top: .5rem; font-weight: normal; font-size: .5em; text-transform: uppercase; color: #888; transition: color .4s; &:hover{ color: $primary; } } } .demo-text{ margin-bottom: 1rem; } /*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/ nav{ width: 30rem; max-width: 100%; margin: 0 auto 4rem; background: #333; .is-drilldown-submenu { background: #333; } .has-submenu{ position: relative; .parent-lab{ z-index: 1; position: absolute; top: 0; left: 0; a{ display: inline-block; padding: .7rem 1rem; //same as menu links line-height: 1; //same as menu links color: red; } } } } |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Clickable Parent Link with sub-menu * * NB: must be placed BEFORE foundation's plugins initialisation. */ $('.has-submenu > a').each(function(){ $(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>'); }); /** * Initialise Foundation's plugins */ $(document).foundation(); |