我想在其容器外显示一个粘性 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
我真的很感激每一个答案
在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>