使用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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css隐藏移动端滚动条并且ios上平滑滚动的方法

    当开发移动端应用时,我们经常需要在页面上隐藏滚动条,并且保证在iOS设备上的平滑滚动体验。下面是一些实现这一目标的方法: 方法1:使用CSS样式隐藏滚动条 通过修改CSS样式,我们可以很容易地隐藏滚动条。下面是如何实现这一点: /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webki…

    css 2023年6月10日
    00
  • 对CSS3选择器的研究(详解)

    对CSS3选择器的研究(详解) 1. CSS3选择器简介 CSS3选择器是描述样式如何应用于HTML文档中不同元素的一种机制。选择符使HTML文档和样式表关联在一起。选择器用于选择您希望应用样式表规则的HTML元素。 2. CSS3选择器分类 CSS3选择器主要分为以下几类: 2.1 元素选择器 最常用的选择器,通过元素名称选取HTML文档中的元素。例如: …

    css 2023年6月9日
    00
  • JS轮播图的实现方法

    实现 JavaScript 轮播图的方法有很多,下面将介绍其中一种常见的轮播图实现方法。 利用 HTML、CSS、JavaScript 实现轮播图 HTML 结构 轮播图的 HTML 结构需要两个主要的部分: 包含轮播图片的容器,比如 div,在这个容器内部有多个用于展示图片的 img 元素,这些 img 元素可以通过 CSS 的方式来控制排列。 突出显示当…

    css 2023年6月10日
    00
  • js html5 css俄罗斯方块游戏再现

    以下是详细的js html5 css俄罗斯方块游戏再现攻略: 1.前置知识准备 在开始实现俄罗斯方块游戏前,需要掌握HTML5、CSS、JavaScript等前端技术。特别是JavaScript中的面向对象编程、事件响应等知识。同时,也需要掌握Canvas绘图技术。 2.实现思路 俄罗斯方块游戏的基本思路是:方块下落、方块移动、方块旋转、方块消除等操作。因此…

    css 2023年6月9日
    00
  • 纯CSS定制文本省略的方法大全

    在网页设计中,经常需要对文本进行省略处理,以便在有限的空间内显示更多的内容。在CSS中,可以使用多种方法来实现文本省略,本攻略将介绍一些常用的方法。 1. 使用text-overflow属性 可以使用text-overflow属性来控制文本的省略方式,例如: <p class="ellipsis">这是一段需要省略的文本,这是…

    css 2023年5月18日
    00
  • CSS3 @keyframes简单动画实现

    下面是关于“CSS3 @keyframes简单动画实现”的完整攻略。 什么是@keyframes 在介绍“CSS3 @keyframes简单动画实现”之前,需要先了解一下@keyframes的概念。简单来说,@keyframes是CSS3引入的用于定义动画的规则,通过在其中定义一系列关键帧,来实现CSS动画效果。 我们可以通过@keyframes来定义动画的…

    css 2023年6月9日
    00
  • 怎样对齐文本框和图像(image)按钮实现三点一线

    对齐文本框和图像按钮实现三点一线是一种常见的前端技巧,可以帮助开发者实现更加美观的页面布局。本文将提供一些关于如何对齐文本框和图像按钮实现三点一线的方法,包括使用 CSS 和 JavaScript 的示例说明。 使用 CSS 使用 CSS 对齐文本框和图像按钮实现三点一线的步骤如下: 创建一个包含文本框和图像按钮的 div 元素,并设置其 position …

    css 2023年5月18日
    00
  • webpack高级配置与优化详解

    Webpack高级配置与优化详解 什么是Webpack Webpack是一个现代的Javascript应用程序的静态模块打包器,它以模块为单位进行打包,能够把多个模块按照依赖关系进行合并成一个或多个文件。 Webpack具有众多的特性,包括开箱即用的支持各种常见模块类型、插件系统和强大的自定义配置等。它通常被用于构建现代化的前端应用,如单页面应用(SPA)。…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部