UIkit nav学习记录

nav是什么？

导航

如何创立一个导航？

在ul元素里添加一个uk-nav的类可以创建导航。

<ul class="uk-nav">
    <li ><a href="">item1</a></li>
    <li ><a href="">item2</a></li>
    <li ><a href="">item2</a></li>
</ul>

如图

image.png

侧边栏导航（面板里的导航）

可以先创建一个侧边的面板，然后把nav嵌套在里边，如下。添加uk-nav-side表面是侧边栏导航。

<div class="uk-panel uk-panel-box">

    <h3 class="uk-panel-title">Nav</h3>
    <ul class="uk-nav uk-nav-side">
        <li ><a href="">item1</a></li>
    <li ><a href="">item2</a></li>
    <li ><a href="">item2</a></li>
    </ul>

</div>

结果

image.png

抽屉中的导航

如下先建立一个激活抽屉的按钮。
接下来建立遮罩，uk-offcanvas
之后建立抽屉uk-offcanvas-bar

<!-- This is a button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">canvas</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-navbar">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>
</div>

结果

image.png

参考

导航菜单 - UIkit 中文文档