前言
在响应式设计中，一个重要的组成部分就是可以适应不同屏幕尺寸的导航菜单。而 SASS 作为 CSS 预处理器，可以方便地实现响应式导航菜单。在本文中，我们将会学习如何使用 SASS 来创建一个适应多种屏幕大小的导航菜单。
理论基础
在移动端设备上，导航菜单常常是以下拉列表的形式展示的，并且需要在不同屏幕大小下动态调整。下面是实现响应式导航菜单需要用到的一些基础知识：
媒体查询
媒体查询允许你根据不同的媒介类型和屏幕大小来应用不同的样式。例如，下面的代码将会在屏幕宽度小于 768px 时，应用一组不同的 CSS 样式：
------ ----------- ------ - -- --- ------ ---- -- -
Flexbox
Flexbox 是一种很方便的布局方式，可以用来创建响应式导航菜单。它可以让元素在可用空间内自动调整大小和位置。例如，下面的代码将会把 <nav> 元素中的所有 <a> 元素放在一行中，并平均分配剩下的空间：
--- - -------- ----- ---------------- -------------- - --- - - ----- -- -
CSS 变量
CSS 变量允许你在样式表中重复使用一些值，而不必每次都重新编写代码。例如，下面的代码定义了一个名为 --color-primary 的变量，然后在后面的样式中使用了这个变量：
----- - ---------------- -------- - ------ - ----------------- --------------------- ------ ------ -
实际应用
在本节中，我们将会把上面的知识点应用到一个实际的导航菜单中。下面是示例 HTML 代码：
----- -- ----------------- -- ------------------ -- ----------------- -- -------------------- ------
我们希望在屏幕宽度小于 768px 时，导航菜单会变成一个下拉列表，并且在点击菜单按钮时显示和隐藏菜单。接下来，我们将逐步实现这个效果。
隐藏菜单
首先，我们需要隐藏导航菜单。在屏幕宽度小于 768px 时，我们可以把菜单元素的 display 属性设置为 none：
--- -
-------- -----
---------------- --------------
------ ----------- ------ -
-------- -----
-
-现在，当屏幕宽度小于 768px 时，导航菜单就会被隐藏起来。
菜单按钮
接下来，我们需要添加一个菜单按钮，以便用户可以点击以显示和隐藏导航菜单。菜单按钮应该在屏幕宽度小于 768px 时出现，并且应该放在导航菜单的最右侧。下面是 SASS 代码：
--- -
-------- -----
---------------- --------------
------ ----------- ------ -
-------- -----
--------- -
-------- ------
-
-
-
--------- -
-------- -----
------ ----------- ------ -
-------- ------
-
-上面的代码在菜单按钮的 CSS 类中添加了一个 display 属性，这样当屏幕宽度小于 768px 时，它就会显示出来。菜单按钮的 HTML 代码如下：
------- ---------------------------
下拉菜单
现在我们需要把导航菜单变成一个下拉菜单。下面的代码会在屏幕宽度小于 768px 时隐藏 <nav> 元素，并将它用一个 ID #menu 替换掉。然后，代码添加了一个 ul 元素来显示下拉菜单。
------- --------------------------- --- ---------- ------ ---------------------- ------ ----------------------- ------ ---------------------- ------ ------------------------- -----
接下来，我们需要为下拉菜单设置一些基本样式：
----- -
-------- -----
--------- ---------
---- -----
-- -
------- --
-------- --
----------- -------
-
- -
-------- ------
-------- -----
------ ------
----------------- -----
---------------- -----
-
-上面 CSS 代码中，我们给 #menu 设置了一个 position: absolute 属性，这样它就可以在屏幕上滑动。然后我们将 <li> 元素中的所有元素设置了一些基本的样式，包括居中对齐和去掉边距和填充。最后，我们设置了 <a> 元素的一些样式，例如背景颜色和边距。
点击菜单按钮
接下来，我们需要添加一些 JavaScript 代码以便在点击菜单按钮时显示和隐藏下拉菜单。下面是 JavaScript 代码：
----- ------- - ------------------------------------
----- ---- - --------------------------------
--- -------- - ------
--------------------------------- -- -- -
-- ----------- -
------------------------------
------------------ - --------
-------- - -----
- ---- -
---------------------------------
------------------ - -------
-------- - ------
-
---上面代码中，我们通过 JavaScript 获取到菜单按钮和下拉菜单的 DOM 元素。然后我们添加了一个 click 事件监听器，以便在点击菜单按钮时显示和隐藏菜单。当菜单按钮被点击时，代码切换菜单按钮的 CSS 类和下拉菜单的 display 属性。
完整代码
最后，下面是完整的 HTML 和 SASS 代码：
------- --------------------------- --- ---------- ------ ---------------------- ------ ----------------------- ------ ---------------------- ------ ------------------------- -----
--- -
-------- -----
---------------- --------------
------ ----------- ------ -
-------- -----
--------- -
-------- ------
-
-
-
--------- -
-------- -----
------ ----------- ------ -
-------- ------
-
-
----- -
-------- -----
--------- ---------
---- -----
-- -
------- --
-------- --
----------- -------
-
- -
-------- ------
-------- -----
------ ------
----------------- -----
---------------- -----
-
-
-------------- -
-- --- ------ --- ---- ---- --- ---- --
------ ------- - ------------------------------------
----- ---- - --------------------------------
--- -------- - ------
--------------------------------- -- -- -
-- ----------- -
------------------------------
------------------ - --------
-------- - -----
- ---- -
---------------------------------
------------------ - -------
-------- - ------
-
---结论
在本文中，我们学习了如何使用 SASS 实现一个响应式导航菜单。我们探讨了媒体查询、Flexbox 和 CSS 变量这些基础概念，并将它们应用到一个实际的例子中。希望本文可以帮助您学习如何使用 SASS 构建响应式导航菜单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672310862e7021665e0e1021