素材牛VIP会员

jQuery多级收缩边栏菜单

 所属分类:网页特效-导航菜单

 浏览:248次-  下载:0次-  评论:4次-  更新时间:2019-04-14
jQuery多级收缩边栏菜单兼容IE8
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:jQuery左侧菜单点击自动收缩,使用json数据格式
 标签:收缩多级菜单

详细介绍

使用方法

引用jquery和LeftNav.css,LeftNav.js

<link rel="stylesheet" type="text/css" href="css/LeftNav.css"/>
<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="js/LeftNav.js" type="text/javascript" charset="utf-8"></script>

html导航容器

<div class="left"></div>

js导航数据

var menu = {
    name: '', //名字
    level: '0',
    haschildren: true, //是否有子节点
    url: '#', //url路径
    isopen: false, //是否展开
    children: [{ //子节点
        name: '1',
        level: '1',
        haschildren: true,
        url: '',
        isopen: true,
        children: [{
            name: '1.1',
            level: '2',
            haschildren: true,
            url: '',
            isopen: true,
            children: [{
                name: '1.1.1',
                level: '3',
                haschildren: false,
                url: './14-1.html',
                isopen: true,
                children: ''
            }, {
                name: '1.1.2',
                level: '3',
                haschildren: false,
                url: '#',
                isopen: false,
                children: ''
            }]
        }]
    }]
}

调用插件

$.leftNav(".left",menu);

文件目录结构

  • ┝ 14-1.html
  • css
    • ┝ LeftNav.css
    • ┝ m-base.css
  • ┝ index.html
  • js
    • ┝ LeftNav.js

讨论这个素材(4)回答他人问题或分享使用心得会奖励牛币

he***ao  
2019年07月29日

这个重复下载还会扣分呀

huhuachuan:重复下载不扣积分
回复
qq***83  
2019年08月01日

很好很好很好

回复
qq***29  
2019年08月27日

刚好用到一个功能

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)