033_NavMenu导航菜单

1. NavMenu导航菜单

1.1. NavMenu导航菜单为网站提供导航功能的菜单。

1.2. Menu Attribute

参数	说明	类型	可选值	默认值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折叠收起菜单(仅在mode为vertical时可用)	boolean	无	false
background-color	菜单的背景色(仅支持hex格式)	string	无	#ffffff
text-color	菜单的文字颜色(仅支持hex格式)	string	无	#303133
active-text-color	当前激活菜单的文字颜色(仅支持hex格式)	string	无	#409EFF
default-active	当前激活菜单的index	string	无	无
default-openeds	当前打开的sub-menu的index的数组	Array	无	无
unique-opened	是否只保持一个子菜单的展开	boolean	无	false
menu-trigger	子菜单打开的触发方式(只在mode为horizontal时有效)	string	hover / click	hover
router	是否使用vue-router的模式, 启用该模式会在激活导航时以index作为path进行路由跳转	boolean	无	false
collapse-transition	是否开启折叠动画	boolean	无	true

1.3. Menu Methods

方法名称	说明	参数
open	展开指定的sub-menu	index: 需要打开的sub-menu的index
close	收起指定的sub-menu	index: 需要收起的sub-menu的index

1.4. Menu Events

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的index, indexPath: 选中菜单项的index path
open	sub-menu展开的回调	index: 打开的sub-menu的index, indexPath: 打开的sub-menu的index path
close	sub-menu收起的回调	index: 收起的sub-menu的index, indexPath: 收起的sub-menu的index path

1.5. SubMenu Attribute

参数	说明	类型	可选值	默认值
index	唯一标志	string/null	无	null
popper-class	弹出菜单的自定义类名	string	无	无
show-timeout	展开sub-menu的延时	number	无	300
hide-timeout	收起sub-menu的延时	number	无	300
disabled	是否禁用	boolean	无	false
popper-append-to-body	是否将弹出菜单插入至body元素。在菜单的定位出现问题时, 可尝试修改该属性	boolean	无	一级子菜单: true / 非一级子菜单: false

1.6. Menu-Item Attribute

参数	说明	类型	可选值	默认值
index	唯一标志	string	无	无
route	Vue Router路径对象	Object	无	无
disabled	是否禁用	boolean	无	false

1.7. Menu-Group Attribute

参数	说明	类型
title	分组标题	string

2. NavMenu导航菜单例子

2.1. 使用脚手架新建一个名为element-ui-navmenu的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HorizontalNavMenu from '../components/HorizontalNavMenu.vue'
import VerticalNavMenu from '../components/VerticalNavMenu.vue'
import CollapseNavMenu from '../components/CollapseNavMenu.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/HorizontalNavMenu' },{ path: '/HorizontalNavMenu', component: HorizontalNavMenu },{ path: '/VerticalNavMenu', component: VerticalNavMenu },{ path: '/CollapseNavMenu', component: CollapseNavMenu }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建HorizontalNavMenu.vue

<template><div><h1>顶栏-适用广泛的基础用法</h1><h4>导航菜单默认为垂直模式, 通过mode属性可以使导航菜单变更为水平模式。另外, 在菜单中通过submenu组件可以生成二级菜单。Menu还提供了background-color、text-color和active-text-color, 分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。</h4><el-menu :default-active="activeIndex1" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu><div style="margin-top: 50px;"></div><el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></div>
</template><script>
export default {data () {return {activeIndex1: '1',activeIndex2: '1'}},methods: {handleSelect (key, keyPath) {console.log(key, keyPath)}}
}
</script>

2.4. 在components下创建VerticalNavMenu.vue

<template><div><h1>侧栏-垂直菜单, 可内嵌子菜单</h1><h4>通过el-menu-item-group组件可以实现菜单进行分组, 分组名可以通过title属性直接设定, 也可以通过具名slot来设定。</h4><el-row><el-col :span="3"><h5>默认颜色</h5><el-menu default-active="2" @open="handleOpen" @close="handleClose"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-col><el-col :offset="2" :span="3"><h5>自定义颜色</h5><el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-col></el-row></div>
</template><script>
export default {methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)}}
}
</script>

2.5. 在components下创建CollapseNavMenu.vue

<template><div><h1>折叠</h1><h4>collapse是否水平折叠收起菜单(仅在mode为vertical时可用)</h4><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"><el-radio-button :label="false">展开</el-radio-button><el-radio-button :label="true">收起</el-radio-button></el-radio-group><el-menu default-active="1-4-1" @open="handleOpen" @close="handleClose" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></div>
</template><style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style><script>
export default {data () {return {isCollapse: true}},methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)}}
}
</script>

2.6. 运行项目, 访问http://localhost:8080/#/HorizontalNavMenu

2.7. 运行项目, 访问http://localhost:8080/#/VerticalNavMenu

2.8. 运行项目, 访问http://localhost:8080/#/CollapseNavMenu

033_NavMenu导航菜单相关推荐

导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
js实现当前导航菜单高亮显示
2019独角兽企业重金招聘Python工程师标准>>> 为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有 ...
Javascript导航菜单13则
来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html 翻译:http://parandroid.com 下面为你准备了13 ...

033_NavMenu导航菜单

033_NavMenu导航菜单相关推荐

最新文章

热门文章