<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边栏插件</title>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/menu.css"/>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="container clear">
<div class="pull-left sidebar" id="menu">
<!-- 此处生成侧边栏代码 -->
</div>
<div class="pull-left content">
</div>
</div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="src/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="src/menu.js"></script>
<script type="text/javascript">
/* 设置目录层级 */
var items = [
{
// 配置目录项
title : "一级目录 一", // 配置 标题
// cls : "cls", // 配置 css class / 多个用空格隔开
// id : "id", // 配置 id
// href : "url", // 配置 a标签href
/* 配置子目录 */
subItems : [
{
title : "二级目录 一",
subItems : [
{
title : "三级目录 一",
subItems : [
{
title : "四级目录 一",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
}
]
},{
title : "四级目录 二",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
},{
title : "五级目录 四"
},{
title : "五级目录 五"
}
]
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 二",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 三",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
}
]
},{
title : "二级目录 二",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
},{
title : "二级目录 三",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
}
]
},
{
title : "一级目录 二",
subItems : [
{
title : "二级目录 一",
subItems : [
{
title : "三级目录 一",
subItems : [
{
title : "四级目录 一",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
}
]
},{
title : "四级目录 二",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
},{
title : "五级目录 四"
},{
title : "五级目录 五"
}
]
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 二",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 三",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
}
]
},{
title : "二级目录 二",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
},{
title : "二级目录 三",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
}
]
} ,
{
title : "一级目录 三",
subItems : [
{
title : "二级目录 一",
subItems : [
{
title : "三级目录 一",
subItems : [
{
title : "四级目录 一",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
}
]
},{
title : "四级目录 二",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
},{
title : "五级目录 四"
},{
title : "五级目录 五"
}
]
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 二",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 三",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
}
]
},{
title : "二级目录 二",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
},{
title : "二级目录 三",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
}
]
} ,
{
title : "一级目录 四",
subItems : [
{
title : "二级目录 一",
subItems : [
{
title : "三级目录 一",
subItems : [
{
title : "四级目录 一",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
}
]
},{
title : "四级目录 二",
subItems : [
{
title : "五级目录 一"
},{
title : "五级目录 二"
},{
title : "五级目录 三"
},{
title : "五级目录 四"
},{
title : "五级目录 五"
}
]
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 二",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
},{
title : "三级目录 三",
subItems : [
{
title : "四级目录 一"
},{
title : "四级目录 二"
},{
title : "四级目录 三"
}
]
}
]
},{
title : "二级目录 二",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
},{
title : "二级目录 三",
subItems : [
{
title : "三级目录 一"
},{
title : "三级目录 二"
},{
title : "三级目录 三"
}
]
}
]
}
];
/* */
$("#menu").menu({
width : 280, // menu宽度
title : "目录标题", // menu标题
items : items, // menu内容结构
fixed : true, // 是否滚动固定
offset : ".container" // 滚动范围 若fixed: false 则无需此项
});
</script>
</body>
</html>