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: flex和align-items: center这种小技巧，排版也更舒服。

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