当前博客：22-快码FOF中文编程layui教学-组件：导航

263 次浏览【转载需注明来源】

收藏内容 (0) (0)

博客作者：【qiang】

个性签名：请输入个性签名___________

在做网站的时候，几乎每个网站都有导航，导航可以让用户快速的到达网站其它页面，并且让网站结构一目了然。

layui就内置了一个导航组件，这个导航组件能够基本实现大多数的导航功能，可以在基础导航进行优化达让导航更加美观，便捷。

并且它有横向导航，垂直导航，侧边导航3种形态。

下面是横向导航组件代码示例：

<无序列表 类名="lay-导航">
	<列表项 类名="lay-导航-项目">
		<超链接 链接地址="">控制台<行内元素 类名="lay-徽章">9</行内元素></超链接>
	</列表项>
	<列表项 类名="lay-导航-项目">
		<超链接 链接地址="">个人中心<行内元素 类名="lay-徽章-圆点"></行内元素></超链接>
	</列表项>
	<列表项 类名="lay-导航-项目">
		<超链接 链接地址="">管理员</超链接>
		<描述列表 类名="lay-导航-子集">
			<描述列表项><超链接 链接地址="javascript:;">修改信息</超链接></描述列表项>
			<描述列表项><超链接 链接地址="javascript:;">安全管理</超链接></描述列表项>
			<描述列表项><超链接 链接地址="javascript:;">退出登录</超链接></描述列表项>
		</描述列表>
	</列表项>
</无序列表>

代码效果展示：

垂直导航代码示例：

<无序列表 类名="lay-导航 lay-导航-垂直">
	<列表项 类名="lay-导航-项目 lay-导航-选中项目">
		<超链接 链接地址="javascript:;">默认展开</超链接>
		<描述列表 类名="lay-导航-子集">
			<描述列表项><超链接 链接地址="javascript:;">选项1</超链接></描述列表项>
			<描述列表项><超链接 链接地址="javascript:;">选项2</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">跳转</超链接></描述列表项>
		</描述列表>
	</列表项>
	<列表项 类名="lay-导航-项目">
		<超链接 链接地址="javascript:;">解决方案</超链接>
		<描述列表 类名="lay-导航-子集">
			<描述列表项><超链接 链接地址="">移动模块</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">后台模版</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">电商平台</超链接></描述列表项>
		</描述列表>
	</列表项>
	<列表项 类名="lay-导航-项目"><超链接 链接地址="">产品</超链接></列表项>
	<列表项 类名="lay-导航-项目"><超链接 链接地址="">大数据</超链接></列表项>
</无序列表>

代码效果展示：

侧边导航代码示例：

<无序列表 类名="lay-导航 lay-导航-垂直 lay-导航-侧边">
	<列表项 类名="lay-导航-项目 lay-导航-选中项目">
		<超链接 链接地址="javascript:;">默认展开</超链接>
		<描述列表 类名="lay-导航-子集">
			<描述列表项><超链接 链接地址="javascript:;">选项1</超链接></描述列表项>
			<描述列表项><超链接 链接地址="javascript:;">选项2</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">跳转</超链接></描述列表项>
		</描述列表>
	</列表项>
	<列表项 类名="lay-导航-项目">
		<超链接 链接地址="javascript:;">解决方案</超链接>
		<描述列表 类名="lay-导航-子集">
			<描述列表项><超链接 链接地址="">移动模块</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">后台模版</超链接></描述列表项>
			<描述列表项><超链接 链接地址="">电商平台</超链接></描述列表项>
		</描述列表>
	</列表项>
	<列表项 类名="lay-导航-项目"><超链接 链接地址="">产品</超链接></列表项>
	<列表项 类名="lay-导航-项目"><超链接 链接地址="">大数据</超链接></列表项>
</无序列表>

代码效果展示：