javascript - 使用 uikit 扩展下拉菜单

Question

此代码是使用 Uikit Css Framework 为导航栏编写的。在导航栏中有一个下拉列表。当我单击下拉列表时，它只显示中间部分的内容。但我想显示带有完整容器的下拉列表内容。显示带有完整容器的下拉列表的最佳方法是什么。

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
    <div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset">
        <div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper">        
            <nav class="uk-navbar-container" uk-navbar id="navbar">
                <div class="uk-navbar-left">
                    <a class="uk-navbar-toggle uk-hidden@l" href="#" uk-toggle="target: #offcanvas-nav">
                    <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span>
                </a>

                
                <ul id="menu1" class="uk-navbar-nav">
                    <a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a>
                    <li class="uk-active"><a href="/">link</a></li>



 

    <!-- This is the dropdown -->
    <li class=""><a class="menu-full-width" href="#">dropdown</a>
    <div class=" uk-dropdown uk-dropdown-navbar uk-dropdown-width-4" data-uk-dropdown="{justify:'#menu2'}">
      <div class="uk-grid uk-dropdown-grid">
        <div class="uk-width-1-4">
          <ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
            <li class="uk-parent"><a href="#">Showcase Grid </a>
              <ul class="uk-nav-sub">
                <li><a href="#">Column 2</a></li>
                <li><a href="#">Column 3</a></li>
                <li><a href="#">Column 4</a></li>
                <li><a href="#">Column 5</a></li>
                <li><a href="#">Column 6</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="uk-width-1-4">
          <ul class="uk-nav uk-nav-navbar">
            <li class="uk-parent"><a href="#">Showcase Masonry</a>
              <ul class="uk-nav-sub">
                <li><a href="#">Column 2</a></li>
                <li><a href="#">Column 3</a></li>
                <li><a href="#">Column 4</a></li>
                <li><a href="#">Column 5</a></li>
                <li><a href="#">Column 6</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="uk-width-1-4">
          <ul class="uk-nav uk-nav-navbar">
            <li class="uk-parent"><a href="#">Portfolio Grid</a>
              <ul class="uk-nav-sub">
                <li><a href="#">Column 2</a></li>
                <li><a href="#">Column 3</a></li>
                <li><a href="#">Column 4</a></li>
                <li><a href="#">Column 5</a></li>
                <li><a href="#">Column 6</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="uk-width-1-4">
          <ul class="uk-nav uk-nav-navbar">
            <li class="uk-parent"><a href="#">Portfolio Mosaic</a>
              <ul class="uk-nav-sub">
                <li><a href="#">Column 2</a></li>
                <li><a href="#">Column 3</a></li>
                <li><a href="#">Column 4</a></li>
                <li><a href="#">Column 5</a></li>
                <li><a href="#">Column 6</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    </li>
    <!-- end dropdown -->
                    <li><a href="#">item1</a></li>
                       <li><a href="#">item2</a></li>
                          <li><a href="#">item3</a></li>
                             <li><a href="#">item4</a></li>
                             <li><a href="#">item5</a></li> 
                             <li><a href="#">item6</a></li>

                </ul>
            </div>
        </nav>

    </div>
</div>

Answer 1

这里的重要部分是 uk-drop="boundary: #navbar;"。

您可以在 docs 中找到带有合理下拉列表的示例.

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<nav class="uk-navbar-container" uk-navbar id="navbar">
  <div class="uk-navbar-left">
    <ul id="menu1" class="uk-navbar-nav">
      <li class="uk-active"><a href="/">link</a></li>
      <!-- This is the dropdown -->
      <li class="">
        <a class="menu-full-width" href="#">dropdown</a>
        <div class="uk-dropdown uk-dropdown-navbar" uk-drop="boundary: #navbar; boundary-align: true; pos: bottom-justify;">
          <div class="uk-grid uk-dropdown-grid">
            <div class="uk-width-1-4">
              <ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
                <li class="uk-parent"><a href="#">Showcase Grid </a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">Column 2</a></li>
                    <li><a href="#">Column 3</a></li>
                    <li><a href="#">Column 4</a></li>
                    <li><a href="#">Column 5</a></li>
                    <li><a href="#">Column 6</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="uk-width-1-4">
              <ul class="uk-nav uk-nav-navbar">
                <li class="uk-parent"><a href="#">Showcase Masonry</a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">Column 2</a></li>
                    <li><a href="#">Column 3</a></li>
                    <li><a href="#">Column 4</a></li>
                    <li><a href="#">Column 5</a></li>
                    <li><a href="#">Column 6</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="uk-width-1-4">
              <ul class="uk-nav uk-nav-navbar">
                <li class="uk-parent"><a href="#">Portfolio Grid</a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">Column 2</a></li>
                    <li><a href="#">Column 3</a></li>
                    <li><a href="#">Column 4</a></li>
                    <li><a href="#">Column 5</a></li>
                    <li><a href="#">Column 6</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="uk-width-1-4">
              <ul class="uk-nav uk-nav-navbar">
                <li class="uk-parent"><a href="#">Portfolio Mosaic</a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">Column 2</a></li>
                    <li><a href="#">Column 3</a></li>
                    <li><a href="#">Column 4</a></li>
                    <li><a href="#">Column 5</a></li>
                    <li><a href="#">Column 6</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <!-- end dropdown -->
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
      <li><a href="#">item6</a></li>

    </ul>
  </div>
</nav>