jQuery和CSS仿京东仿淘宝列表导航菜单

下面是详细讲解“jQuery和CSS仿京东仿淘宝列表导航菜单”的完整攻略。

一、需求分析

1. 设计导航菜单，包含点击切换功能
2. 实现鼠标悬停展开子菜单
3. 导航菜单需要响应式布局

二、技术选型

1. HTML
2. CSS
3. jQuery

三、技术实现

1. HTML结构和CSS样式编写

1.1 HTML结构编写

<nav>
  <ul class="navList">
    <li><a href="#">首页</a></li>
    <li class="hasChild">
      <a href="#">电子产品</a>
      <ul class="subNavList">
        <li><a href="#">手机</a></li>
        <li><a href="#">电脑</a></li>
        <li><a href="#">平板</a></li>
      </ul>
    </li>
    <li><a href="#">女装</a></li>
    <li><a href="#">男装</a></li>
  </ul>
</nav>

1.2 CSS样式编写

.navList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  background-color: #f3f3f3;
  font-size: 16px;
}

.navList li {
  position: relative;
  height: 48px;
  line-height: 48px;
  padding: 0 10px;
  cursor: pointer;
}

.navList li:hover {
  background-color: #e3e3e3;
}

.hasChild:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -2px;
  border-top: 6px solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: none;
}

.subNavList {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  width: 240px;
  box-shadow: 0 0 3px #ddd;
}

.subNavList li {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}

.subNavList li:hover {
  background-color: #f3f3f3;
}

2. jQuery代码编写

$(document).ready(function() {
  // 子菜单显示隐藏
  $(".hasChild").hover(function() {
    $(this).find(".subNavList").stop().slideDown(300);
  }, function() {
    $(this).find(".subNavList").stop().slideUp(300);
  });

  // 导航菜单切换
  $(".navList > li > a").click(function(e) {
    e.preventDefault();
    $(this).parent().addClass("active").siblings().removeClass("active");
  });
});

3. 响应式布局

@media screen and (max-width: 768px) {
  .navList {
    flex-direction: column;
  }
  .navList li {
    width: 100%;
    text-align: center;
  }
  .hasChild:after {
    display: none;
  }
  .subNavList {
    position: static;
  }
}

四、示例说明

1. 京东导航菜单示例：https://codepen.io/xiangzongliang/pen/rJWvYx
2. 淘宝导航菜单示例：https://codepen.io/wsq7247/pen/yLyYZrg

以上两个示例均包含了完整的导航菜单代码和样式，可以参考和学习。