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. SFDC Trigger里before和after的区别

    最近项目开始用Trigger来进行Validation Check.也知道可以通过配置Object里的Validation Rule来进行Check,但是项目想如果有Trigger里就都在Trigge ...

  2. Java 读取Word文本/段落格式属性

    本文介绍通过Java后端程序代码来读取Word文本和段落格式的方法. 本次测试环境如下: Word版本:2013 编译环境:IntelliJ IDEA2018 Work库:free spire.doc ...

  3. Elasticsearch扩展X-pack实施流程-实施

    Elasticsearch扩展X-PACK实施流程 elasticsearch5.2.1安装X-PACK,对ES集群进行监控,报警,安全验证,报告,图形化操作 注意 版本号需要固定,小版本都不能差,要 ...

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

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

  5. 如何获取canvas当前的缩放值

    项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给c ...

  6. Github Pages(io) + 域名重定向 (手把手教你搭建个人网站)

    好歹也成为了在读phd的人,拥有个人网站是个有排面有很必要的事儿~ 在这里利用Github Pages + 域名重定向,实现个人网站的光速搭建~ 1.0 Github Repositories 首先你 ...

  7. Java后端进阶-网络编程（Netty线程模型）

    前言 我们在使用Netty进行服务端开发的时候,一般来说会定义两个NioEventLoopGroup线程池,一个"bossGroup"线程池去负责处理客户端连接,一个"w ...

  8. 6. Mybatis resultMap

    resultMap 元素是MyBatis中最重要最强大的元素.它就是让你远离90%的需要从结果集中取出数据的JDBC代码的那东西,而且在一些情形下允许你做一些JDBC不支持的事情.事实上,编写相似于对 ...

  9. Summary: DOM modification techniques

    Modifying an existing element We covered various ways that you can modify aspects of an existing ele ...

  10. mac系统 PHP Nginx环境变量修改

    场景:php默认的环境变量不是我们实际工作中想要的 执行命令:which php 查看默认的php指向的目录 :  /usr/bin/php 修改· ~/.bash_profile 文件 添加php环 ...