平铺导航 - 如何在 2021 年使用 HTML CSS 和 JS 制作网页导航栏视频教程代码文章您可能会觉得有用

2025-06-07

平铺导航 - 2021 年如何使用 HTML、CSS 和 JS 制作网页导航栏

视频教程

代码

您可能觉得有用的文章

您好，欢迎光临。在今天的博客中，我们将学习如何为您的网站打造一个功能齐全、功能强大的磁贴导航系统。

平铺导航是一种非常独特的导航方式，在大多数导航中都很难找到。在你的作品集中使用平铺导航会给人留下良好的印象。这种导航具有良好的用户体验，比普通的导航栏更佳。

演示代码教程包含说明。您可以观看下方视频。

视频教程

如果你想错过更多精彩的即将推出的项目，请务必在 YouTube 上订阅我。这真的能激励我。

因此，不要浪费更多时间，让我们看看如何编写代码。

代码

只需 5 美元即可在Patreon上获得我所有项目的源代码。支持我的工作，创造更多精彩绝伦的项目。这只是一个开始。源代码

对于磁贴导航，我们需要 3 个文件 - index.html、style.css和app.js。当然，我们还有一个用于img图像的文件夹。

那么，让我们从简单地制作导航标题开始吧。从基本的 HTML 模板开始，为其添加标题、链接style.css文件，别忘了添加app.js。

<h1 class="heading">navigation</h1>
Enter fullscreen mode Exit fullscreen mode

风格化。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2f2f2f;
    color: #fff;
    font-family: 'roboto', sans-serif;
}

.heading{
    font-size: 100px;
    text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode
输出

第 2 帧

现在，让我们将最重要的部分变成平铺导航栏。为此，创建一个容器来容纳所有链接。

<!-- links -->
<div class="links-container hide">
</div>
Enter fullscreen mode Exit fullscreen mode

在这个容器内制作a标签，我们用它来创建链接。

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link"></a>
</div>
Enter fullscreen mode Exit fullscreen mode

现在，你可能不知道我们可以在里面添加图片a来创建 images 元素。我之前也不知道。

所以我们当然需要图像作为链接。

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
    </a>
</div>
Enter fullscreen mode Exit fullscreen mode

只需再复制此a标签 4 次并更改图像路径。

由于图片太大，输出看起来会很糟糕。所以让我们给链接添加样式。

.links-container{
    width: 100%;
    height: 100vh;
    position: fixed; 
    top: 0;
    left: 0;
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

将links-container显示设置为flex。这将使link或a并排显示。并设置其位置，fixed因为我们希望它无论滚动如何都停留在屏幕上。

现在将a标签与其图像一起设置样式。

.link{
    position: relative;
    width: 20%;
    height: 100%;
    overflow: hidden;
}

.link img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获

现在让我们为其添加悬停效果。

.link:hover img{
    transform: rotate(-2deg) scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

:hover这仅仅意味着当元素处于悬停状态时。因此，整行或选择器仅仅意味着当元素处于悬停状态img时将这些样式赋予元素。.link

我们得到了效果，但它太亮了，看起来不太吸引人。所以，让我们给它加一个黑色的覆盖层link。

对于覆盖，我们将使用css 伪元素。您可以在此处::after找到详细信息。

.link::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: .5s;
}

.link:hover::after{
    opacity: 0.4;
}
Enter fullscreen mode Exit fullscreen mode
输出

无标题设计

现在，正如您在演示中看到的，底部也添加了文本。那就让我们来制作它们吧。要制作文本，只需在标签p内添加元素即可。a

<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
        <p>home</p>
    </a>
    <a href="#" class="link">
        <img src="img/img 2.png" alt="">
        <p>project</p>
    </a>
    +3 links more
</div>
Enter fullscreen mode Exit fullscreen mode

如果你打开页面，会发现文字是看不到的。因为文字在图片后面。要让文字显示在图片顶部，可以添加一些 CSS。

.link p{
    color: #fff;
    position: absolute;
    bottom: 220px;
    right: -120px;
    width: 150%;
    height: 30px;
    text-transform: uppercase;
    font-size: 50px;
    transform: rotate(-90deg);
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获2

现在，我们必须创建切换按钮。

<!-- toggle btn -->
<div class="toggle-btn">
    <span></span>
    <span></span>
</div>
Enter fullscreen mode Exit fullscreen mode

设置按钮的样式。

.toggle-btn{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    top: 20px;
    background: #2f2f2f;
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
}

.toggle-btn span{
    position: absolute;
    width: 50%;
    height: 2px;
    background: #fff;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
}

.toggle-btn span:nth-child(2){
    top: 60%;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获3

现在我们当然想要十字 X 的效果。为此，当切换按钮有activeclass 时，将 spans 旋转 45 度。像这样。

.toggle-btn.active span{
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.toggle-btn.active span:nth-child(2){
    transform: translate(-50%, -50%) rotate(-45deg);
}
Enter fullscreen mode Exit fullscreen mode

现在添加active类来toggle-btn查看输出。

输出

Capture4

要隐藏链接，我们将使用元素hide的 class links-container。

.links-container{
    // previous styles
    opacity: 1;
    pointer-events: all;
    transition: .5s;
}

.links-container.hide{
    opacity: 0;
    pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

pointer-events属性用于设置元素指针的交互性。在本例中，我们将所有类型的指针交互设置为默认设置。但使用hide类隐藏链接时，不设置交互。

现在我们当然想用 JS 来实现类的切换。我们完全可以用纯 CSS 来实现复选框的效果。不过我们以后再做吧。

打开app.js并首先选择toggle-btn使用links-container方法querySelector。

const toggleBtn = document.querySelector('.toggle-btn');
const linksContainer = document.querySelector('.links-container');
Enter fullscreen mode Exit fullscreen mode

然后，添加点击事件toggle-btn并切换该点击事件内的类。

toggleBtn.addEventListener('click', () => {
    toggleBtn.classList.toggle('active');
    linksContainer.classList.toggle('hide');
})
Enter fullscreen mode Exit fullscreen mode
输出

无标题设计 (1)

大功告成！希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。我之前还做了一个磁贴导航教程。可惜那时候我不太会写博客。你可以在这里查看。

您可能觉得有用的文章

  1. 无限 CSS 加载器
  2. 最佳 CSS 效果
  3. 波浪按钮悬停效果
  4. Youtube API - Youtube 克隆
  5. TMDB - Netflix 克隆

如果您能订阅我的YouTube频道，我将不胜感激。我创作了非常棒的网络内容。

感谢您的阅读。

文章来源：https://dev.to/themodernweb/tile-navigation-how-to-make-navbar-for-web-page-with-html-css-and-js-in-2021-eap
Devto 翻译
PREV
您应该关注的有关 Web 开发的 YouTube 频道
NEXT
快速 CSS 技巧：制作渐变文字描边。渐变文字描边视频教程，让我们开始吧，你可能会觉得有用的文章