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

天空闲话  金牌会员 | 2025-3-21 16:32:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 974|帖子 974|积分 2922

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

什么是滑动门导航效果

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

1. 创建 HTML 结构

首先，你得有一个 HTML 文件，在里面创建导航菜单的基本结构。这个结构就像是房子的骨架，是整个导航效果的底子。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>纯 CSS 滑动门导航效果</title>
  8.   <!-- 引入 CSS 文件，这里假设 CSS 文件名为 styles.css -->
  9.   <link rel="stylesheet" href="styles.css">
  10. </head>
  12. <body>
  13.   <!-- 创建一个导航栏，使用 ul 标签来表示无序列表 -->
  14.   <nav class="navigation">
  15.     <!-- 每个 li 标签代表一个导航选项 -->
  16.     <ul>
  17.       <li><a href="#">首页</a></li>
  18.       <li><a href="#">关于我们</a></li>
  19.       <li><a href="#">服务</a></li>
  20.       <li><a href="#">联系我们</a></li>
  21.     </ul>
  22.   </nav>
  23. </body>
  25. </html>
复制代码
2. 编写 CSS 样式

接下来，就要用 CSS 来给这个骨架添砖加瓦，让它酿成一个有滑动门效果的导航菜单。
  1. /* 对整个 HTML 文档进行一些基本设置 */
  2. html {
  3.   /* 设置盒模型，让元素的内边距和边框不会影响元素的宽度和高度 */
  4.   box-sizing: border-box;
  5. }
  7. /* 让所有元素都继承上面设置的盒模型 */
  8. *, *::before, *::after {
  9.   box-sizing: inherit;
  10. }
  12. /* 对 body 进行一些基本设置 */
  13. body {
  14.   /* 设置字体为 Arial 或者 sans-serif */
  15.   font-family: Arial, sans-serif;
  16.   /* 去掉 body 的外边距 */
  17.   margin: 0;
  18.   /* 去掉 body 的内边距 */
  19.   padding: 0;
  20. }
  22. /* 对导航栏进行样式设置 */
  23. .navigation {
  24.   /* 设置导航栏的背景颜色为深灰色 */
  25.   background-color: #333;
  26.   /* 让导航栏内的元素水平排列 */
  27.   display: flex;
  28.   /* 让导航栏内的元素在水平方向上居中对齐 */
  29.   justify-content: center;
  30. }
  32. /* 对导航栏内的无序列表进行样式设置 */
  33. .navigation ul {
  34.   /* 去掉无序列表的默认样式，比如前面的小圆点 */
  35.   list-style-type: none;
  36.   /* 去掉无序列表的外边距 */
  37.   margin: 0;
  38.   /* 去掉无序列表的内边距 */
  39.   padding: 0;
  40.   /* 让无序列表内的元素水平排列 */
  41.   display: flex;
  42. }
  44. /* 对导航栏内的列表项进行样式设置 */
  45. .navigation li {
  46.   /* 让列表项内的元素水平排列 */
  47.   display: flex;
  48. }
  50. /* 对导航栏内的链接进行样式设置 */
  51. .navigation a {
  52.   /* 设置链接的显示方式为块级元素，这样可以设置宽度和高度 */
  53.   display: block;
  54.   /* 设置链接的内边距，让文字和边框之间有一定的距离 */
  55.   padding: 15px 20px;
  56.   /* 设置链接的文字颜色为白色 */
  57.   color: white;
  58.   /* 去掉链接的下划线 */
  59.   text-decoration: none;
  60.   /* 设置链接的过渡效果，当鼠标悬停时，背景颜色会在 0.3 秒内平滑过渡 */
  61.   transition: background-color 0.3s ease;
  62. }
  64. /* 当鼠标悬停在链接上时，改变链接的背景颜色 */
  65. .navigation a:hover {
  66.   /* 设置鼠标悬停时链接的背景颜色为浅蓝色 */
  67.   background-color: #007BFF;
  68. }
复制代码
代码解释



  • 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 元素的样式，借助监听鼠标事件，可实现更为复杂的滑动门效果。
示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>JavaScript 实现滑动门导航</title>
  8.   <style>
  9.     nav {
  10.       background-color: #333;
  11.       display: flex;
  12.       justify-content: center;
  13.     }
  15.     ul {
  16.       list-style-type: none;
  17.       margin: 0;
  18.       padding: 0;
  19.       display: flex;
  20.     }
  22.     li {
  23.       display: flex;
  24.     }
  26.     a {
  27.       display: block;
  28.       padding: 15px 20px;
  29.       color: white;
  30.       text-decoration: none;
  31.     }
  33.     .active {
  34.       background-color: #007BFF;
  35.     }
  36.   </style>
  37. </head>
  39. <body>
  40.   <nav>
  41.     <ul>
  42.       <li><a href="#">首页</a></li>
  43.       <li><a href="#">关于我们</a></li>
  44.       <li><a href="#">服务</a></li>
  45.       <li><a href="#">联系我们</a></li>
  46.     </ul>
  47.   </nav>
  48.   <script>
  49.     const navLinks = document.querySelectorAll('nav a');
  50.     navLinks.forEach(link => {
  51.       link.addEventListener('mouseover', function () {
  52.         // 鼠标悬停时添加 active 类
  53.         this.classList.add('active');
  54.       });
  55.       link.addEventListener('mouseout', function () {
  56.         // 鼠标移开时移除 active 类
  57.         this.classList.remove('active');
  58.       });
  59.     });
  60.   </script>
  61. </body>
  63. </html>
复制代码
代码解释



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

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

  1. .navigation {
  2.   background-color: #333;
  3.   display: flex;
  4.   justify-content: center;
  5. }
  7. .navigation ul {
  8.   list-style-type: none;
  9.   margin: 0;
  10.   padding: 0;
  11.   display: flex;
  12. }
  14. .navigation li {
  15.   display: flex;
  16. }
  18. .navigation a {
  19.   display: block;
  20.   padding: 15px 20px;
  21.   color: white;
  22.   text-decoration: none;
  23. }
  25. .navigation li.active {
  26.   background-color: #007BFF;
  27. }   
复制代码
  1. import React, { useState } from 'react';
  2. import './SlidingDoorNavigation.css';
  4. const SlidingDoorNavigation = () => {
  5.   const [activeIndex, setActiveIndex] = useState(null);
  7.   const handleMouseEnter = (index) => {
  8.     setActiveIndex(index);
  9.   };
  11.   const handleMouseLeave = () => {
  12.     setActiveIndex(null);
  13.   };
  15.   const navItems = ['首页', '关于我们', '服务', '联系我们'];
  17.   return (
  18.     <nav className="navigation">
  19.       <ul>
  20.         {navItems.map((item, index) => (
  21.           <li
  22.             key={index}
  23.             onMouseEnter={() => handleMouseEnter(index)}
  24.             onMouseLeave={handleMouseLeave}
  25.             className={activeIndex === index ? 'active' : ''}
  26.           >
  27.             <a href="#">{item}</a>
  28.           </li>
  29.         ))}
  30.       </ul>
  31.     </nav>
  32.   );
  33. };
  35. export default SlidingDoorNavigation;   
复制代码
代码解释



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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Vue 实现滑动门导航</title>
  8.   <style>
  9.     nav {
  10.       background-color: #333;
  11.       display: flex;
  12.       justify-content: center;
  13.     }
  15.     ul {
  16.       list-style-type: none;
  17.       margin: 0;
  18.       padding: 0;
  19.       display: flex;
  20.     }
  22.     li {
  23.       display: flex;
  24.     }
  26.     a {
  27.       display: block;
  28.       padding: 15px 20px;
  29.       color: white;
  30.       text-decoration: none;
  31.     }
  33.     .active {
  34.       background-color: #007BFF;
  35.     }
  36.   </style>
  37. </head>
  39. <body>
  40.   <div id="app">
  41.     <nav>
  42.       <ul>
  43.         <li v-for="(item, index) in navItems" :key="index" :class="{ active: activeIndex === index }"
  44.           @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
  45.           <a href="#">{{ item }}</a>
  46.         </li>
  47.       </ul>
  48.     </nav>
  49.   </div>
  50.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  51.   <script>
  52.     new Vue({
  53.       el: '#app',
  54.       data: {
  55.         activeIndex: null,
  56.         navItems: ['首页', '关于我们', '服务', '联系我们']
  57.       },
  58.       methods: {
  59.         handleMouseEnter(index) {
  60.           this.activeIndex = index;
  61.         },
  62.         handleMouseLeave() {
  63.           this.activeIndex = null;
  64.         }
  65.       }
  66.     });
  67.   </script>
  68. </body>
  70. </html>
复制代码
代码解释



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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表