在如今移动互联网的时代，越来越多的用户使用移动设备访问网站，因此网站也需要有响应式设计，以确保在不同的设备上都能够提供最佳的用户体验。其中，导航菜单是一个非常重要的组件，因为它直接决定了网站的导航结构和用户体验。而CSS media查询则提供了一种非常有效的方式来实现响应式导航菜单。
响应式设计简介
响应式设计是指为了让网站能够适应不同的设备和屏幕大小而采取的一种设计策略。在响应式设计中，网站将根据不同的设备或屏幕大小显示不同的界面布局和元素尺寸，以确保在每个设备上都能够提供最佳的用户体验。
在响应式设计中，导航菜单是一个非常重要的组件，因为它直接决定了网站的导航结构和用户体验。一般来说，有两种主要的导航菜单设计方案：固定导航菜单和响应式导航菜单。
固定导航菜单是指在网站上固定位置显示的导航菜单，无论用户使用哪种设备访问网站，导航菜单始终会显示在同一个位置。这种设计方案适合于一些比较简单的网站，但在较复杂的网站中，固定导航菜单通常占用了屏幕的大部分空间，使得用户无法看到其他重要的内容。
响应式导航菜单则是一种更加灵活的导航菜单设计方案。当用户使用大屏幕设备访问网站时，响应式导航菜单将以水平方式显示；当用户使用小屏幕设备访问网站时，响应式导航菜单将以垂直方式显示，以节约屏幕空间并提高用户体验。
在本文中，我们将介绍如何使用CSS media查询实现响应式导航菜单。
CSS media查询简介
CSS media查询是一种CSS3特性，它允许开发人员根据媒体类型和媒体特性来定义不同的CSS规则。通过CSS media查询，我们可以针对不同的屏幕大小、屏幕方向、分辨率等进行不同的CSS设计。这就是响应式设计的基础。
CSS media查询依靠一个特殊的语法来进行定义。其基本语法如下：
@media mediatype and (mediafeature) {
/* CSS rules */
}在这个语法中，mediatype是媒体类型，比如screen表示屏幕，print表示打印，all表示所有类型。mediafeature则是媒体特性，比如width表示屏幕宽度，height表示屏幕高度，orientation表示屏幕方向等。而CSS规则则是在中括号中定义的。
下面是一个CSS media查询的例子：
@media screen and (max-width: 400px) {
body {
background-color: yellow;
}
}在这个例子中，当屏幕宽度不超过400像素时，body元素将背景颜色设置为黄色。
实现响应式导航菜单
现在，我们已经了解了响应式设计和CSS media查询的基本概念，接下来，我们将介绍如何使用CSS media查询实现响应式导航菜单。
布局结构
首先，我们需要定义导航菜单的布局结构。一般来说，响应式导航菜单的布局可以分为两种：水平布局和垂直布局。具体布局方式可以根据实际需要进行调整，但主要原则是保证导航菜单在不同的设备上都能够正常显示和使用。
以下是一个具体的导航菜单布局结构示例：
-- -------------------- ---- -------
-----
----
------ --------------------
------ --------------------
------ --------------------
------ --------------------
------ ----------------------
-----
------在这个布局结构中，我们使用了<nav>标签来定义导航菜单。<ul>和<li>标签则用来定义导航菜单的列表项。而每个列表项中又包含了一个<a>标签来定义导航链接。
在响应式设计中，导航菜单可以采用水平布局或垂直布局。如果采用水平布局，我们可以把导航菜单列表项设置为display: inline-block;来让它们在同一行中显示。如果采用垂直布局，我们则可以把导航菜单列表项设置为display: block;来让它们在不同行中显示。
状态切换
为了让响应式导航菜单具备响应式特性，我们需要在不同的设备上切换导航菜单的状态。一般来说，响应式导航菜单的状态可以分为两种：默认状态和展开状态。在默认状态下，导航菜单会以水平或垂直样式显示，用户可以通过点击菜单按钮或页面链接来浏览导航菜单的不同页面。在展开状态下，导航菜单的子菜单将以垂直方式显示，用户可以通过点击菜单按钮或链接来浏览不同的子菜单。
为了实现导航菜单状态的切换，我们可以使用下面的CSS样式：
-- -------------------- ---- -------
-- ---- --
--- -- -
-------- -----
---------- -----
-
-- ---- --
--- ---------- -
-------- ------
-在这个CSS样式中，我们采用了display: flex;属性来实现水平布局。而当导航菜单进入展开状态时，我们则采用了display: block;属性来实现垂直布局。
但是，为了让导航菜单在默认状态和展开状态之间进行切换，我们还需要添加一些JavaScript代码来处理用户的事件。
以下是一个代码示例：
-- -------------------- ---- -------
--- - ------------------------------
--------- - --------------------------------------
-------- - ------------------------------ -- -- ----
----------------------------------- ---------- -
--------------------------------
---
--- ---- - - -- - - ---------------- ---- -
------------------------------------- ---------- -
--------------------------------
---
-在这个示例代码中，我们通过监听导航按钮的点击事件来切换导航菜单的状态。在导航菜单进入展开状态时，我们添加了一个.visible的类名来实现垂直布局。而当导航菜单收缩时，我们则移除了这个类名。此外，在用户点击了导航菜单中的某个链接后，我们也需要移除这个.visible类名来关闭导航菜单。
示例代码
最后，我们来看一个完整的示例代码，它演示了如何实现响应式导航菜单。本代码可以在任何支持CSS3和JavaScript的浏览器中运行。
HTML代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
----- --------------- ---------------------------- -------------------
----- ---------------- -----------------
-------
------
---- ------------------
-- ------------------------------
-----
----
------ --------------------
------ --------------------
------ --------------------
------ --------------------
------ ----------------------
-----
------
------
------- -------------------------
-------
-------在这个HTML代码中，我们定义了一个包含导航按钮和导航菜单的.container容器，以及一个.nav-toggle按钮和一个<nav>标签。<ul>和<li>标签则用来定义导航菜单的列表项。而每个列表项中又包含了一个<a>标签来定义导航链接。
CSS代码
-- -------------------- ---- -------
-- ------ --
----------- -
-------- ------
------ ------
---------- ------
-------- ----- ------
------------ ------
-
-- ------ --
--- -
------ ------
------ -----
-
--- -- -
-------- --
------- --
----------- -----
-------- -----
---------- -----
---------------- ---------
-
--- -- -
------- - ------
-
--- -- - -
-------- ------
-------- ------
------ -----
---------------- -----
-
-- ----- --
------ ----------- ------ -
-- ------ --
----------- -
-------- ------
------ ------
---------- ------
-------- ----- ------
------------ ------
-
-- ------ --
--- -
-------- -----
--------- ---------
---- ----
----- --
------ --
----------- -----
-------- -----
----------- - --- --- -----------------
-
--- -- -
-------- ------
-
----------- -
-------- ------
-
--- -- -
------- --
-------------- --- ----- -----
-
--- -- - -
-------- ------
-------- ------
-------------- -----
-
-在这个CSS代码中，我们首先定义了导航按钮和导航菜单的CSS样式。其中，导航按钮使用了float: right;属性来实现右侧浮动，而导航菜单使用了display: flex;属性来实现水平布局。同时，我们也定义了一个针对窄屏幕设备的CSS媒体查询，以实现响应式导航菜单的收缩和展开。
JavaScript
最后，我们来看一下JavaScript代码。我们需要使用JavaScript代码来处理导航按钮的点击事件，以实现导航菜单状态的切换。以下是完整的JavaScript代码：
-- -------------------- ---- -------
--- - ------------------------------
--------- - --------------------------------------
-------- - ------------------------------ -- -- ----
----------------------------------- ---------- -
--------------------------------
---
--- ---- - - -- - - ---------------- ---- -
------------------------------------- ---------- -
--------------------------------
---
-在这个JavaScript代码中，我们通过监听导航按钮的点击事件来切换导航菜单的状态。在导航菜单进入展开状态时，我们添加了一个.visible的类名来实现垂直布局。而当导航菜单收缩时，我们则移除了这个类名。此外，在用户点击了导航菜单中的某个链接后，我们也需要移除这个.visible类名来关闭导航菜单。
总结
到这里，我们已经介绍了如何使用CSS media查询实现响应式导航菜单的全部过程。通过这个文章，我们了解到了响应式设计和CSS media查询的基本概念，以及使用JavaScript代码来实现导航菜单状态转换的具体方法。
响应式设计已经成为了现代Web开发中不可或缺的一部分。掌握了响应式设计的基本概念以及CSS media查询、JavaScript等技术细节，我们可以更加灵活地设计和开发具有响应式特性的Web应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1d3e1b5eee0b525928a9b