首页 > 解决方案 > UIkit 垂直导航栏菜单

问题描述

我正在尝试使用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>

请帮助解决这个问题。

谢谢

标签: javascripthtmlcssgetuikit

解决方案


<!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>

这适合您的需求吗?


推荐阅读