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. 网络对抗技术Exp2-后门原理与实践

    后门概念 后门就是不经过正常认证流程而访问系统的通道. 哪里有后门呢? 编译器留后门 操作系统留后门 最常见的当然还是应用程序中留后门 还有就是潜伏于操作系统中或伪装为特定应用的专用后门程序. 下面是 ...

  2. C# net Emgu.CV.World 人脸识别 根据照片将人脸抠图出来。

    Emgu.CV.World 人脸识别 根据照片将人脸抠图出来.效果如下: 应用范围:配合摄像头,抓取的图像,抠出人脸照片,这样人脸照片的大小会很小,传输速度快.这样识别速度也就快. 目前我正在做百度人 ...

  3. 使用 EPPlus 封装的 excel 表格导入功能 (.net core c#)

    使用 EPPlus 封装的 excel 表格导入功能 前言 最近做系统的时候有很多 excel导入 的功能,以前我前后端都做的时候是在前端解析,然后再做个批量插入的接口 我觉着这样挺好的,后端部分可以 ...

  4. 结对作业-stage_1

    教学班 罗杰.任建班周五3.4节 gitlab项目地址 Here it is. 成员 周远航(3004) 李辰洋(3477) 结对编程体验 感受 在前期设计时,两人合作可以收集更多资料,提供更多想法, ...

  5. OOJML系列总结

    目录 0x0 JML理论相关 0.0 概念及作用 0.1 JML语法学习 0x1 使用openJml以及JMLUnitNG 1.0 使用openjml 1.1使用JMLUnitNG 0x2 作业架构设 ...

  6. Spring (二）SpringIoC和DI注解开发

    1.Spring配置数据源 1.1 数据源(连接池)的作用 数据源(连接池)是提高程序性能出现的 事先实例化数据源,初始化部分连接资源 使用连接资源时从数据源中获取 使用完毕后将连接资源归还给数据源 ...

  7. 深入剖析共识性算法 Raft

    一. Raft简介 1.1 Raft简介 Raft 是一种为了管理日志复制的分布式一致性算法.Raft 出现之前,Paxos 一直是分布式一致性算法的标准.Paxos 难以理解,更难以实现.Raft ...

  8. linux 查看cpu型号、memory

    查看CPU信息(型号) [root@TX-220-60-211 supdev]# cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 40 In ...

  9. 另类的曲线方式定时Start up/Shut down VM 的解决方案

    一,引言 最近看到一位小兄弟在为了做 Azure 云虚拟机的自动关机开启 在群里求助,最后也不知道结果咋样了. 至于他提到的利用 Automation Account 我是没有接触过,并且也没有看资料 ...

  10. 【MQ中间件】RabbitMQ -- RabbitMQ死信队列及内存监控(4)

    1.RabbitMQ TTL及死信队列 1.1.TTL概述 过期时间TTL表示可以对消息设置预期的时间,在这个时间内都可以被消费者接收获取:过了之后消息将自动被删除.RabbitMQ可以对消息和队列设 ...