纯CSS打造的导航菜单(附jquery版)

好的。在这里，我将为您详细讲解“纯CSS打造的导航菜单(附jquery版)”的完整攻略。该攻略包含了该导航菜单的制作过程以及如何将其转化成jquery版的导航菜单。

制作纯CSS导航菜单

第一步：HTML结构

首先，我们需要创建一个含有ul和li元素的HTML结构。 代码如下：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻资讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

第二步：添加CSS样式

我们需要分别设置ul、li和a元素的样式。代码如下：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

nav a:hover {
  color: #f00;
}

第三步：制作下拉菜单

在导航菜单中加入下拉菜单，需要为含有子菜单的li元素添加.hover样式，并为子菜单中的ul元素设置.display-block样式。代码如下：

nav ul li.hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  padding: 10px;
  min-width: 160px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

nav ul ul li {
  display: block;
  margin: 10px 0;
}

nav ul ul a {
  font-size: 13px;
}

第四步：添加响应式设计

为了使导航菜单在手机和平板电脑上看起来更好，我们需要添加响应式设计。代码如下：

@media screen and (max-width: 767px) {
  nav ul {
    flex-wrap: wrap;
  }

  nav li {
    width: 50%;
  }

  nav a {
    display: block;
    padding: 10px 0;
    text-align: center;
  }

  nav ul ul {
    position: static;
    display: none;
    width: auto;
    margin: 0;
    box-shadow: none;
  }

  nav ul ul li{
    margin: 0;
  }
}

制作jquery版导航菜单

第一步：HTML结构

我们需要在HTML文件中添加jquery和导航菜单的HTML结构。代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻资讯</a>
      <ul>
        <li><a href="#">行业新闻</a></li>
        <li><a href="#">公司新闻</a></li>
        <li><a href="#">产品新闻</a></li>
      </ul>
    </li>
    <li><a href="#">产品展示</a>
      <ul>
        <li><a href="#">产品介绍</a></li>
        <li><a href="#">技术支持</a></li>
        <li><a href="#">客户案例</a></li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

第二步：添加CSS样式

我们需要添加CSS样式。代码如下：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin: 0 10px;
  position: relative;
}

nav a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

nav a:hover {
  color: #f00;
}

nav ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  padding: 10px;
  min-width: 160px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

nav ul ul li {
  display: block;
  margin: 10px 0;
}

nav ul ul a {
  font-size: 13px;
}

第三步：制作jquery版导航菜单

我们需要添加jquery代码，使其支持下拉菜单。代码如下：

$(function() {
  $('nav ul li').hover(function() {
    $(this).children('ul').stop().slideDown(200);
  }, function() {
    $(this).children('ul').stop().slideUp(200);
  });
});

上述代码在导航菜单的li元素上使用事件监听器来添加hover样式并使下拉菜单滑动呈现。

第四步：添加响应式设计

添加响应式设计的过程与纯CSS代码相同，代码如下：

@media screen and (max-width: 767px) {
  nav ul {
    flex-wrap: wrap;
  }

  nav li {
    width: 50%;
  }

  nav a {
    display: block;
    padding: 10px 0;
    text-align: center;
  }

  nav ul ul {
    position: static;
    display: none;
    width: auto;
    margin: 0;
    box-shadow: none;
  }

  nav ul ul li {
    margin: 0;
  }
}

示例说明

示例1

我们要为产品展示栏目的下拉菜单添加新的子菜单，产品介绍的子菜单还应该分为硬件产品和软件产品两个子菜单，如下：

<ul>
  <li><a href="#">产品展示</a>
    <ul>
      <li><a href="#">产品介绍</a>
        <ul>
          <li><a href="#">硬件产品</a></li>
          <li><a href="#">软件产品</a></li>
        </ul>
      </li>
      <li><a href="#">技术支持</a></li>
      <li><a href="#">客户案例</a></li>
    </ul>
  </li>
</ul>

上述代码添加了硬件产品和软件产品两个子菜单。

示例2

我们想要在菜单中添加一条新的主菜单，关于我们，应该位于联系我们的左侧，如下：

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻资讯</a>
    <ul>
      <li><a href="#">行业新闻</a></li>
      <li><a href="#">公司新闻</a></li>
      <li><a href="#">产品新闻</a></li>
    </ul>
  </li>
  <li><a href="#">产品展示</a>
    <ul>
      <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>

上述代码在菜单中添加了关于我们主菜单。