使用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日

相关文章

  • 使用CSS3的rem属性制作响应式页面布局的要点解析

    下面就是使用CSS3的rem属性制作响应式页面布局的要点解析攻略: 1. 什么是rem属性 rem是CSS3新增的一个相对单位,其值相对于根元素(html)的字体大小而定。通俗来说,1rem等于根元素(html)的字体大小。比如,如果当前页面的根元素(html)的字体大小为16px,则1rem等于16px。 2. 使用rem属性制作响应式页面布局的要点 2.…

    css 2023年6月9日
    00
  • Vue-cropper 图片裁剪的基本原理及思路讲解

    Vue-cropper是一款基于Vue.js的图片裁剪组件,实现了图片的裁剪、拖动、旋转、缩放等功能。其基本原理和思路如下: 加载图片使用HTML5的File API来加载需要裁剪的图片。用户需要选择需要裁剪的图片,通过input标签的file类型,使用户选择图片之后,触发change事件,通过event.target.files[0]获取到文件对象,进而使…

    css 2023年6月10日
    00
  • CSS 学习心得

    CSS 学习心得 什么是 CSS? CSS(Cascading Style Sheets,层叠样式表)是一种用于定义网页内容样式和外观的语言。 CSS 的基本语法 CSS 的语法是由选择器和声明块组成的: 选择器 { 声明1; 声明2; … 声明N; } 其中,选择器用于选中要应用样式的 HTML 元素,声明块由一个或多个声明组成,每个声明由一个属性和一…

    css 2023年6月9日
    00
  • CSS中cursor属性的鼠标样式明细

    CSS中的cursor属性用于设置鼠标在元素上的样式,可以通过特定的关键词来指定不同的鼠标样式。 常用的鼠标样式 以下是常用的一些鼠标样式及其关键词: auto:默认状态,浏览器自动根据上下文决定显示什么样式 pointer:小手光标,用于链接、按钮等可以点击的元素 default:箭头样式,用于默认状态下的鼠标 text:I型光标,用于文本内容区域 mov…

    css 2023年6月10日
    00
  • css布局模型全面了解

    CSS布局模型全面了解 1. 盒模型 盒模型是CSS布局的基础,它指的是在页面中的每个HTML元素都被看做一个矩形的盒子,并分为几个部分: content:元素的正文内容 padding:内边距 border:边框 margin:外边距 div { width: 200px; height: 200px; border: 1px solid black; p…

    css 2023年6月10日
    00
  • CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

    好的!以下是详细讲解“CSS实现背景图尺寸不随浏览器缩放而变化的两种方法”的完整攻略。 背景 在网页设计中,背景图是很重要的一个元素,可以帮助页面更好的表现和展示内容。但是,不同浏览器的尺寸和设备有所不同,难以在任何设备屏幕上显示完整的背景图,特别是在响应式设计中,这个问题变得更为严重。所以,如何让背景图在不同屏幕尺寸上显示完整,就成为了一个值得思考的问题。…

    css 2023年6月9日
    00
  • CSS经典技巧十则

    “CSS经典技巧十则”收录了多种经典的CSS技巧,对于Web前端开发者来说非常有用。下面将对这些技巧进行详细的讲解。 技巧一:实现垂直居中的三种方法 在CSS中,实现垂直居中一直是一个难点。这里介绍三种常用的方法: 方法一:使用table-cell .container { display: table; height: 200px; width: 200p…

    css 2023年6月9日
    00
  • jquery动画效果学习笔记(8种效果)

    下面我将详细讲解“jquery动画效果学习笔记(8种效果)”的完整攻略。该攻略主要介绍了使用 jQuery 实现常见的动画效果,它包含了以下 8 种效果: 淡入淡出效果 滑动效果 渐变效果 高度宽度变化效果 动画排队效果 动画回调函数 动画执行速度控制 动态图像缩放效果 淡入淡出效果 淡入淡出效果是指元素渐渐显现和消失的效果,可以使用 jQuery 的 fa…

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