在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个导航栏,一个用于普通视图,然后是一个较小的一个？

在导航栏的文件表明,.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>

该导航栏文档建议关闭画布组件(侧边栏滑动进出页面) -或莫代尔成分 -但这些都不能导致引导式切换菜单.

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

正常尺寸的屏幕 - 显示所有菜单项:

屏幕尺寸较小 - 隐藏部分或全部菜单项:

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

Answer 1

迟到的答案...使用一些 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>