SSM整合之企业级后台管理系统(11) - 实现主页中的顶部菜单和左侧菜单

本文详细讲解了如何在SSM整合的后台管理系统中实现主页的顶部菜单和左侧菜单,包括菜单栏效果演示、顶部菜单和左侧菜单的实现,以及菜单的联动原理。通过后台动态获取用户菜单并渲染到前端,实现菜单点击时加载对应子菜单的功能。
摘要由CSDN通过智能技术生成

前面的教程和大家一起学习了系统登录部分的开发,登录之后呢我们需要展示管理平台的主页,通常,管理系统的主页是这样布局的:

  • 顶部:基本包括系统名称、主功能菜单、用户名称和头像
  • 中间部分:左侧是主功能菜单下的子菜单,右侧是子菜单对应的页面
  • 底部:  技术支持信息,也就是开发者给自己打的广告😄

上面说的这种布局模式其实就是边界布局(Border Layout)。也就是,下面截图这个样子:

接下来,我们就一起来学习一下如何实现主页中的顶部和左侧菜单吧

一、菜单栏效果演示

菜单部分最终的效果是,点击顶部菜单,相应的子菜单会在左侧加载出来;点击左侧的菜单,正文部分会加载该部分页面。无图言卵,顶部菜单和左侧菜单栏的实现后效果:

二、实现顶部菜单(一级菜单)

在介绍代码实现之前,我们先来思考一下顶部菜单实现的原理。

首先,我们页面中加上一个<ul>用来展示菜单内容,在index页面加载时调用initTopMenu()函数初始化该<ul>。那菜单的内容从哪里来呢?页面上写死吗?当然不行啦,不用的用户登录进来需要显示不同的菜单,所以,我们需要从后台返回当前登录用户的菜单选项。当我们点击顶部菜单时,switchMenu()函数响应点击事件并加载该菜单的子菜单到页面左侧。

1、index.jsp中<body>元素中加上<header>,header中包含了一个id为"nav-left"的<ul>用来展示顶部菜单:

<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <a href="javascript:void(0);" class="navbar-brand" id="navbar-brand">OMS System </a>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值