顶部菜单和左右侧菜单在网页程序中的实现

在Web应用开发过程中，导航菜单的实现一直是必不可少的。通常菜单的表现形式上用两种：顶部菜单和左右侧菜单。不管是顶部菜单还是左右侧菜单，都是以层级形式，一步步引导用户进行操作和使用。本文将介绍顶部菜单和左右侧菜单在网页程序中的实现。

Element的NavMenu 导航菜单为网站提供导航功能的菜单。导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。具体代码如下图所示：

实现代码

运行程序，在浏览器中可以看到如下运行效果：

运行效果

导航菜单默认为垂直模式，通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。代码如下图所示：

实现代码

运行程序，在浏览器中可以看到如下运行效果：

运行效果