基金会6名顶部下拉列表

Question

我正在寻找新的网站基础6。我已经设置了一个响应式的顶栏，将手风琴与小型设备相结合，并在中型和中型上下拉。

我的问题是我无法弄清楚如何在顶栏下显示子菜单，而不是在菜单项的右侧。

有人有个主意吗？我不知道从哪里开始。在此先感谢：）

Screenshot of how it looks now

我附上了我的HTML和SCSS。

/// 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="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="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>

Answer 1

您的问题看起来类似于我的导航/菜单结构和F6：我需要结合“下拉菜单”和“响应式导航”的功能。使用最后一个（如此处所述：http://foundation.zurb.com/sites/docs/responsive-navigation.html）适用于移动（小）视图： <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown"但是这段代码不包含像“下拉菜单”（如下所述：http://foundation.zurb.com/sites/docs/dropdown-menu.html）中的+ mid屏幕：它自己的响应式导航产生下拉列表在菜单项下方水平开始，而在其下方不。我的解决方案是使用几乎相同的代码两次，附带所需的列表标签，仅用于小屏幕和中+屏幕：

编辑：我将数据响应切换断点更改为“大”，将ul类更改为数据钻取菜单，因为以前使用的属性data-responsive-menu="drilldown medium-dropdown"已经过时了解我的解决方案如上所述。

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

（...）AND

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

这对我有用。您可以在http://frickeln.jensfreyer.de/blog上显示示例。但是无论如何都要避免使用这段额外的代码。希望这有帮助！