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. 【linux】驱动-6-总线-设备-驱动

    目录 前言 6. 总线-设备-驱动 6.1 概念 6.2 工作原理 6.3 总线 6.3.1 总线介绍 6.3.2 注册总线 6.4 设备 6.4.1 设备介绍 6.4.2 设备注册.注销 6.5 驱 ...

  2. 通过lms.samples熟悉lms微服务框架的使用

    经过一段时间的开发与测试,终于发布了Lms框架的第一个正式版本(1.0.0版本),并给出了lms框架的样例项目lms.samples.本文通过对lms.samples的介绍,简述如何通过lms框架快速 ...

  3. maven setting.xml 阿里云镜像 没有一句废话

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  4. Linux实战技能,教你轻松应对85%的使用场景

    在Linux实操的过程中,你在网上也能搜到一堆参考资料,但是看完之后还是会觉得似懂非懂,无法举一反三,从网上复制粘贴了事,则极有可能不起作用. 如果侥幸解决了特定的问题,也意识到自己需要系统学习一下 ...

  5. c# 定时启动一个操作、任务

    // 定时启动一个操作.任务 using System; using System.Collections.Generic; using System.Collections.ObjectModel; ...

  6. vue Element-ui 表格多选 修改选中行背景色

    实现的效果: 整体思路方式: 1.给获取到的数据添加自定义的className 2.在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className ...

  7. 吉特日化MES&WMS系统--三色灯控制协议转http

    关于硬件控制大部分都是使用CS客户端程序,一般连接口都是用网口,串口,USB口等,应用通讯是不支持HTTp协议操作的,而目前一般做技术的人员都在于BS开发,使用HTTP 协议,所以在硬件交互上可能觉得 ...

  8. 超详细网站博客域名和二级域名、子域名升级HTTPS免费申请SSL证书配置nginx指南

    随着互联网的飞速发展,我们的工作生活已经离不开互联网,HTTP虽然使用极为广泛, 但是存在不小的安全缺陷, 主要是其数据的明文传送和消息完整性检测的缺乏, 而这两点恰好是网络支付,网络交易等网站应用中 ...

  9. Java获取多线程执行结果方式的归纳与总结

    在日常的项目开发中,我们会经常遇到通过多线程执行程序并需要返回执行结果的场景,下面我们就对获取多线程返回结果的几种方式进行一下归纳,并进行简要的分析与总结. 一.Thread.join 在一些简单的应 ...

  10. 深度解析Django REST Framework 批量操作

    我们都知道Django rest framework这个库,默认只支持批量查看,不支持批量更新(局部或整体)和批量删除. 下面我们来讨论这个问题,看看如何实现批量更新和删除操作. DRF基本情况 我们 ...