手风琴菜单 AccdionMenu(原创)

所属分类:导航-垂直导航,手风琴菜单

 17525  76  查看评论 (4)
分享到微信朋友圈
X
手风琴菜单 AccdionMenu(原创) ie兼容12

更新时间:2020-12-18 22:26:44

更新说明:添加说明,修正在收起多级展开菜单时出现的卡顿现象是收起过程能平滑过渡收起!!!


更新时间:2020-12-17 21:44:50

更新说明:修正在收起多级展开菜单时出现的卡顿现象是收起过程能平滑过渡收起!!!


更新时间:2020-12-09 01:02:59

更新说明:修改菜单快速点击时滑动收展可能出现的bug。

补上一些菜单方法说明:

插件方法:

var menu=new Accordion('.menu');
menu.init(opts)//根据配置项重生成菜单
menu.getSelectNode()//获取选中节点
menu.getNode(id)//根据id获取节点
menu.getParentNode(node)//获取指定节点的父节点
menu.getData(asTree)//获取菜单数据数组,asTree是否返回树状形式数组
menu.getChildNodes(node,asTree,deep)//获取指定节点的子节点。node 指定节点;asTree 是否返回树状形式数组;deep 是否返回所有子孙节点

更新时间:2020-12-07 01:22:04

使用1:

html

<div id='menu'></div>

js

//var json=[...]
var opts = {
    idField: 'Id', //字段名
    parentField: 'ParentId', //父节点字段名
    nameField: 'MenuName', //节点显示文本字段名
    iconField: 'MenuIcon', //节点图标字段,如bootstrap等的字体图标类名
    sortName: 'Seq', //节点排序的字段名称
    sortOrder: 'asc', //节点排序方式asc/desc
    childrenField: 'children', //子节点字段名
    url: '', //url加载数据初始化菜单。优先以传参data数组数据初始化菜单,若不传参则以url方式加载初始化
    ajaxType: '', //请求类型,默认get
    ajaxData: '', //请求参数数据
    asTreeData: false, //菜单数组数据是否以树状数组展示
    data: json, //初始化菜单的数据,url和data共存时优先使用data
    indentStep: 1, //菜单层级缩进数值(单位em)
    startColor: '#18626b', //菜单开始背景色(HEX十六进制颜色码)
    endColor: '#2fb9ca', //菜单最终背景色(HEX十六进制颜色码)
    colorCount: '5', //开始至结束背景色过渡段数
    speed: 300, //滑动速度。菜单完成滑动展开/收缩所用时间(ms)
    onnodeclick: clickFn, //菜单节点点击
    onnodemouseenter: enterFn, //鼠标进入节点
    onnodemouseleave: leaveFn, //鼠标离开节点
    onmenuready: renderFn //菜单加载渲染完后
};
//Accordion("#menu",opts);
//new Accordion("#menu",opts);
$("#menu").accordion(opts);

使用2:

html

<div class="menu" idField="Id" parentField="ParentId" nameField="MenuName" iconField="MenuIcon"
   sortName="Seq" sortOrder="asc" childrenField="children" url="data/tree.json" ajaxType="get"
   ajaxData='{"name":"test"}' asTreeData="true" data="" indentStep="0.5" startColor="#000" endColor="#ccc"
   colorCount="4" speed="500" onnodeclick="clickFn" onnodemouseenter="enterFn" onnodemouseleave="leaveFn"
   onmenuready="renderFn">
</div>

js

//Accordion(".menu");
//new Accordion(".menu");
$('.menu').accordion();
相关插件-垂直导航,手风琴菜单

Css多级侧边栏导航

纯Css多级侧边栏导航
  垂直导航
 42589  394

jQuery后台左侧菜单导航

jQuery导航菜单 适用于后台网站侧边多级下拉导航菜单
  垂直导航
 113179  757

基于jQuery的垂直菜单特效

网站上常用的到的垂直菜单,基于jQuery的垂直菜单特效
  垂直导航
 40405  366

超酷的SVG左侧导航栏特效

超酷的SVG左侧导航栏特效(Cool SVG left navigation bar effects)
  垂直导航
 51559  610

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    得过且过的教主 0
    2022/9/5 16:25:06
    小桥流水 0
    2021/3/23 17:26:15
    上次更新好像把jQuery关联部分代码都删除了,不能配合jQuery扩展调用了,使用插件时直接js调用就行了,不必引用jQuery 回复
    咕噜 0
    2021/3/12 22:05:32
    优秀,这是我至今见到过最好的多级菜单!感谢作者分享! 回复
    cn80800 0
    2021/2/4 10:29:12
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复