jquery高防商城网站侧栏多级导航菜单效果

作者:袖梨 2022-11-14

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

虽然样式上仿的天猫,但主要是让大家了解下拉的样式结构。

页面内都有注释,如果对参数不了解,多alert一下,这个的js基本没什么特别的算法,主要是 在写这样下拉样式的,html 的结构,我觉得很不错,当然,天猫那个侧栏会复杂点,但原理是一样的,样式上可改性还算蛮高的。

参数直接调用说明:

代码如下 复制代码

$(window).p10({
a:$('激活二级栏目的按钮'),

b:$('二级栏目区域'),

c:$('二级栏目内的按钮'),

d:$('三级栏目区域')
});

使用这个插件 ,还是下载下来吧,因为需要 样式的支持,当然,样式很容易理解和改动的。


完整实例

代码如下 复制代码










  • javascript:void(0);' title='' >所有商品分类

  • 天猫

  • 京东

  • 一号店






服装/内衣/配件

鞋/箱包

服装/内衣/配件

鞋/箱包

服装/内衣/配件

鞋/箱包

服装/内衣/配件

鞋/箱包

服装/内衣/配件

鞋/箱包






品牌女装
新到商品
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤


品牌女装
新到商品
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤




品牌女装
新到商品
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤
连衣裙
T恤









$(window).p10({
a:$('.P10HMNav').eq(0),
b:$('.P10SubMenu'),
c:$('.P10SCTitle'),
d:$('.P10SCContent')
});



相关文章

精彩推荐