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. Hive中静态分区和动态分区总结

    目录 背景 第一部分 静态分区 第二部分 动态分区 第三部分 两者的比较 第四部分 动态分区使用的问题 参考文献及资料 背景 在Hive中有两种类型的分区:静态分区(Static Partitioni ...

  2. CQGUI框架之样式管理

    大家好,我是IT文艺男,来自一线大厂的一线程序员 今天给大家讲解基于C++/Qt的CQGUI框架的样式管理实现. 在Qt平台,实现窗口/控件美化或者自定义效果,有如下两种方式 重绘 样式 对于重绘,我 ...

  3. 【SqlServer】管理全文索引（FULL TEXT INDEX）

    Sql Server中的全文索引(下面统一使用FULLTEXT INDEX来表示全文索引),是一种特定语言搜索索引功能.它和LIKE的不一样,LIKE主要是根据搜索模板搜索数据,它的效率比FULLTE ...

  4. 再学dockerfile

    前言 docker的系统学习可以看我这篇博文:https://www.cnblogs.com/zisefeizhu/p/11298818.html 有非常详细的讲解 容器现在都是用kubernetes ...

  5. js 日期加减

    加: console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间 console.log(moment().add(10 ...

  6. 研发效率破局之道 Facebook工作法

    如果你问中国和美国互联网公司都有什么差别,很多人会回答:低效加班文化.最近爆出的996大讨论,通过糙快猛打拼和996加班去抢占市场获得机会的成功案例越来越少.至此,只有提高效能才是出路. 由于软件开发 ...

  7. Linux保护机制和绕过方式

    Linux保护机制和绕过方式 CANNARY(栈保护) ​ 栈溢出保护是一种缓冲区溢出攻击缓解手段,当函数存在缓冲区溢出攻击漏洞时,攻击者可以覆盖栈上的返回地址来让shellcode能够得到执行.用C ...

  8. 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象

    1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...

  9. JAVAEE_03_HTTP

    HTTP\HTTPS\TCP HTTP协议 什么是HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wi ...

  10. Day09_43_Set集合_HashSet_02（HashCode方法 与 equals方法 ）

    HashSet - 向Hash表中添加元素的过程? 1. 先调用将要被存储的值key的HashCode方法得出Hash值,如果该Hash值在现有Hash表中不存在,那么直接加入元素. 2. 如果该Ha ...