0
Ich möchte ein Dropdown-Mega-Menü in voller Breite erstellen, das ich auch mit einer oberen Leiste kombinieren kann, die ein Drilldown-Menü in mobilen Bildschirmen hat. Jede Methode, die ich auf Foundation versucht habe, funktioniert nur mit Foundation 5, da sie Top-Leiste in Foundation 6 geändert.Foundation 6 Mega Menu und Responsive Toggle Navigation mit Drilldown Title Bar auf Small
Bis jetzt, (mit der Hilfe von diesem Thread: http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus) Ich habe die Dropdown-Mega-Menü erstellen können Auf kleinen Bildschirmen erscheint die Titelleiste und schaltet sich um. Wenn ich jedoch versuche, ein Element mit einem Drilldown-Untermenü zu öffnen, wird es immer noch so behandelt, als wäre es ein Dropdown-Element.
Auch ich merke, dass volle Breite Hover für die Untermenüs irgendwie den Bildschirm auf eine Menge zusätzlichen leeren Platz horizontal schieben. Während ich den extra leeren horizontalen Raum durch Hinzufügen einer max-width: 100% zur Dropdown-Fenster-Klasse loswerden kann, zeigt das zweite meiner beiden Mega-Untermenüs nicht die volle Breite korrekt an, wenn ich den Mauszeiger darüber bewege. Obwohl im Codepen, zeigen sie sich gut.
Dies ist der Link zur codepen: http://codepen.io/jen188/pen/PzRkbg
Dies ist der Code für meine Header;
<header>
<div class="row columns expanded">
<a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo show-for-small-only" /></a>
<div class="title-bar" data-responsive-toggle="main-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="main-menu">
<div class="top-bar-left"><a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo hide-for-small-only" /></div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal expanded dropdown menu" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Events Calendar</a></li>
<li class="has-submenu is-drilldown-submenu-parent">
<a href="#" class="dropdown" data-toggle="megamenu-resources">Resources
<div class="dropdown-pane" id="megamenu-resources" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
<div class="row column expanded">
<div class="large-9 columns">
<div class="row column expanded">
<div class="large-4 columns">
<ul>
<li><a href="#"><h3>Foreclosure Laws</h3></a></li>
<li><a href="#"><img src="img/laws.png" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="large-4 columns">
<ul>
<li><a href="lenders.html"><h3>Hard Money Lenders</h3></a></li>
<li><a href="#"><img src="img/coin-stack.png" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="large-4 columns">
<ul>
<li><a href="glossary.html"><h3>Real Estate Glossary</h3></a></li>
<li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
</div>
</div>
<div class="large-3 columns">
<ul>
<li><a href="#"><h3>Find a REIA</h3></a></li>
<li><a href="#"><img src="img/map-icon.png" alt="Click for More Info"/></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<!-- <div class="small-12 large-3 columns">
<ul>
<li><a href="#">Find a REIA</a></li>
<li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div> -->
<!-- <div class="small-12 large-3 columns">
</div>
<div class="small-12 large-3 columns">
<ul>
<li><a href="lenders.html">Hard Money Lenders</a></li>
<li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="small-12 large-3 columns">
<ul>
<li><a href="glossary.html">Real Estate Glossary</a></li>
<li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div> -->
</div>
</div>
</a>
</li>
<li class="has-submenu is-drilldown-submenu-parent">
<a href="#" class="dropdown" data-toggle="megamenu-property-listings">Property Listings
<div class="dropdown-pane" id="megamenu-property-listings" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
<div class="row column expanded">
<div class="small-12 large-3 columns">
<ul>
<li><a href="#">All Properties</a></li>
<li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="small-12 large-4 columns">
<ul>
<li><a href="#">Single Family Properties</a></li>
<li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="small-12 large-4 columns">
<ul>
<li><a href="#">Multi Family Properties</a></li>
<li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
</div>
</div>
</a>
</li>
<li class="has-submenu is-drilldown-submenu-parent">
<a href="#" class="dropdown" data-toggle="megamenu-websites">Get a Website
<div class="dropdown-pane" id="megamenu-websites" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
<div class="row column expanded">
<div class="small-12 large-6 columns">
<ul>
<li><a href="#">Get Started</a></li>
<li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
<div class="small-12 large-6 columns">
<ul>
<li><a href="#">Features</a></li>
<li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
</ul>
</div>
</div>
</div>
</a>
</li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</div>
</div>
</div>
</header>