- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
导航菜单
为列表导航菜单定义不同的风格样式。
用法
使用这个组件,添加 .uk-nav
类到一个 <ul>
元素中。使用 <a>
元素作为列表中的菜单项。要对一个菜单项应用选中状态的效果,添加 .uk-active
类即可。
注意 默认情况下,导航菜单没有任何样式。这就是为什么要添加一些具有样式的修饰类,这是很重要的,在例子中我们使用了 .uk-nav-side
类。
Code
<ul class="uk-nav">
<li><a href="">...</a></li>
<li class="uk-active"><a href="">...</a></li>
</ul>
嵌套导航
你可以很容易向菜单导航添加任意数量的 <ul>
元素。
Class | 描述 |
---|---|
.uk-nav-sub | 在第一个嵌套的 <ul> 中添加这个类,使其拥有最佳的间距。 |
.uk-parent | 添加这个类来表示一个父菜单项。 |
.uk-nav-parent-icon | 给导航菜单添加这个类,可以使父菜单项增加图标。 |
Code
<ul class="uk-nav uk-nav-parent-icon">
<li class="uk-parent"><a href="">...</a>
<ul class="uk-nav-sub">
<li><a href="">...</a>
<ul>...</ul>
</li>
</ul>
</li>
</ul>
手风琴
默认情况下,子菜单项总是可见的。若要应用手风琴效果,只需给主 <ul>
元素添加 data-uk-nav
属性。当点击一个父菜单项时,会关闭已经展开的菜单项,每次只允许展开一个嵌套的菜单。若要避免这种情况,只需附加 {multiple:true}
到 data 属性。
Code
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
<li class="uk-parent">
<a href="">...</a>
<ul class="uk-nav-sub">
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</li>
</ul>
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
<a href="">...</a>
<ul class="uk-nav-sub">
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</li>
</ul>
标题和分隔线
为菜单项添加下面这些类中的一个,创建菜单项中的标题或分隔线。
Class | 描述 |
---|---|
.uk-nav-header | 添加这个类到一个 <li> 元素创建一个标题。 |
.uk-nav-divider | 添加这个类到一个 <li> 元素,在单独的菜单项之间创建一个分割线。 |
注意 你还可以给菜单项添加副标题。只需在菜单项的 <a>
元素里面创建一个 <div>
元素。
Code
<li class="uk-nav-header">...</li>
<li class="uk-nav-divider"></li>
样式修饰
这里有一些修饰类,根据使用对象的上下文赋予导航菜单适当的样式。
侧边栏导航菜单
添加 .uk-nav-side
类,将导航菜单放置到侧边栏、面板或者网页中任意其他位置。
Example
Nav side in panel
Markup
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title">...</h3>
<ul class="uk-nav uk-nav-side">...</ul>
</div>
下拉导航菜单
添加 .uk-nav-dropdown
类,将导航菜单放置到一个 下拉菜单组件 中的默认下拉菜单中。
Code
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">...</ul>
</div>
导航栏中的导航菜单
添加 .uk-nav-navbar
类,将导航菜单放置到一个 导航栏组件 中的导航栏下拉菜单中。
Code
<div class="uk-dropdown uk-dropdown-navbar">
<ul class="uk-nav uk-nav-navbar">...</ul>
</div>
抽屉组件中的导航菜单
添加 .uk-nav-offcanvas
类,将导航菜单放置到 抽屉组件 里的侧边栏弹出式画布中。
Code
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">...</ul>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论