一个清晰、简明、易于直观浏览的导航菜单对于优化网站的用户体验至关重要。菜单的响应性也是一个关键因素。截至目前，全世界有超过54%的网络流量是由移动端带来的。通过移动优先的响应式设计，开发人员从最小的屏幕尺寸开始，然后逐渐扩大规模，为更大的屏幕尺寸添加更多的特性和功能。由此产生的网页将自动调整到用户的浏览器窗口的大小。
然而，尽管响应式菜单对网站的用户体验很重要，但没有必要用JavaScript来构建它。本教程将回顾如何只用HTML和CSS来创建一个移动优先的响应式菜单。
只用CSS的响应式移动菜单
有许多技术可用于构建响应式移动菜单。一种常见的做法是使用纯CSS，不使用任何一行JavaScript。这种技术包括采用一个简单的HTML列表结构来开发一个链接菜单，该菜单可以根据设备的屏幕尺寸进行不同的样式和渲染。
在本教程中，我们将使用CSS为手机、平板电脑和桌面建立以下响应式菜单。
对于较小的屏幕，用户必须点击一个汉堡包图标来显示菜单项目。较大的屏幕将在导航栏中显示菜单项的内线。
在本教程中，我们将建立一个响应式菜单，包括一个汉堡包图标，完全由纯HTML和CSS构成。
移动视图，打开汉堡包图标以显示菜单项目。
让我们试试吧
开始吧
使用你最喜欢的文本编辑器，如VS Code，在一个共同的文件夹中创建两个文件。
index.html为HTML代码style.css，用于CSS代码
复制index.html 文件的路径，并将其粘贴到浏览器中，以预览该应用程序。
添加HTML
在index.html 文件中添加以下代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App title -->
<title>Responsive Pure CSS Menu</title>
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation bar -->
<header class="header">
<!-- Logo -->
<a href="#" class="logo">LR</a>
<!-- Hamburger icon -->
<input class="side-menu" type="checkbox" id="side-menu"/>
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<!-- Menu -->
<nav class="nav">
<ul class="menu">
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a> </li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main>
<article>
<h1>
Some content
</h1>
<p>
More Content
</p>
</article>
</main>
</body>
</html>
这段代码包含网页的结构和内容。它还包括对CSS样式表的引用。
我们使用header 和main 语义标签来分隔导航栏和页面的主要内容。
我们使用<a> 锚标签添加一个标识。
最后，我们使用checkbox hack来创建一个汉堡包菜单。通过这个策略，我们可以根据复选框是否被选中来确定菜单的样式。
我们使用一个label 标签来定义汉堡包菜单的图标。input 标签被用来根据复选框的状态有条件地显示菜单（类side-menu ）。
然后，我们将菜单项作为链接列表元素，<li> ，添加到一个无序列表中，ul 。nav 标签作为列表的容器。
下面是仅有HTML的输出。
添加CSS
现在，我们将使用CSS来为不同的UI组件和功能设置样式。
为内容和背景设计样式
我们将在style.css 文件中添加以下代码来调整HTML内容的外观。
/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */
:root{
--white: #f9f9f9;
--black: #36383F;
--gray: #85888C;
} /* variables*/
/* Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: var(--white);
font-family: "Poppins", sans-serif;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
这段代码导入了Poppins谷歌字体，以便在应用程序中使用。
我们为应用程序中使用的颜色定义CSS变量。然后，我们使用CSS重置来删除浏览器对margin 、padding 、box-sizing 、text-decoration 和list-style 的默认设置。
我们还为页面内容指定了一个白色的background-color 和Poppinsfont-family 。
下面是输出结果，显示了样式化的内容和背景。
标题和标识的样式
/* Header */
.header{
background-color: var(--black);
box-shadow: 1px 1px 5px 0px var(--gray);
position: sticky;
top: 0;
width: 100%;
}
/* Logo */
.logo{
display: inline-block;
color: var(--white);
font-size: 60px;
margin-left: 10px;
}
这段代码为页眉添加了一个黑色的background-color 和灰色的box-shadow 。为了在滚动过程中保持标题在屏幕的顶部，我们指定了一个粘性的position 和一个从top 的零偏移。我们还调整了页眉，使其在设备的整个width 上伸展。
我们通过指定color 、font-size 、和left-margin ，来设计标识的样式。不要与padding混淆， [margin] 是标志周围的区域，将其与其他元素分开。
下面是输出结果，显示了样式化的标题和标志。
设计导航菜单的样式
/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: var(--black);
overflow: hidden;
}
.menu a{
display: block;
padding: 30px;
color: var(--white);
}
.menu a:hover{
background-color: var(--gray);
}
.nav{
max-height: 0;
transition: max-height .5s ease-out;
}
nav 在这段代码中，我们为width 和height 元素指定了100%的属性，以便使内容符合屏幕。然后，我们指定一个固定的position ，将导航菜单覆盖在主要应用内容的上面。我们还为nav 元素选择了一个黑色的background-color ，并指定任何来自nav 元素的overflow 内容应被隐藏。
对于菜单链接元素，我们指定一个block 格式显示，添加padding 和color ，并将background-color 从悬停时的白色改为灰色。
最后，我们使用CSS[transition] 属性和一个0的max-height 来默认隐藏nav 元素，但当菜单图标被点击时就会显示。
下面是输出结果，显示了样式化的导航菜单。
汉堡包菜单的样式
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 40px 20px;
}/* Style label tag */
.hamb-line {
background: var(--white);
display: block;
height: 2px;
position: relative;
width: 24px;
} /* Style span tag */
.hamb-line::before,
.hamb-line::after{
background: var(--white);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
在这段代码中，我们指定当用户与汉堡包菜单交互时，应该显示一个指针cursor 。我们将label 元素定位到右边，并添加一些填充。
接下来，我们对span 元素进行样式化，以创建三个菜单图标线。
我们在span 元素上使用CSS伪元素[::before] 和[::after]来定义三条汉堡包图标线。.hamb-line 选择器定义了中心（或第二）线。.hamb-line::before 和.hamb-line::after 分别将第一行和第三行5px 定位在中心线的上方和下方。
最后，我们使用display 属性来隐藏复选框(.side-menu)。
下面是输出结果，显示了风格化的汉堡包菜单。
为切换式菜单图标设计样式
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
我们对汉堡包菜单图标进行造型，以改变其在被选中时的外观。首先，我们指定复选框被选中时nav 元素的max-height （class.side-menu``:checked ）。
然后，我们按照两个步骤创建一个 "x "形的关闭图标，以表明复选框被选中。background 首先，我们通过将汉堡包图标的第二行设置为transparent 来隐藏它。然后，我们将第一行和第三行分别旋转-45度和45度，以形成一个 "x "形。
这是输出结果，显示了切换后的菜单。
增加响应性
我们可以通过使用媒体查询来有条件地包含CSS属性，使应用程序具有响应性。换句话说，只有当条件设置有效时，媒体查询内的属性才会应用到网页上。
/* Responsiveness */
@media (min-width: 768px) {
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: fit-content;
}
.menu li{
float: left;
}
.menu a:hover{
background-color: transparent;
color: var(--gray);
}
.hamb{
display: none;
}
}
在这段代码中，我们添加了一个@media 规则，设备条件设置为768pxmin-width 。我们希望具有这个最小宽度的设备能够看到完整的导航菜单，而不是汉堡包菜单。
我们删除nav 元素的max-height 属性，将其设置为none 。
我们将nav 元素放置在屏幕的右上方，并指定其宽度为fit-content 。
我们将float ，将菜单列表项放在nav 的左边。我们指定背景颜色为透明，菜单列表项在悬停时为灰色。
最后，我们使用display 属性来隐藏汉堡包菜单图标。
这就是完全风格化的应用程序。
这个视频演示了该应用程序的响应式用户界面。
总结
在本教程中，我们只用HTML和CSS设计并构建了一个移动优先的响应式菜单，没有使用JavaScript。本文中使用的完整代码可在GitHub上找到。
本文使用的技术只是构建响应式移动菜单的众多方法之一。通过试验不同的方法，你可以决定你喜欢哪种方法。编码愉快!
The postCreating a responsive mobile menu with CSS without JavaScriptappeared first onLogRocket Blog.
