多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。
1. 简约水平导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简约水平导航</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}nav {background: #2c3e50;padding: 15px 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.nav-container {width: 90%;max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.logo {color: white;font-size: 1.5rem;font-weight: bold;text-decoration: none;}.nav-links {display: flex;list-style: none;}.nav-links li {margin-left: 30px;}.nav-links a {color: #ecf0f1;text-decoration: none;font-size: 1rem;font-weight: 500;transition: color 0.3s;position: relative;}.nav-links a:hover {color: #3498db;}.nav-links a::after {content: '';position: absolute;width: 0;height: 2px;background: #3498db;bottom: -5px;left: 0;transition: width 0.3s;}.nav-links a:hover::after {width: 100%;}</style>
</head>
<body><nav><div class="nav-container"><a href="#" class="logo">LOGO</a><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></div></nav>
</body>
</html>2. 响应式汉堡菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式汉堡菜单</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}nav {background: #34495e;padding: 15px 0;position: relative;}.nav-container {width: 90%;max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.logo {color: white;font-size: 1.5rem;font-weight: bold;text-decoration: none;}.nav-links {display: flex;list-style: none;}.nav-links li {margin-left: 30px;}.nav-links a {color: #ecf0f1;text-decoration: none;font-size: 1rem;font-weight: 500;transition: color 0.3s;}.nav-links a:hover {color: #1abc9c;}.hamburger {display: none;cursor: pointer;}.hamburger div {width: 25px;height: 3px;background: white;margin: 5px;transition: all 0.3s ease;}@media screen and (max-width: 768px) {.hamburger {display: block;}.nav-links {position: absolute;right: 0;top: 70px;background: #34495e;width: 100%;flex-direction: column;align-items: center;clip-path: circle(0px at 90% -10%);transition: all 0.5s ease-out;pointer-events: none;}.nav-links li {margin: 20px 0;opacity: 0;}.nav-links.open {clip-path: circle(1000px at 90% -10%);pointer-events: all;}.nav-links li.fade {opacity: 1;}}/* 汉堡菜单动画 */.toggle .line1 {transform: rotate(-45deg) translate(-5px, 6px);}.toggle .line2 {opacity: 0;}.toggle .line3 {transform: rotate(45deg) translate(-5px, -6px);}</style>
</head>
<body><nav><div class="nav-container"><a href="#" class="logo">LOGO</a><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul><div class="hamburger"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div></nav><script>const hamburger = document.querySelector('.hamburger');const navLinks = document.querySelector('.nav-links');const links = document.querySelectorAll('.nav-links li');hamburger.addEventListener('click', () => {navLinks.classList.toggle('open');hamburger.classList.toggle('toggle');links.forEach(link => {link.classList.toggle('fade');});});</script>
</body>
</html>3. 垂直侧边栏导航
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直侧边栏导航</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto', sans-serif;}body {display: flex;min-height: 100vh;}.sidebar {width: 250px;background: #2c3e50;color: white;height: 100vh;position: fixed;transition: all 0.3s;}.sidebar-header {padding: 20px;background: #34495e;text-align: center;}.sidebar-header h3 {margin-bottom: 0;font-weight: 500;}.sidebar-menu {padding: 20px 0;}.sidebar-menu li {list-style: none;padding: 15px 20px;transition: all 0.3s;}.sidebar-menu li:hover {background: #34495e;}.sidebar-menu li.active {background: #3498db;}.sidebar-menu a {color: #ecf0f1;text-decoration: none;display: flex;align-items: center;}.sidebar-menu i {margin-right: 10px;font-size: 1.2rem;}.main-content {margin-left: 250px;padding: 20px;width: calc(100% - 250px);transition: all 0.3s;}@media (max-width: 768px) {.sidebar {width: 80px;}.sidebar-header h3, .sidebar-menu span {display: none;}.sidebar-menu i {margin-right: 0;font-size: 1.5rem;}.sidebar-menu li {text-align: center;padding: 15px 10px;}.main-content {margin-left: 80px;width: calc(100% - 80px);}}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body><div class="sidebar"><div class="sidebar-header"><h3>管理后台</h3></div><ul class="sidebar-menu"><li class="active"><a href="#"><i class="fas fa-home"></i><span>仪表盘</span></a></li><li><a href="#"><i class="fas fa-user"></i><span>用户管理</span></a></li><li><a href="#"><i class="fas fa-chart-line"></i><span>数据分析</span></a></li><li><a href="#"><i class="fas fa-cog"></i><span>系统设置</span></a></li><li><a href="#"><i class="fas fa-envelope"></i><span>消息中心</span></a></li><li><a href="#"><i class="fas fa-sign-out-alt"></i><span>退出登录</span></a></li></ul></div><div class="main-content"><h1>主内容区域</h1><p>这里是页面主要内容...</p></div>
</body>
</html>4. 悬浮下划线导航
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>悬浮下划线导航</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body {background: #f5f5f5;}nav {background: white;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);padding: 20px;}.nav-container {max-width: 1200px;margin: 0 auto;display: flex;justify-content: center;}.nav-links {display: flex;list-style: none;position: relative;}.nav-links li {margin: 0 15px;}.nav-links a {color: #333;text-decoration: none;font-size: 1rem;font-weight: 500;padding: 8px 15px;position: relative;z-index: 1;}.nav-links .underline {position: absolute;height: 100%;width: 100px;background: #e3f2fd;top: 0;left: 0;border-radius: 5px;transition: all 0.3s;z-index: 0;}.nav-links li:nth-child(1):hover ~ .underline {left: 0;width: 90px;}.nav-links li:nth-child(2):hover ~ .underline {left: 105px;width: 90px;}.nav-links li:nth-child(3):hover ~ .underline {left: 210px;width: 90px;}.nav-links li:nth-child(4):hover ~ .underline {left: 315px;width: 90px;}.nav-links li:nth-child(5):hover ~ .underline {left: 420px;width: 90px;}</style>
</head>
<body><nav><div class="nav-container"><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">案例</a></li><li><a href="#">联系</a></li><div class="underline"></div></ul></div></nav>
</body>
</html>5. 圆角标签式导航
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角标签式导航</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}body {background: #f8f9fa;padding-top: 50px;}.tabs-container {max-width: 800px;margin: 0 auto;background: white;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);overflow: hidden;}.tabs-nav {display: flex;background: #f1f3f5;border-bottom: 1px solid #dee2e6;}.tab-button {padding: 12px 20px;background: none;border: none;cursor: pointer;font-size: 1rem;font-weight: 500;color: #495057;position: relative;transition: all 0.3s;}.tab-button:first-child {border-top-left-radius: 10px;}.tab-button:last-child {border-top-right-radius: 10px;}.tab-button:hover {color: #212529;background: rgba(0, 0, 0, 0.05);}.tab-button.active {color: #0d6efd;background: white;}.tab-button.active::after {content: '';position: absolute;bottom: -1px;left: 0;width: 100%;height: 2px;background: #0d6efd;}.tab-content {padding: 20px;display: none;}.tab-content.active {display: block;}.tab-content h3 {margin-bottom: 15px;color: #212529;}.tab-content p {color: #495057;line-height: 1.6;}</style>
</head>
<body><div class="tabs-container"><div class="tabs-nav"><button class="tab-button active" data-tab="tab1">首页</button><button class="tab-button" data-tab="tab2">产品</button><button class="tab-button" data-tab="tab3">服务</button><button class="tab-button" data-tab="tab4">关于</button></div><div class="tabs-content"><div class="tab-content active" id="tab1"><h3>欢迎来到首页</h3><p>这里是首页内容区域，您可以在这里展示您的主要信息和特色内容。</p></div><div class="tab-content" id="tab2"><h3>我们的产品</h3><p>这里展示您的产品信息，包括产品特点、优势和使用场景等。</p></div><div class="tab-content" id="tab3"><h3>专业服务</h3><p>详细介绍您提供的服务内容、服务流程和客户案例等。</p></div><div class="tab-content" id="tab4"><h3>关于我们</h3><p>介绍您的公司背景、发展历程、团队文化和联系方式等信息。</p></div></div></div><script>const tabButtons = document.querySelectorAll('.tab-button');const tabContents = document.querySelectorAll('.tab-content');tabButtons.forEach(button => {button.addEventListener('click', () => {// 移除所有active类tabButtons.forEach(btn => btn.classList.remove('active'));tabContents.forEach(content => content.classList.remove('active'));// 添加active类到当前按钮和对应内容button.classList.add('active');const tabId = button.getAttribute('data-tab');document.getElementById(tabId).classList.add('active');});});</script>
</body>
</html>6. 3D立体悬浮导航
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D立体悬浮导航</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}body {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;}.nav-3d {display: flex;position: relative;perspective: 1000px;}.nav-item {margin: 0 10px;position: relative;transform-style: preserve-3d;transition: transform 0.3s;}.nav-item:hover {transform: translateZ(20px);}.nav-item a {display: block;padding: 15px 30px;background: white;color: #333; /* 确保文字颜色可见 */text-decoration: none;font-weight: bold;border-radius: 5px;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);position: relative;transform: translateZ(25px);transition: all 0.3s;z-index: 2; /* 确保文字在顶层 */}.nav-item a::before {content: '';position: absolute;width: 100%;height: 100%;background: #f8f9fa;border-radius: 5px;top: 0;left: 0;transform: translateZ(-25px);transition: all 0.3s;z-index: -1; /* 确保背景在文字下方 */}.nav-item:hover a {background: #0d6efd;color: white;transform: translateZ(45px);}.nav-item:hover a::before {background: #0b5ed7;transform: translateZ(-45px);}.test {color: red !important; /* 确保红色文字可见 */}</style>
</head>
<body><div class="nav-3d"><div class="nav-item"><a href="#" class="test">首页</a></div><div class="nav-item"><a href="#">产品</a></div><div class="nav-item"><a href="#">服务</a></div><div class="nav-item"><a href="#">关于</a></div><div class="nav-item"><a href="#">联系</a></div></div>
</body>
</html>总结
以上提供了 6 种不同风格的导航菜单实现：
- 简约水平导航栏 - 适合大多数网站的基本导航需求
- 响应式汉堡菜单 - 移动设备友好的响应式导航
- 垂直侧边栏导航 - 适合管理后台或文档网站
- 悬浮下划线导航 - 具有流畅动画效果的导航
- 圆角标签式导航 - 适合内容分类展示
- 3D立体悬浮导航 - 具有视觉冲击力的创意导航
每种导航都包含完整的 HTML、CSS 和必要的 JavaScript 代码，您可以直接复制使用或根据需要进行修改。这些导航菜单都遵循现代 Web 设计原则，具有良好的视觉效果和用户体验。
相关文章：
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
ios苹果系统，js 滑动屏幕、锚定无效
现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。 原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...