如何实现一个纯 CSS 的滑动门导航效果，需要用到哪些技术？

发布于：2025-03-22 ⋅ 阅读:(55) ⋅ 点赞:(0)

大白话如何实现一个纯 CSS 的滑动门导航效果，需要用到哪些技术？

什么是滑动门导航效果

滑动门导航效果是一种常见的网页导航设计，当你把鼠标悬停在导航菜单的某个选项上时，这个选项的背景会滑动或者变化，就好像门打开一样，给用户一种交互的感觉。这种效果可以通过纯 CSS 来实现，下面我来详细讲讲。

实现步骤和需要用到的技术

1. 创建 HTML 结构

首先，你得有一个 HTML 文件，在里面创建导航菜单的基本结构。这个结构就像是房子的骨架，是整个导航效果的基础。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯 CSS 滑动门导航效果</title>
  <!-- 引入 CSS 文件，这里假设 CSS 文件名为 styles.css -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- 创建一个导航栏，使用 ul 标签来表示无序列表 -->
  <nav class="navigation">
    <!-- 每个 li 标签代表一个导航选项 -->
    <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>
2. 编写 CSS 样式

接下来，就要用 CSS 来给这个骨架添砖加瓦，让它变成一个有滑动门效果的导航菜单。

/* 对整个 HTML 文档进行一些基本设置 */
html {
  /* 设置盒模型，让元素的内边距和边框不会影响元素的宽度和高度 */
  box-sizing: border-box;
}

/* 让所有元素都继承上面设置的盒模型 */
*, *::before, *::after {
  box-sizing: inherit;
}

/* 对 body 进行一些基本设置 */
body {
  /* 设置字体为 Arial 或者 sans-serif */
  font-family: Arial, sans-serif;
  /* 去掉 body 的外边距 */
  margin: 0;
  /* 去掉 body 的内边距 */
  padding: 0;
}

/* 对导航栏进行样式设置 */
.navigation {
  /* 设置导航栏的背景颜色为深灰色 */
  background-color: #333;
  /* 让导航栏内的元素水平排列 */
  display: flex;
  /* 让导航栏内的元素在水平方向上居中对齐 */
  justify-content: center;
}

/* 对导航栏内的无序列表进行样式设置 */
.navigation ul {
  /* 去掉无序列表的默认样式，比如前面的小圆点 */
  list-style-type: none;
  /* 去掉无序列表的外边距 */
  margin: 0;
  /* 去掉无序列表的内边距 */
  padding: 0;
  /* 让无序列表内的元素水平排列 */
  display: flex;
}

/* 对导航栏内的列表项进行样式设置 */
.navigation li {
  /* 让列表项内的元素水平排列 */
  display: flex;
}

/* 对导航栏内的链接进行样式设置 */
.navigation a {
  /* 设置链接的显示方式为块级元素，这样可以设置宽度和高度 */
  display: block;
  /* 设置链接的内边距，让文字和边框之间有一定的距离 */
  padding: 15px 20px;
  /* 设置链接的文字颜色为白色 */
  color: white;
  /* 去掉链接的下划线 */
  text-decoration: none;
  /* 设置链接的过渡效果，当鼠标悬停时，背景颜色会在 0.3 秒内平滑过渡 */
  transition: background-color 0.3s ease;
}

/* 当鼠标悬停在链接上时，改变链接的背景颜色 */
.navigation a:hover {
  /* 设置鼠标悬停时链接的背景颜色为浅蓝色 */
  background-color: #007BFF;
}

代码解释

  • HTML 部分：

    • <!DOCTYPE html>：声明文档类型为 HTML5。
    • <html>：HTML 文档的根标签。
    • <head>：包含文档的元数据，比如字符编码、页面标题、引入的 CSS 文件等。
    • <body>：包含页面的可见内容，这里就是导航栏。
    • <nav>：表示导航栏。
    • <ul>：无序列表，用来表示导航选项的集合。
    • <li>：列表项，每个列表项代表一个导航选项。
    • <a>：链接标签，用来设置导航选项的跳转链接。

  • CSS 部分：

    • box-sizing: border-box;：让元素的内边距和边框不会影响元素的宽度和高度。
    • display: flex;：使用弹性布局，让元素可以水平排列。
    • justify-content: center;：让元素在水平方向上居中对齐。
    • list-style-type: none;：去掉无序列表的默认样式。
    • transition: background-color 0.3s ease;：设置过渡效果，当鼠标悬停时，背景颜色会在 0.3 秒内平滑过渡。
    • :hover：伪类选择器，当鼠标悬停在元素上时，应用指定的样式。

总结

通过以上的 HTML 和 CSS 代码，你就可以实现一个简单的纯 CSS 滑动门导航效果。当你把鼠标悬停在导航选项上时，选项的背景颜色会平滑地从深灰色变成浅蓝色，就像门打开一样。

除了纯 CSS，还有哪些方法可以实现滑动门导航效果？

除了纯 CSS 之外，还可以使用 JavaScript 配合 CSS 或者使用框架（如 React、Vue 等）来实现滑动门导航效果，下面为你详细介绍：

1. JavaScript 配合 CSS

JavaScript 能够动态地操控 HTML 元素的样式，借助监听鼠标事件，可实现更为复杂的滑动门效果。

示例代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 实现滑动门导航</title>
  <style>
    nav {
      background-color: #333;
      display: flex;
      justify-content: center;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    li {
      display: flex;
    }

    a {
      display: block;
      padding: 15px 20px;
      color: white;
      text-decoration: none;
    }

    .active {
      background-color: #007BFF;
    }
  </style>
</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>
  <script>
    const navLinks = document.querySelectorAll('nav a');
    navLinks.forEach(link => {
      link.addEventListener('mouseover', function () {
        // 鼠标悬停时添加 active 类
        this.classList.add('active');
      });
      link.addEventListener('mouseout', function () {
        // 鼠标移开时移除 active 类
        this.classList.remove('active');
      });
    });
  </script>
</body>

</html>
代码解释
  • CSS 部分定义了导航栏的基本样式，.active 类用于设定鼠标悬停时的背景颜色。
  • JavaScript 部分借助 querySelectorAll 选取所有导航链接，接着为每个链接添加 mouseover 和 mouseout 事件监听器。当鼠标悬停在链接上时，添加 active 类；鼠标移开时，移除 active 类。

2. 使用 React 框架

React 是一个用于构建用户界面的 JavaScript 库，可使用 React 的状态管理和事件处理功能来实现滑动门导航效果。

示例代码
.navigation {
  background-color: #333;
  display: flex;
  justify-content: center;
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navigation li {
  display: flex;
}

.navigation a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.navigation li.active {
  background-color: #007BFF;
}    

import React, { useState } from 'react';
import './SlidingDoorNavigation.css';

const SlidingDoorNavigation = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleMouseEnter = (index) => {
    setActiveIndex(index);
  };

  const handleMouseLeave = () => {
    setActiveIndex(null);
  };

  const navItems = ['首页', '关于我们', '服务', '联系我们'];

  return (
    <nav className="navigation">
      <ul>
        {navItems.map((item, index) => (
          <li
            key={index}
            onMouseEnter={() => handleMouseEnter(index)}
            onMouseLeave={handleMouseLeave}
            className={activeIndex === index ? 'active' : ''}
          >
            <a href="#">{item}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default SlidingDoorNavigation;
代码解释
  • React 组件里运用 useState 钩子来管理当前激活的导航项索引。
  • 当鼠标悬停在某个导航项上时，调用 handleMouseEnter 函数更新 activeIndex；鼠标移开时，调用 handleMouseLeave 函数将 activeIndex 重置为 null。
  • CSS 部分定义了导航栏的基本样式以及激活状态下的样式。

3. 使用 Vue 框架

Vue 是一个渐进式 JavaScript 框架，同样能利用其响应式原理和事件处理来实现滑动门导航效果。

示例代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 实现滑动门导航</title>
  <style>
    nav {
      background-color: #333;
      display: flex;
      justify-content: center;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    li {
      display: flex;
    }

    a {
      display: block;
      padding: 15px 20px;
      color: white;
      text-decoration: none;
    }

    .active {
      background-color: #007BFF;
    }
  </style>
</head>

<body>
  <div id="app">
    <nav>
      <ul>
        <li v-for="(item, index) in navItems" :key="index" :class="{ active: activeIndex === index }"
          @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
          <a href="#">{{ item }}</a>
        </li>
      </ul>
    </nav>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        activeIndex: null,
        navItems: ['首页', '关于我们', '服务', '联系我们']
      },
      methods: {
        handleMouseEnter(index) {
          this.activeIndex = index;
        },
        handleMouseLeave() {
          this.activeIndex = null;
        }
      }
    });
  </script>
</body>

</html>
代码解释
  • Vue 实例里借助 data 属性管理当前激活的导航项索引和导航项列表。
  • 当鼠标悬停在某个导航项上时，调用 handleMouseEnter 方法更新 activeIndex；鼠标移开时，调用 handleMouseLeave 方法将 activeIndex 重置为 null。
  • CSS 部分定义了导航栏的基本样式以及激活状态下的样式。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布