how configure foundation 6 responsive menus switch dropdown menu drilldown menu when @ mobile device brealpoint?
the last example in foundation documentation works expected in medium or larger views, still shows horiozontal menu in small views!!
basically, how menu behave old foundation 5 menu did?
this markup works, drilldown works bit, menu items still lined horizontally.
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">menu</div> </div> <div class="top-bar" id="example-menu"> <div class="top-bar-left"> <ul class="dropdown menu" data-responsive-menu="drilldown medium-dropdown" > <li class="menu-text">site title</li> <li> <a href="#">one</a> <ul class="menu vertical"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> <div class="top-bar-right"> <ul class="menu"> <li><input type="search" placeholder="search"></li> <li><button type="button" class="button">search</button></li> </ul> </div> </div>
get rid of dropdown class <ul> , add classes vertical , medium-horizontal list looks this:
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> update: bugs related dropdown arrows , submenu fold out direction in responsive menu have been fixed in release of foundation-sites 6.2.0.
related question: foundation 6 data-responsive-menu parameters
Comments
Post a Comment