Foundation 6 Dropdown-Liste mit den Top-Titeln unter - zub-foundation, dropdown

Ich schaue mir die neue Foundation 6 für Sites an. Ich habe eine reaktionsschnelle Topbar eingerichtet, die Akkordeon auf kleinen Geräten und Drop-Down auf Medium und Up kombiniert.

Mein Problem ist, dass ich nicht herausfinden kann, wie man die Untermenüs unter der oberen Leiste statt auf der rechten Seite des Menüelements anzeigt.

Jeder hat eine Idee? Ich habe keine Ahnung, wo ich anfangen soll. Danke im Voraus :)

Screenshot davon, wie es jetzt aussieht

Ich habe meine HTML und SCSS angehängt.

/// Media query to show full menu
/// @type String
$topbar-breakpoint:medium !default;
// Navigation background
$navigation-background:$white;
$navigation-font-color:$primary-color;
$navigation-font-hover-color:$white;
$navigation-border-bottom-height:4px; // adjust $navup-desktop-height/$navup-mobile-height accordingly
$navigation-border-bottom-type:solid; // dotted, double, solid, dashed
$navigation-border-bottom-color:$medium-gray;
$navigation-menu-item-background-active:scale-color($primary-color,
$lightness:90%);
/// Logo bar
$logo-height-desktop:2rem;
$logo-padding-desktop:$global-margin;
$logo-bar-background:$navigation-background;
// Navup
$navup-mobile-height:113px;
$navup-desktop-height:132px;
$desktop-nav-background:$navigation-background;
$desktop-submenu-background-hover:$navigation-background;
$desktop-submenu-level1-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level2-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level3-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level4-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level5-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-border:1px solid $navigation-font-color;
$desktop-menu-has-submenu-padding:1.5rem 1.5rem 1.5rem 1rem;
$desktop-menu-padding:1.5rem;
// Vars: Desktop menu-items border
$desktop-menu-item-border-bottom:$navigation-border-bottom-height $navigation-border-bottom-type $dark-gray;
$desktop-menu-item-border-bottom-hidden:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-background;
$desktop-menu-item-border-bottom-hover:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
// Vars: Desktop menu-items active (border and background)
$desktop-menu-item-background-active:none;
$desktop-menu-item-border-bottom-active:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
$mobile-nav-background:$navigation-background;
$mobile-submenu-padding:1.5rem;
$mobile-submenu-background:$navigation-background;
$mobile-submenu-level1-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level2-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level3-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level4-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level5-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-background-hover:scale-color($mobile-nav-background,
$lightness:-5%);
$mobile-submenu-font-color-hover:$white;
$mobile-menu-item-background-active:$navigation-menu-item-background-active;
$menu-button-background:$white;
$menu-button-color:$primary-color;
$menu-button-padding:1rem;
$menu-button-size:49px;
header.navigation-custom {
box-shadow: 0px 0px 8px 0 rgba($black, .2);
position: fixed;
width: 100%;
background: $navigation-background;
z-index: 1001;
top: 0;
transition: top .3s ease-in-out;
border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $primary-color;
@include breakpoint($topbar-breakpoint) {
border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $navigation-border-bottom-color;
}
// Mobile styling
// Menu styling
.top-bar {
background: none;
z-index: 99999;
bottom: 0;
//// Submenu nested
// Top level
.menu {
ul {
background: none;
}
li {
background: $mobile-submenu-background;
&.menu-item.active {
background: $mobile-menu-item-background-active;
}
&:hover {
background: $mobile-submenu-background-hover;
}
}
// Padding
li:not(.menu-text) > a {
padding: $mobile-submenu-padding;
&: : after {
right: 1.5rem;
}
}
// Level 1
.submenu.nested {
text-indent: 1rem;
li {
background: $mobile-submenu-level1-background;
&: hover {
background: $mobile-submenu-background-hover;
}
a {
&: : after {
text-indent: 0;
}
}
&:first-child {
box-shadow: $global-box-shadow-inset;
}
}
// Level 2
.submenu.nested {
text-indent: 1.5rem;
li {
background: $mobile-submenu-level2-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 3
.submenu.nested {
text-indent: 2rem;
li {
background: $mobile-submenu-level3-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 4
.submenu.nested {
text-indent: 2.5rem;
li {
background: $mobile-submenu-level4-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 5
.submenu.nested {
text-indent: 3rem;
li {
background: $mobile-submenu-level5-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
}
}
}
}
}
}
}
// Desktop specific styling
@include breakpoint($topbar-breakpoint) {
// Menu styling
.top-bar {
bottom: -$navigation-border-bottom-height;
//// Submenu nested
// Top level
.menu {
background: none;
li.menu-item {
border-bottom: $desktop-menu-item-border-bottom;
&: hover {
border-bottom: $desktop-menu-item-border-bottom-hover;
}
&.active {
background: $desktop-menu-item-background-active;
border-bottom: $desktop-menu-item-border-bottom-hover;
}
}
li {
background: none;
&: hover {
background: $desktop-submenu-background-hover;
}
&.main-items {
&: hover {
background: none;
}
}
}
> li:not(.logo) > a {
// border-bottom: 4px double red;

}
// Padding
li.has-submenu:not(.menu-text) > a {
padding: $desktop-menu-has-submenu-padding;
}
li:not(.menu-text) > a {
padding: $desktop-menu-padding;
}
// Level 1
.submenu.nested {
text-indent: 0rem;
border: $desktop-submenu-border;
li {
background: $desktop-submenu-level1-background;
border-bottom: $desktop-menu-item-border-bottom-hidden;
&: hover {
background: $desktop-submenu-background-hover;
border-bottom: $desktop-menu-item-border-bottom-hover;
}
&:first-child {
box-shadow: none;
}
}
// Level 2
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level2-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 3
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level3-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 4
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level4-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 5
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level5-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
}
}
}
}
}
}
// Float right bar to right
.top-bar-right {
margin-left: auto;
}
}
}
// General styling
.top-bar {
position: relative;
z-index: 1000;
.menu {
&.nested {
margin-left: 0rem;
}
li {
a {
color: $navigation-font-color;
}
}
.submenu {
li {
&.active {
background: $navigation-menu-item-background-active !important;
}
}
}
}
// Downarrow desktop
.menu.menu-items {
> .is-dropdown-submenu-parent.is-right-arrow {
& > a: : after {
border: none;
font-family: "FontAwesome";
content: "f078";
margin-top: 4px;
font-size: 10px;
}
}
}
// Rightarrow desktop
.menu {
> .is-dropdown-submenu-parent.is-right-arrow {
& > a: : after {
border: none;
font-family: "FontAwesome";
content: "f054";
margin-top: 4px;
font-size: 10px;
}
}
}
// Downarrow mobile
.menu {
.is-accordion-submenu-parent {
> a: : after {
border: none;
font-family: "FontAwesome";
content: "f078";
font-size: 10px;
margin-top: -4px;
}
}
.is-accordion-submenu-parent[aria-expanded="true"] {
> a {
font-weight: 700;
&: : after {
margin-top: 4px;
}
}
}
}
}
// logo-bar
.logo-bar {
background: $logo-bar-background;
text-align: center;
@include flex-grid-row;
@include flex-grid-row-align(null, middle);
.logo-container, .social-container {
@include flex-grid-column(6, null);
}
.menu.logo {
background: none;
li.logo {
a {
padding-top: $logo-padding-desktop;
padding-bottom: $logo-padding-desktop;
padding-left: 0;
padding-right: 0;
}
img {
max-height: $logo-height-desktop;
}
&:hover {
background: none;
}
}
}
.social-container {
ul.social-icons {
float: right;
background: none;
@include breakpoint(medium) {
margin-right: 3rem;
}
@include breakpoint(1400) {
margin-right: 0;
}
li {
background: none;
&: hover {
background: none;
}
}
}
}
}
.title-bar {
position: relative;
padding: 0;
background: $mobile-nav-background;
button.menu-button {
height: $menu-button-size;
width: $menu-button-size;
padding: $menu-button-padding;
background: $menu-button-background;
color: $menu-button-color;
}
.title-bar-right {
position: relative;
}
}
// Search field
.title-bar--search-field,
.title-bar--search-button {
margin-bottom: 0;
height: 49px;
@include breakpoint($topbar-breakpoint) {
height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
}
}
input[type="text"].title-bar--search-field {
padding: 0 1rem;
width: 70%;
float: right;
border: 0;
box-shadow: none;
background: $light-gray;
@include breakpoint($topbar-breakpoint) {
padding: 0 1.5rem;
width: 50%;
}
}
.title-bar--search-button {
top: 0;
right: 0;
position: absolute;
z-index: 2;
@include breakpoint($topbar-breakpoint) {
i.fa-search {
position: relative;
top: 25%;
}
}
.icon-search {
top: 0;
}
}
.title-bar--search-field.absolute {
position: absolute;
top: 0;
right: 0;
height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
width: 500px;
}
&.nav-up {
top: -$navup-mobile-height;
@include breakpoint($topbar-breakpoint) {
top: -$navup-desktop-height;
}
}
}
// Nav-up
// navup-body
body {
padding-top: $navup-mobile-height;
@include breakpoint($topbar-breakpoint) {
padding-top: $navup-desktop-height;
}
}
<!-- Navigation-custom start -->
<header class="navigation-custom">

<!-- Top bar top start -->
<div class="logo-bar">
<!-- Logo container start -->
<div class="logo-container">
<ul class="clean-list menu logo">
<li class="logo">
<a href="index.html">
<img src="/images/assets/img/ht-logo-dark.png" alt="logo">
</a>
</li>
</ul>
</div>
<!-- Logo container end -->
</div>
<!-- Top bar top end -->

<!-- Mobile navigation start -->
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button type="button" class="menu-button" data-toggle><i class="fa fa-bars"></i>
</button>
<a class="title-bar--search-button button alert"><i class="fa fa-search"></i></span></a>
<input class="title-bar--search-field" type="text" placeholder="Hva leter du etter?">
</div>
<!-- Mobile navigation end -->

<!-- Desktop navigation start -->
<div class="top-bar" id="main-menu">
<div class="row">
<!-- Top bar bottom end -->
<div class="top-bar-left show-for-medium">
<!-- <ul class="dropdown menu menu-items" data-dropdown-menu>
<li class="logo"><a href="index.html"><img src="/images/assets/img/ht-logo-dark.png" alt="logo"></a></li>
</ul> -->
</div>
<div class="top-bar-left">
<ul class="menu menu-items vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
<!-- Level one -->
<li class="has-submenu menu-item active">
<a href="#">Sider</a>
<ul class="submenu menu vertical nested" data-submenu>
<!-- Level two -->
<li class="has-submenu active">
<a href="#">Sidebyggeren</a>
<ul class="submenu menu vertical nested">
<!-- Level three -->
<li class="active"><a href="pageBuilder--gallery.html">Galleri</a>
</li>
<li><a href="pageBuilder--slideshow.html">Slideshow</a>
</li>
<li><a href="pageBuilder--links-grid.html">Links-grid</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="products-overview.html">Produkter</a>
<ul class="submenu menu vertical nested">
<!-- Level three -->
<li><a href="products-overview.html">Alle produkter</a>
</li>
<li><a href="#">Kategori 1</a>
</li>
<li><a href="#">Kategori 2</a>
</li>
<li><a href="#">Kategori 3</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="services-overview.html">Tjenester</a>
<ul class="submenu menu vertical nested">
<!-- Level Three -->
<li><a href="services-overview.html">Alle tjenester</a>
</li>
<li><a href="services-detail.html">Tjeneste 1</a>
</li>
<li><a href="services-detail.html">Tjeneste 2</a>
</li>
<li><a href="services-detail.html">Tjeneste 3</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="information-section.html">Informasjonsstruktur</a>
<ul class="submenu menu vertical nested">
<!-- Level Three -->
<li><a href="information-section.html">Informasjonsside 1</a>
</li>
<li><a href="information-section.html">Informasjonsside 2</a>
</li>
<li><a href="information-section.html">Informasjonsside 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu menu-items vertical medium-horizontal">
<li class="menu-item"><a href="news-overview.html">Nyheter</a>
</li>
<li class="menu-item"><a href="about.html">Om oss</a>
</li>
<li class="menu-item"><a href="contact.html">Kontakt</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Desktop navigation start -->

</header>

Antworten:

0 für die Antwort № 1

Ihr Problem ähnelt meinem mitNavigation / Menüstruktur und F6: Ich muss die Funktionalitäten des "Dropdown-Menüs" UND der "Responsiven Navigation" kombinieren. Mit dem letzten (wie hier beschrieben: http://foundation.zurb.com/sites/docs/responsive-navigation.html) funktionierte gut für die mobile (kleine) Sicht: <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" Aber dieser Teil des Codes beinhaltet nicht das Ausfüllen, wie es mit dem "Dropdown-Menü" gegeben wird (wie hier beschrieben: http://foundation.zurb.com/sites/docs/dropdown-menu.html) für Medien + Bildschirme: die Responsive Navigation für sich selbst erzeugt Dropdown-Listen, die horizontal unter dem Menüpunkt beginnen und nicht darunter. Meine Lösung besteht darin, fast denselben Code zweimal zu verwenden, und zwar mit den erforderlichen Listen-Tags nur für kleine Bildschirme und Medien + Bildschirme:

Bearbeiten: Ich änderte den Daten-Antwort-Toggle-Haltepunkt zu "Large" und die Ul-Klasse zu einem Data-Drilldown-Menü aufgrund des zuvor verwendeten Attributs data-responsive-menu="drilldown medium-dropdown"ist für meine oben beschriebene Lösung veraltet.

<div class="top-bar-right hide-for-large"> <ul class="vertical menu" data-drilldown> <li> (...) </li </ul> </div>

(...) UND

<div class="top-bar-right show-for-large"> <ul class="dropdown menu" data-dropdown-menu> <li> (...) </li </ul> </div>

Das funktioniert für mich. Sie können ein Beispiel anzeigen http://frickeln.jensfreyer.de/blog. Aber es wäre toll, diesen zusätzlichen Code sowieso zu vermeiden. Hoffe das hilft!


Verwandte Fragen