1. 首页
  2. 编程语言
  3. Web开发
  4. jQuery图标导航菜单(适用于WAP/H5)

jQuery图标导航菜单(适用于WAP/H5)

上传者: 2025-06-01 08:45:58上传 ZIP文件 44.53KB 热度 4次

图标样式的 jQuery 手机导航菜单,结构清爽、交互轻便,适合做 WAP 站或者 H5 落地页的主导航。你只要用几个

标签,配上字体图标或者小图,就能快速搭出一个还挺顺眼的菜单出来。加点点击动画或者当前选中高亮,效果立马就有了。

图标样式的jQuery 手机导航菜单,结构清爽、交互轻便,适合做 WAP 站或者 H5 落地页的主导航。你只要用几个

标签,配上字体图标或者小图,就能快速搭出一个还挺顺眼的菜单出来。加点点击动画或者当前选中高亮,效果立马就有了。

jQuery 那套操作 DOM 的方法在这场景下用起来蛮顺手,比如用$('.menu-item')选中菜单项,再绑定个点击事件就行了。你看下面这段:

$('#menu .menu-item').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

逻辑直接、效果,写起来也轻松。

手机端的话,布局适配也别忘了。媒体查询resize监听,组合拳安排上:

@media (max-width: 767px) {
  #menu .menu-item {
    display: none;
  }
}
$(window).on('resize', function() {
  if ($(this).width() < 768) {
    // 显示为横向滑动菜单或折叠样式
  } else {
    // 显示为竖直排列
  }
});

手机屏幕本来就小,适配好了才能有好体验。

图标部分你可以用字体图标比如 Font Awesome,或者直接塞个,样式加上display: flexalign-items: center这种小技巧,排版也更舒服。

如果你想找成品代码参考,可以看看这些:

如果你做的是移动端站点,图标菜单用 jQuery 搭起来还是蛮高效的,结构也清楚,维护也方便。如果你用得比较多,可以考虑再配合点现代方案,比如 zepto 或者移动端 Vue 组件。

下载地址
用户评论