学习怎么写jquery插件之N级导航栏(第二版)
学习如何写jquery插件之N级导航栏(第二版)
这是个基于jquery的N级导航栏插件
是我学习练手之用。。。。不完善的地方请各位大神多多指导。。。。
另外求问: 这样的插件还用哪方便可以扩展?
求问2: 感觉样式太丑。。。求好点的建议。。。
第一版可看这个地址
第一版地址
根据wz_307的建议,在第一版上做了调整,使用json来创建导航栏菜单,调用更加方便,只要懂得json数据格式就可以。。。
html:
调用方式:
显示:
另一种显示方式:
要使用第二种显示方式的只需在调用是加上如下参数:
送上下载地址。。。欢迎交流学习。。。
http://download.csdn.net/detail/u011559804/6842875
------解决方案--------------------
既然是导航,你用js来弄就是错误的,对seo大大的影响
你应该做成ul之类嵌套的,用js解析下
这是个基于jquery的N级导航栏插件
是我学习练手之用。。。。不完善的地方请各位大神多多指导。。。。
另外求问: 这样的插件还用哪方便可以扩展?
求问2: 感觉样式太丑。。。求好点的建议。。。
第一版可看这个地址
第一版地址
根据wz_307的建议,在第一版上做了调整,使用json来创建导航栏菜单,调用更加方便,只要懂得json数据格式就可以。。。
html:
<div id="div" class="simpleNavigation"></div>
调用方式:
var menu = [
{
"menu": "主页",
"sub1": [
{
"sub1": "主页1",
"href": "http://www.baidu.com"
},
{
"sub1": "主页2",
"sub2": [
{
"sub2": "主页21",
"sub3": [
{
"sub3": "主页211",
"sub4": [
{
"sub4": "主页2111",
}
]
},
{
"sub3": "主页212",
}
]
},
{
"sub2": "主页22",
"sub3":[
{
"sub3": "主页221",
"href": "http://www.sina.com",
"target": "_blank",
},
{
"sub3": "主页222"
}
]
}
]
}
]
},
{
"menu": "公司介绍",
"sub1":[
{
"sub1":"公司介绍1",
}
]
},
{
"menu": "所获荣誉",
"href": "http://www.",
},
{
"menu": "联系我们"
}
];
$("#div").simpleNavigation({
menu:menu,
});
显示:
另一种显示方式:
要使用第二种显示方式的只需在调用是加上如下参数:
$("#div").simpleNavigation({
substyle:"horizontal", //substyle为horizontal时 显示为第二种方式
menu:menu,
});
送上下载地址。。。欢迎交流学习。。。
http://download.csdn.net/detail/u011559804/6842875
------解决方案--------------------
既然是导航,你用js来弄就是错误的,对seo大大的影响
你应该做成ul之类嵌套的,用js解析下