手把手教你用CSS制作一个超酷的隐藏式伸缩菜单

2023-05-01 08:48:08

创建隐藏式伸缩导航菜单：一步一步的指南

在现代网站设计中，美观和交互性至关重要。隐藏式伸缩菜单是增强用户体验和美观外观的流行功能。在本指南中，我们将逐步介绍如何使用 CSS 和 JavaScript 创建一个隐藏式伸缩导航菜单。

什么是隐藏式伸缩菜单？

隐藏式伸缩菜单是一种在不占用屏幕空间的情况下，为用户提供快速访问重要链接的菜单。当用户向下滚动页面时，菜单会显露出来。当用户向上滚动页面时，菜单会隐藏起来。

创建 HTML 结构

第一步是创建 HTML 结构。创建一个名为 index.html 的文件，并输入以下代码：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>

</body>
</html>

应用 CSS 样式

下一步是应用 CSS 样式。在 <head> 部分添加以下代码：

<style>

nav {
width: 100%;
height: 50px;
background-color: #333;
}

ul {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
}

li {
padding: 10px;
}

a {
color: #fff;
text-decoration: none;
}

</style>

这些样式设置了导航栏的宽度、高度、颜色和文本样式。

添加隐藏式伸缩菜单功能

要实现隐藏式伸缩菜单功能，需要使用 JavaScript。在 <head> 部分添加以下代码：

<script>

const nav = document.querySelector('nav');

window.addEventListener('scroll', () => {
if (window.pageYOffset > 100) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});

</script>