系列传送门
在web开发中,特别是后台管理工具的开发,经常用到纵向的多级菜单。
但是常用的Bootstrap仅能支持到2级菜单,对于3级及3级以上的菜单的显示,却无能为力。
下面我将使用另一个jQuery的菜单显示插件——metisMenu,结合项目,实现动态多级菜单显示。
image.png
用到的技术:
jQuery
jQuery-metisMenu插件 官网地址:http://mm.onokumus.com/index.html
Beetl模板引擎 官网地址:http://ibeetl.com/
Maven
Spring-boot或Nutz框架(本文以Spring-boot举例)
用到的开发工具:
intellij IDEA
开始
新建maven项目
image.png
image.png
剩下步骤直接next即可。
创建java目录,并设置为Sources Root:
image.png
创建demo包名和模板目录(存放beetl模板),最后项目目录结构如下:
image.png
添加spring-boot和beetl相关依赖
pom.xml:
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
4.0.0
BeetlMetisMenu
BeetlMetisMenu
war
1.0-SNAPSHOT
BeetlMetisMenu Maven Webapp
http://maven.apache.org
org.springframework.boot
spring-boot-starter-parent
1.5.9.RELEASE
junit
junit