Question

我正在尝试使用uikit navbar创建垂直导航栏菜单。

但是它会自动设置下拉菜单的最高边距。因此，下拉菜单设置最高边距时无法正常工作。

这是css和html：

.vertical {
    display: block!important;
    max-width: 200px !important;
}
.vertical  ul.uk-navbar-nav{
   display: block;
   margin: 0;
   padding: 0;
}
.vertical ul.uk-navbar-nav li > div.uk-navbar-dropdown
{
 left: 210px !important;
}
.vertical ul.uk-navbar-nav >li {
    float: left;
    padding: 0 15px;
    margin-bottom: -20px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" rel="stylesheet"/>
<nav class="uk-navbar-container vertical uk-navbar" uk-navbar="mode:click;">
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</nav>

请对此提供帮助。

谢谢

Answer 1

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=0.85">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>

            <!-- 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>
            <script src="https://code.jquery.com/jquery-latest.js"></script> 
        </head>
        <body>
            <div class="uk-container-expand">
                <div class="uk-grid-small uk-grid-collapse uk-grid" uk-height-viewport uk-grid>
                    <div class="uk-width-1-4@s uk-background-muted uk-padding">
                        <nav role="main-navigation">
                            <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
                              <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>
                                          <ul>
                                              <li><a href="#">Sub item</a></li>
                                              <li><a href="#">Sub item</a></li>
                                          </ul>
                                      </li>
                                  </ul>
                              </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>
                          </ul>
                        </nav>
                    </div>
                    <div class="uk-width-expand@s uk-padding">
                        <main role="content">
                            <p>
                                
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis ornare ex at vulputate. Ut gravida leo arcu, et tincidunt sem vehicula id. Aliquam ornare mollis quam, tincidunt auctor nisi sagittis et. Integer aliquam tellus ac lacus iaculis aliquam. Nulla gravida erat vel justo varius consectetur. Aenean venenatis sed lorem eget bibendum. Sed facilisis non felis id scelerisque. Sed tincidunt ligula in lacus sollicitudin, vel accumsan dolor malesuada. Cras et sapien non ante mattis rhoncus. Ut rutrum rutrum nibh tincidunt pharetra.
    
                                Aliquam quis condimentum urna, nec posuere lectus. In vitae efficitur elit. Phasellus eget lorem dignissim, malesuada lorem non, rutrum ex. Vivamus nec fringilla nisl. Quisque in orci nec mauris tempor sodales eu vitae lectus. In scelerisque eros orci, eu varius magna efficitur at. Etiam molestie turpis vitae vulputate suscipit.
    
                            </p>
                        </main>
                    </div>
                </div>
            </div>
        </body>
    </html>

这符合您的需求吗？

uikit垂直导航栏菜单

1 个答案: