返回介绍

导航栏

发布于 2019-05-26 16:28:19 字数 3622 浏览 1171 评论 0 收藏 0

为导航栏定义不同风格的样式。

用法

导航栏组件包括导航栏本身及一个或多个导航菜单。

Class描述
.uk-navbar添加这个类到 <nav> 元素中,定义导航栏组件。
.uk-navbar-nav添加这个类到 <ul> 元素来创建导航。使用 <a> 元素作为列表中的菜单项。
.uk-active添加这个类到一个列表项中,对其应用选中的状态。
.uk-parent添加这个类来表示一个父级菜单项。

Code

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
<li class="uk-active"><a href="">...</a></li>
<li><a href="">...</a></li>
<li class="uk-parent"><a href="">...</a></li>
    </ul>
</nav>

导航栏翻转

添加 .uk-navbar-flip 类到一个 <div> 元素中,将其进行分组并将导航项对齐到导航栏右侧。

Code

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
    <li><a href="">...</a></li>
</ul>
    </div>
</nav>

导航栏副标题

为列表项中的 <a> 元素添加 .uk-navbar-nav-subtitle 类来表示一个副标题。使用 <div> 元素作为副标题本身。

Code

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
<li><a href="" class="uk-navbar-nav-subtitle">
    ...
    <div>...</div>
</a></li>
    </ul>
</nav>

内容

你还可以在导航栏中添加自定义的内容,如文本、图标、按钮、表单,甚至是一个拨动器。默认情况下,拨动器并没有附属 JavaScript。举例来说,可以为导航栏添加一个 抽屉组件 。

Class描述
.uk-navbar-content添加这个类到 <div> 元素中,使它作为一个自定义内容的容器。内容将被垂直居中。
.uk-navbar-brand添加这个类到一个 <a><div> 元素中,来表示你的品牌。
.uk-navbar-center添加这个类来居中你的导航栏内容或品牌。该元素必须为导航栏的最后一个子元素。
.uk-navbar-toggle添加这个类到一个 <a><div> 元素中,创建一个作为拨动开关的图标。
.uk-navbar-toggle-alt添加这个类来替换 拨动开关 默认的图标。

Code

<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

响应式可见性

要隐藏或显示导航栏中的某些项目,只需添加 效果组件 中的响应式可见性类。这是非常方便的,比如你想在移动设备中使用一个拨动器来触发导航。

Code

<nav class="uk-navbar">
    <ul class="uk-navbar-nav uk-hidden-small">...</ul>
    <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>
<div class="uk-offcanvas">
    ...
</div>

注意 在这个示例中,我们从 抽屉组件 中添加了一个侧边栏抽屉。

修饰

为了以不同的风格显示导航栏,只需添加修饰类。这些修饰类可以相互组合使用。

附着式的导航栏

添加 .uk-navbar-attached 类来优化附到视图顶部的导航栏样式。比如移除圆角。

Code

<nav class="uk-navbar uk-navbar-attached">...</nav>

带有下拉菜单的导航栏

导航栏可以包含 下拉菜单组件 中的下拉菜单。只需添加 .uk-dropdown-navbar 修饰类到下拉菜单中,它可以完美的融入到导航栏的样式中。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文