Uikit 3.1.6 中的响应式导航栏答案

【问题标题】：Responsive Navbar in Uikit 3.1.6Uikit 3.1.6 中的响应式导航栏
【发布时间】：2019-07-28 11:39:52
【问题描述】：

我一直在尝试创建一个适用于移动设备和 PC 的响应式导航栏。但它似乎不起作用。

<nav class="uk-container uk-navbar">

    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active">
                <a href="#">UIKit<strong>Nav</strong></a>
            </li
        </ul>

    </div>

    <div class="uk-navbar-right">

        <ul class="uk-navbar-nav uk-visible@s">
            <li><a class="uk-text-large" #">about</a></li>
            <li><a class="uk-text-large" href="#">blog</a></li>
        </ul>

        <a href="#" class="uk-navbar-toggle uk-hidden@s" uk-navbar- 
            toggle-icon uk-toggle="target: #sidenav">MENU</a>

    </div>

</nav>

<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true" 
    class="uk-offcanvas">

    <div class="uk-offcanvas-bar">
        <ul class="uk-nav">
            <li><a class="uk-text-large" #">about</a></li>
            <li><a class="uk-text-large" href="#">blog</a></li>
        </ul>
    </div>

</div>

菜单图标似乎没有打开移动导航

【问题讨论】：

标签： css frameworks frontend getuikit

【解决方案1】：

也许这只是无效的 HTML 标记？在我的示例代码 sn-p 中它工作得很好

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit-icons.min.js"></script>

<nav class="uk-container uk-navbar">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active">
        <a href="#">UIKit<strong>Nav</strong></a>
      </li>
    </ul>
  </div>

  <div class="uk-navbar-right">
    <ul class="uk-navbar-nav uk-visible@s">
      <li><a class="uk-text-large" href="#">about</a></li>
      <li><a class="uk-text-large" href="#">blog</a></li>
    </ul>
    <a href="#" class="uk-navbar-toggle uk-hidden@s" uk-navbar-toggle-icon uk-toggle="target: #sidenav">MENU</a>
  </div>
</nav>

<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true" class="uk-offcanvas">
  <div class="uk-offcanvas-bar">
    <ul class="uk-nav">
      <li><a class="uk-text-large" href="#">about</a></li>
      <li><a class="uk-text-large" href="#">blog</a></li>
    </ul>
  </div>
</div>

【讨论】：