Как отобразить UIkit nav вне контейнера? - PullRequest
Новая
       21

Как отобразить UIkit nav вне контейнера?

0 голосов
/ 10 июня 2019

Я хочу отобразить липкую навигацию UIkit за пределами своего контейнера.

Есть очень хороший пример того, как это может выглядеть на веб-сайте UIkit.https://getuikit.com/docs/introduction Игнорировать ссылки слева.

Навигация должна быть слева от содержимого (в примере это справа)

Я также сделал этот пример перомhttps://codepen.io/anon/pen/YoKxgB

<div class="uk-section">
    <div class="uk-container"></div>
</div>

https://i.ibb.co/nMhyz52/links.jpg

Я очень ценю каждый ответ

1 Ответ

0 голосов
/ 10 июня 2019

В UIKit есть функция с именем sticky , предназначенная для этого.Просто используйте uk-sticky со смещением, чтобы сохранить его на месте (здесь смещение равно 70 сверху).

Ниже вы можете найти рабочий код (скопированный из вашей кодовой ручки) 

.admin-sidebar {
    position: absolute;
    width: 130px;
    left: -140px;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />

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

<div class="uk-section uk-section-default">
    <div class="uk-container" style="position: relative;">
        
       <div class="admin-sidebar uk-visible@xl">
          <!-- here we define uk-sticky with offset -->
          <div uk-sticky="offset:70">
            <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
                <li class="uk-nav-header">Navigation</li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: users"></span>Benutzer</a></li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span>Gruppen</a></li>
                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: unlock"></span>Rechte</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href=""><span class="uk-margin-small-right" uk-icon="icon: server"></span>Server</a></li>
             </ul>
          </div>
       </div>
      
        <div>
            <div class="uk-panel uk-margin-medium">
                <h3>UIkit</h3>
            </div>
            <div class="uk-card uk-card-default uk-card-body">
                <p>Content #1<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="uk-card uk-card-default uk-card-body">
                <p>Content #2<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="uk-card uk-card-default uk-card-body">
                <p>Content #2<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="uk-card uk-card-default uk-card-body">
                <p>Content #2<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>

    </div>
</div>
...