javascript - UIKit 3 中的响应式导航栏？

Question

我一直在将我的网站迁移到 UIkit 3 而不是 Bootstrap 4。但是我在导航栏上停留了一段时间。现在，我的导航栏是在 Bootstrap 4 中构建的，看起来像这样:

https://jsfiddle.net/eztwL9p7/1/

<nav class="navbar navbar-toggleable-sm  sticky-top navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <a class="navbar-brand">brand</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link">Blog <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
    </ul>
    <auth-partial>
      <ul class="nav navbar-nav">
        <li class="nav-item float-xs-right">
          <a href="#" class="nav-link">Log in</a>
        </li>
      </ul>
    </auth-partial>
  </div>
</nav>

所以它只是一个普通的导航栏，但是当页面足够小时，会出现一个切换按钮，并且元素会变成一个下拉列表。我一直在尝试将它迁移到 UIKit，但我在他们的模板中看不到任何选项。如果我理解正确的话，似乎我必须制作 2 个导航栏，一个用于普通 View ，然后一个较小的导航栏？

Navbar documentation建议像下面那样添加 .uk-navbar-toggle 类和 .uk-navbar-toggle-icon - 产生一个切换图标 - 但没有可扩展的菜单也不能像 Bootstrap 那样隐藏指定的菜单项。

<nav class="uk-navbar uk-navbar-container uk-margin">
    <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
    </div>
</nav>

Navbar documentation建议 Off-canvas component (滑入和滑出页面的侧边栏)- 或 Modal component - 但这些都不会产生 Bootstrap 风格的切换菜单。

显示响应式导航栏如何在 Bootstrap 的较小屏幕上切换/隐藏指定元素的屏幕截图:

正常大小的屏幕 - 显示所有菜单项:

屏幕尺寸变小 - 部分或所有菜单项被隐藏:

屏幕尺寸变小 - 按菜单显示菜单项:

Answer 1

很明显，UIkit 期望实现具有重复的导航栏，每个导航栏仅在各自的视口(viewport)中可见。那是他们自己的网站解决方案。在我看来，这并不总是一个好主意。我强烈反对这样的变通办法，因为对我来说，这看起来像是一种不必要的方式，让菜单变得更难维护、更难访问、结构更差、可读性或机器可解析性更差、更容易出错，更不用说重复的内容可能对菜单产生负面影响搜索引擎优化。这是我在发现这个真正有很大潜力的伟大框架时遇到的最大失望之一。没有开箱即用的可切换和可堆叠导航栏是一个很大的不，不 - 对不起 UIkit 开发团队。除此之外，UIkit 是一个很棒的工具包。

如果有人想按照他们的建议使用模态或非 Canvas 解决方案，请随意使用。但在那种情况下，我仍然建议不要在您的网站上有重复的内容。也许可以使用 Javascript 来动态移动内容。

我个人赞成不需要重复内容的类似于 Bootstrap 的导航栏解决方案。目前在周围的许多主要网站上都在使用它。那为什么不支持呢？

要求:

• 水平导航栏可在智能手机 View 中垂直堆叠
• 切换导航栏“隐藏”和到达智能手机 View 时显示的“汉堡包图标”
• 切换图标在智能手机 View 中显示/隐藏导航栏
• 无论是否使用切换图标，导航栏都不会隐藏在桌面 View 中

解决方案:

是的，它很丑，我知道...

<nav class="uk-navbar-container uk-flex-column uk-flex-top" data-uk-navbar data-uk-toggle="media: @s; cls: uk-flex-row uk-flex-top; mode: media">
    <button type="button" data-uk-toggle="target: .navbar-collapse; cls: hidden-up-to-s" class="uk-navbar-toggle uk-hidden@s" data-uk-navbar-toggle-icon></button>
    <div class="navbar-collapse hidden-up-to-s">
        <div class="uk-navbar-left">
            <ul data-uk-toggle="media: @s; cls: uk-navbar-nav uk-padding-remove; mode: media" class="uk-nav uk-nav-primary uk-padding-small">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</nav>

还有一些自定义 CSS，以便仅在智能手机 View 中隐藏导航栏:

.hidden-up-to-s {
    display: none;
}
@media (min-width: 640px) { /* @breakpoint-small */
    .hidden-up-to-s {
        display: block;
    }
}

这里有更多例子: https://codepen.io/Hrvoje-Go/pen/LKWojr