cms菜单栏二级解决方案（js）

在做一个cms系统的界面时，设计师并未指定二级菜单的交互，于是我就任意发挥，做了一个我自认为符合常规逻辑的方案

如下图

  • 点击左上角收起按钮会收起 左侧菜单栏、中间栏左侧菜单栏中已经打开的二级菜单；同时右侧主体栏会填充剩余位置；

效果如下

  • 点击中间栏中部的收起按钮，将会收起中间栏；同时使右侧主体栏填充剩余位置

效果如下

  • 在此状态下，点击中间的展开按钮，将会展开左侧菜单栏

中间栏；同时右侧主体会自动适应为合适大小，效果如图1

  • 在此状态下，点击左上角的展开按钮，将会展开左侧菜单栏；同时右侧主体会自动适应为合适大小，效果如上图
  • 在左侧菜单栏折叠时，用户如需展开其子菜单折叠，那么左侧菜单栏也会随之展开；同时右侧主体也会自动适应大小

cms菜单栏二级折叠与交互解决方案（js）（1）的更多相关文章

  1. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  2. UNITY3D与iOS交互解决方案

    原地址:http://bbs.18183.com/thread-456979-1-1.html 本帖最后由 啊,将进酒 于 2014-2-27 11:17 编辑 “授人以鱼,不如授人以渔”,以UNIT ...

  3. 菜单栏展开和收起效果(纯js)

    2014年6月25日 15:36:29 需要关注的是: 1.用cookie保存用户当前点击的菜单项,不打扰后端代码 2.通过数学计算得到要显示和隐藏的div 3.点击事件是动态绑定到a标签上的,因此当 ...

  4. aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】

    后台调用 js 方法 前台调用后台方法与变量:  后台被调用的方法必须是public 或 protected 后台被调用的方法必须是静态的static 方法一:通过WebService来实现 步骤: ...

  5. 移动应用滑动屏幕方向判断解决方案,JS判断手势方向

    问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...

  6. JS与OC交互，JS中调用OC方法(获取JSContext的方式)

    最近用到JS和OC原生方法调用的问题,查了许多资料都语焉不详,自己记录一下吧,如果有误欢迎联系我指出. JS中调用OC方法有三种方式: 1.通过获取JSContext的方式直接调用OC方法 2.通过继 ...

  7. PDA手持终端扫描条码开单打印一体 结合后台电脑系统 数据同步交互解决方案

    PDA通过扫描商品条码移动开单,实现便携式办公,伴随式销售,PDA能通过WIFI无线局域网.GPRS互联网直接与主机连接,让公司业务人员能随时随地了解公司产品信息,直接扫描商品条码,进行开单.入库.库 ...

  8. 小程序组件交互 -- 传入js

    1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...

  9. easyUI使用datagrid-detailview.js实现二级列表嵌套

    本文为博主原创,转载请注明: 在easyUI中使用datagrid-detailview.js可快速实现二级折叠列表,示例如下: 注意事项: 原本在谷歌浏览器进行示例测试的,url请求对应的json文 ...

随机推荐

  1. Redis实战篇（三）基于HyperLogLog实现UV统计功能

    如果现在要开发一个功能: 统计APP或网页的一个页面,每天有多少用户点击进入的次数.同一个用户的反复点击进入记为 1 次,也就是统计 UV 数据. 让你来开发这个统计模块,你会如何实现? 如果统计 P ...

  2. java例题_01 不死神兔！

    1 /*1 [程序 1 不死神兔] 2 题目:古典问题:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 3 程 ...

  3. JS基础学习第二天

    类型转换 类型转换就是指将其他的数据类型,转换为String Number 或 Boolean 转换为String 方式一(强制类型转换): 调用被转换数据的toString()方法例子:var a ...

  4. 算法：第一节课Master定理

    1.ctex:要求用Tex编辑器进行作业的书写 2.与东大本科有差距,还需要多点努力才行. 3. 4.考试不考概念 5. 6.时间复杂度和空间复杂度 7.算法好坏的评价标准 8.基本运算 9.时间复杂 ...

  5. 在一些64位的glibc的payload调用system函数失败问题

    在一些64位的glibc的payload调用system函数失败问题 当我在做题的时候就发现一个奇怪的事情,我在ubuntu16.04运行成功的exp在ubuntu 18.04却报出了timeout: ...

  6. GoF设计模式合集

    1 概述 这篇文章是对GoF23种设计模式+1种非GoF模式的合集,由笔者自己的笔记整理而来,每个模式都详细描述了步骤,角色等,以及使用Java实现的具体的例子. 2 基础 设计模式概述 UML与面向 ...

  7. Periodic Strings UVA - 455

    ​ A character string is said to have period k if it can be formed by concatenating one or more repet ...

  8. k8s kubernetes 集群 证书更新操作

    转载自https://www.cnblogs.com/kuku0223/p/12978716.html 1. 各个证书过期时间 /etc/kubernetes/pki/apiserver.crt #1 ...

  9. 分布式锁的实现之 redis 篇

    为什么需要分布式锁 引入经典的秒杀情景,100件商品供客户抢.如果是单机版的话,我们使用synchronized 或者 lock 都可以实现线程安全.但是如果多个服务器的话,synchronized ...

  10. Hyperledger Fabric2.3环境搭建

    采用Ubuntu系统下搭建 HyperledgerFabric2.3 环境 安装GoLang 下载golang安装包 https://studygolang.com/dl 下载完成后解压,移到/usr ...