UIKit 3中的响应导航栏？

Question

我已经将我的网站迁移到UIKit3而不是Bootstrap4。但我已经在导航栏上呆了一段时间了。现在，我的导航栏是在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，但我在他们的模板中看不到任何选项。如果我理解正确的话，似乎我必须制作两个导航栏，一个用于正常视图，然后一个较小的？

Navbar留档建议添加. uk-navbar-toggle类和. uk-navbar-toggle-icon，如下所示-导致一个切换图标-但没有可扩展菜单，也不能隐藏指定的菜单项引导可以做到。

<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文档建议使用非画布组件（滑入和滑出页面的侧栏）或模式组件，但这两种组件都不会产生引导样式切换菜单。

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

Answer 1

  <nav class="uk-navbar uk-navbar-container uk-margin  uk-hidden@m">
        <div class="uk-navbar-left">
            <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#" uk-toggle="target: #offcanvas-nav"></a>
        </div>
    </nav>

    <div id="offcanvas-nav" uk-offcanvas="overlay: false">
        <div class="uk-offcanvas-bar   uk-hidden@m">

            <ul class="uk-nav uk-nav-default">
                <li class="uk-active"><a href="#">Active</a></li>
                <li class="uk-parent">
                    <a href="#">Parent</a>
                    <ul class="uk-nav-sub">
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
            </ul>

        </div>
    </div>

Answer 2

迟交的答复。。。使用一些CSS，您可以修改UiKit的导航栏，使其工作方式类似于Bootstrap的响应导航栏。请注意，这个示例的样式并不美观——我试图使CSS尽可能短。

在移动设备（触摸）上，下拉菜单将在触摸事件时打开/关闭（这是UiKit的现成功能）。

.uk-navbar {
  min-height: 50px;
}
.uk-navbar button.navbar-toggle {
  position: absolute;
  right: 0;
  top: 0;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.uk-navbar button.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
}
.uk-navbar button.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
.uk-navbar .uk-navbar-nav {
  flex-wrap: wrap-reverse;
  align-self: flex-end;
}
.uk-navbar .uk-navbar-nav > li > a {
  min-height: auto;
  line-height: 3em;
}
@media (max-width: 959px) {
  .uk-navbar .toggle-target.collapsed {
    display: none;
  }
  .uk-navbar .toggle-target .uk-navbar-nav {
    display: block;
    top: 50px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background: #f8f8f8;
  }
  .uk-navbar .toggle-target .uk-navbar-nav li a {
    display: block;
    min-height: 0;
    line-height: 2em;
    padding: 0 15px !important;
  }
  .uk-navbar .toggle-target .uk-navbar-dropdown {
    width: 90%;
    min-width: 200px;
  }
  .uk-navbar .toggle-target .uk-navbar-dropdown[class*='uk-navbar-dropdown-bottom'] {
    margin-top: 0;
  }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
a#logo {
  align-items:baseline
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-core.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit-core.min.css" rel="stylesheet"/>

    <section id="mainnav">
        <nav class="uk-container" uk-navbar>
            <button type="button" class="navbar-toggle uk-hidden@m" uk-toggle="target:.toggle-target; cls:collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="uk-navbar-brand">
                <a href="/" id="logo" class="uk-navbar-item uk-logo">LOGO</a>
            </div>
            <div class="uk-navbar-right toggle-target collapsed">
                <ul class="uk-navbar-nav">
                    <li class="active"><a href="#">Company</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li><a href="#">About Us </a></li>
                                <li><a href="#">Quality & Environment</a></li>
                                <li><a href="#">Tools</a></li>
                                <li><a href="#">History</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Services</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li><a href="#">Programming</a></li>
                                <li><a href="#">Design</a></li>
                                <li><a href="#">Consultancy</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Carriere</a></li>
                    <li><a href="#">Contact</a></li>
                    
                </ul>
            </div>
        </nav>
    </section>

Answer 3

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

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

我个人支持引导式navbar解决方案，无需重复内容。它目前在世界各地的许多主要网站上使用。那么为什么不支持它呢？

要求：

• 水平导航栏可在智能手机视图中垂直堆叠
• 切换导航栏隐藏和汉堡图标，当达到智能手机视图
• 切换图标显示/隐藏导航栏在智能手机视图
• 导航栏永远不会隐藏在桌面视图中，无论是否使用切换图标

解决方案：

是的，很难看，我知道。。。

<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，以便仅在smartphone视图中隐藏导航栏：

.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