使用jquery实现HTML5响应式导航菜单教程

使用jQuery实现HTML5响应式导航菜单是一种常见的开发技术，可以方便实现移动设备上的导航功能。下面就这个话题，提供一个详细的攻略。

准备工作

在开始实现之前，我们需要一个HTML5页面模板、一个CSS文件和最新版的jQuery库。可以通过下面的链接下载：

HTML5页面模板：https://www.w3schools.com/html/html5_template.asp
CSS文件：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
jQuery库：https://code.jquery.com/jquery-3.6.0.min.js

下载完成后，将它们放在同一个文件夹下，并在HTML文件中引用CSS文件和jQuery库。

创建导航菜单

在HTML中，我们可以使用ul和li标签来创建导航菜单。下面是一个例子：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

在CSS文件中，我们可以设置导航菜单的样式，例如设置菜单项的颜色、背景色、间距等。下面是一个例子：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  text-align: center;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

实现响应式导航菜单

接下来，我们需要使用jQuery为导航菜单添加响应式功能。我们需要在窗口大小改变时检测窗口宽度，如果小于一个特定值，则将导航菜单变成下拉菜单。下面是代码实现：

$(document).ready(function() {
  var $toggleButton = $("<button class='toggle-button'>☰</button>");
  var $nav = $("nav");

  $nav.find("ul").before($toggleButton);

  $toggleButton.click(function() {
    $(this).next().slideToggle();
  });

  $(window).resize(function() {
    if ($(window).width() > 600) {
      $nav.find("ul").show();
    } else {
      $nav.find("ul").hide();
    }
  });
});

以上代码使用jQuery库绑定一个按钮，当点击该按钮时，切换下拉菜单的状态。然后，当窗口大小改变时，动态修改导航菜单的显示状态。

示例一

下面是一个完整的实现示例：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Navigation Menu</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

CSS

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  text-align: center;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

.toggle-button {
  display: none;
  font-size: 30px;
  border: none;
  background-color: transparent;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 600px) {
  nav ul {
    display: none;
  }

  .toggle-button {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
  var $toggleButton = $("<button class='toggle-button'>☰</button>");
  var $nav = $("nav");

  $nav.find("ul").before($toggleButton);

  $toggleButton.click(function() {
    $(this).next().slideToggle();
  });

  $(window).resize(function() {
    if ($(window).width() > 600) {
      $nav.find("ul").show();
    } else {
      $nav.find("ul").hide();
    }
  });
});

运行这个示例，你会看到导航菜单变成了下拉菜单。

示例二

下面是另一个示例，展示如何在下拉菜单中添加子菜单：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Navigation Menu with Submenus</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Mobile Development</a></li>
            <li><a href="#">Desktop Development</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

CSS

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  text-align: center;
}

nav li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav ul ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  background-color: #333;
}

nav ul ul li {
  display: block;
}

nav ul ul a {
  padding: 10px;
}

.toggle-button {
  display: none;
  font-size: 30px;
  border: none;
  background-color: transparent;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 600px) {
  nav li {
    display: block;
  }

  nav ul ul {
    position: static;
    display: none;
  }

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

  nav ul li {
    display: block;
    margin-right: 0;
  }

  .toggle-button {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
  var $toggleButton = $("<button class='toggle-button'>☰</button>");
  var $nav = $("nav");

  $nav.find("ul").before($toggleButton);

  $toggleButton.click(function() {
    $(this).next().slideToggle();
  });

  $(window).resize(function() {
    if ($(window).width() > 600) {
      $nav.find("ul").show();
    } else {
      $nav.find("ul").hide();
    }
  });
});

运行这个示例，你会看到当鼠标悬停在Services上时，会出现一个下拉菜单。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用jquery实现HTML5响应式导航菜单教程 - Python技术站