最近看瞭一篇關於JSON無限折疊菜單的文章 感覺寫的不錯，也研究瞭下代碼，所以用自己編碼方式也做瞭個demo 其實這樣的菜單項在我們網站上或者項目導航菜單項很常見的一種效果，特別是在一些電子商務網上上左側有分類是很常見的 或者說導航菜單有下拉效果也是很常見的，但是他們都是做死的 也就是頁面上代碼直接寫死的 然後實現那種下拉效果 而今天我們是通過JSON格式來自動生成的，或者可以說 要做這種折疊菜單效果 隻需要開發人員提供我們前端開發這種JSON格式或者我們前端可以定這樣的格式也就ok瞭 其他的都可以直接引用這個代碼進去。下面給大傢來分享下我的JS代碼！
下面我們來看看具體的效果如下：
下面我們來看看JSON個格式是個什麼樣的 格式如下：
var testMenu=[
{
"name": "一級菜單",
"submenu": [
{
"name": "二級菜單",
"url": ""
},
{
"name": "二級菜單",
"url": ""
}
]
},
{
"name": "一級菜單",
"submenu": [
{
"name": "二級菜單",
"url": ""
},
{
"name": "二級菜單",
"submenu": [
{
"name": "三級菜單",
"submenu": [
{
"name": "四級菜單",
"url": ""
}
]
},
{
"name": "三級菜單",
"url": ""
}
]
},
{
"name": "二級菜單",
"url": ""
},
{
"name": "二級菜單",
"submenu": [
{
"name": "三級菜單",
"submenu": [
{
"name": "四級菜單",
"url": ""
},
{
"name": "四級菜單",
"submenu": [
{
"name": "五級菜單",
"url": ""
},
{
"name": "五級菜單",
"url": ""
}
]
}
]
},
{
"name": "三級菜單",
"url": ""
}
]
},
{
"name": "二級菜單",
"url": ""
}
]
},
{
"name": "一級菜單",
"submenu": [
{
"name": "二級菜單",
"url": ""
},
{
"name": "二級菜單",
"url": ""
},
{
"name": "二級菜單",
"url": ""
}
]
}
];
隻要這種JSON格式就ok瞭 且上面的參數名 name submenu url是叫這樣的名字就可以瞭 ，然後直接可以在頁面HTML如下：
<p class="wrap-menu"></p>
CSS代碼如下：
<style type="text/css">
.wrap-menu { overflow:auto; width:300px; background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif}
.wrap-menu ul{ list-style:none; margin:0; padding:0;}
.wrap-menu ul li{ text-indent:3em; white-space:nowrap; }
.wrap-menu ul li h2{ cursor:pointer; height:100%; width:100%; margin:0 0 1px 0; font:12px/31px '宋體'; color:#fff; background:red;}
.wrap-menu ul li a{ display:block; outline:none; height:25px; line-height:25px; margin:1px 0; color:#1A385C; text-decoration:none;}
.wrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; height:7px; background:url(images/arrow.gif) no-repeat; border:none;}
.wrap-menu ul li img.unfold{ background-position:0 -9px;}
.wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;}
</style>
css樣式可以自己下 沒有關系！
JS代碼如下：
View Code
代碼初始化方式如下：
$(function(){
new AccordionMenu({menuArrs:testMenu});
});
大傢也可以自己定義上面的JSON格式 然後引用我的css JS 也可以實現自己想要的效果 如果css上有自己的風格 也可以改寫css樣式！切忌！JSON格式一定要和我上面的一樣 且名字也要叫一樣的 就ok！初始化 如上
new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定義的JSON格式。