★ FEATURED ARTICLE 简介这套 HTML 菜单源码集合面向网页前端开发者和入门学习者旨在提供一套可复用、视觉美观的导航菜单解决方案避免每次从零编写菜单样式与交互逻辑。源码以 HTML、CSS、JavaScript 和 jQuery 为主要技术栈覆盖纯 CSS 下拉、悬停高亮、点击切换等常见场景同时预留与 Java 服务端配合的能力后端可根据用户状态动态生成菜单项适合中后台项目参考。压缩包共 38 个文件大小约 481KB包含 13 个 Less 和 13 个 Scss 双版本样式源码便于按项目偏好统一修改变量与主题3 个 JS 文件负责动画和事件逻辑woff、ttf、svg、eot 等字体资源则为 Font Awesome 图标提供跨浏览器显示支持。目前已有 2595 人学习下载是一份兼顾教学与实战的模板。学习时可重点关注菜单的 HTML 语义化结构、Less/Scss 对样式模块的拆分方式以及 jQuery 对下拉动画的写法通过修改预处理器变量还能快速改出不同配色的菜单适合直接抽取代码嵌入现有项目。1. 超实用漂亮精美html菜单源码它到底能帮你省掉哪部分工作打开后台模板编辑器最让人头疼的不是业务逻辑而是那堆只有边框没有样式的菜单导航。“超实用漂亮精美html菜单源码”之所以有市场是因为它把导航栏、下拉菜单、侧边折叠、移动端汉堡这一类高频模块提前写好拿过去改改颜色、替换链接就能用。适合的场景很明确不想引入 Bootstrap 或 Element UI只想用原生 HTML CSS 少量 JS 把页面撑起来。我一般把这种源码当“菜单模板”来看不直接信任成品先拆它的结构再决定是自己改还是照着重写。2. 从零拆一个可用的 html 菜单源码HTML骨架与CSS定位逻辑2.1 最小可用下拉菜单先不管好看先让它能“掉”下来市面上大多数菜单源码的骨架是统一的一个外层ul里面的li再嵌套一个ul。我写的时候习惯把结构做干净再谈装饰。先看一个最简但能跑的版本nav classmenu aria-label主导航 ul classmenu__list li classmenu__item a href# classmenu__link首页/a /li li classmenu__item has-sub a href# classmenu__link产品中心/a ul classmenu__sub lia href#智能硬件/a/li lia href#软件服务/a/li lia href#解决方案/a/li /ul /li /ul /nav对应 CSS.menu__list { display: flex; list-style: none; margin: 0; padding: 0; } .menu__item { position: relative; } .menu__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; padding: 0; margin: 0; list-style: none; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); border-radius: 8px; } .menu__item:hover .menu__sub { display: block; }这段逻辑很简单.menu__item设position: relative作为定位基准子菜单.menu__sub用position: absolute贴在主菜单下边缘top: 100%。平时display: none鼠标进入has-sub项时改为display: block。这里有几个参数值得注意min-width: 160px决定下拉菜单的最小宽度如果子项文字长可以再配合white-space: nowrap撑开box-shadow用rgba(0,0,0,.12)而不是纯黑阴影更柔和border-radius: 8px是流行的卡片感来源想更利落就调成 4px 或 0。如果你只做鼠标用户场景这个结构已经能跑。但作为成品源码还太素它没有关注键盘操作也没处理移动端所以后续每步都在这个基础上叠加而不是推倒重来。2.2 不依赖 JavaScript 也能点击展开checkbox hack 的玩法很多菜单源码只写了 hover 下拉结果平板上一碰就展开一松开就消失体验很怪。我要说一个老但可靠的做法用label checkbox控制展开。核心是checkbox的checked状态可以通过:checked选择器传给兄弟节点。nav classmenu input typecheckbox idmenu-toggle-1 classmenu__toggle label formenu-toggle-1 classmenu__label产品中心 span classarrow▾/span/label ul classmenu__sub lia href#智能硬件/a/li lia href#软件服务/a/li /ul /nav.menu__toggle { display: none; } .menu__toggle:checked ~ .menu__sub { display: block; } .menu__label { cursor: pointer; user-select: none; }注意~是通用兄弟选择器要求.menu__sub与.menu__toggle是同一父节点的兄弟不能包在label里。这个方案的好处是零脚本但有个明显坑checkbox本身占布局必须display: none不过这也让键盘用户直接访问选中框变得麻烦。所以我只在桌面端原型里用正式生产环境我宁可写一个小的事件处理。2.3 漂亮菜单的底层参数阴影、圆角、过渡这样设才不廉价很多号称“精美”的菜单源码其实只是把这一组参数调顺了。我给出自己常用的模板可以抄走.menu__link { display: inline-block; padding: 8px 14px; color: #1a1a1a; text-decoration: none; font-size: 14px; border-radius: 6px; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; } .menu__link:hover { color: #fff; background-color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.35); } .menu__sub { transform-origin: top left; animation: menuIn .18s ease-out; } keyframes menuIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }参数说明transition不要同时过渡全部属性尽量只写color, background-color, box-shadow否则性能差的机器上会看到明显的布局耗时。hover 背景色我用#6366f1这种带一点灰的蓝比正蓝耐看。阴影透明度用.35再重就像塑料。子菜单的动画只用了opacity和transform这俩是 GPU 友好属性不会引发重排。scale(.96)让菜单从左上角微微展开比纯淡入更有“长出来”的感觉。无论别人源码多花哨你只要抓住四个变量padding控制点击区域大小border-radius控制圆润度box-shadow控制立体感transition-duration控制在 180ms 到 250ms 之间。太快不像交互太慢会拖泥带水。2.4 给下拉菜单补一条缓冲带别让鼠标移到一半“翻车”先讲一个现象你从“产品中心”往屏幕下方移动鼠标只要路径上有一丁点空隙二级菜单瞬间就没了。原因是子菜单定位在top: 100%后如果它与主菜单项之间隔了 margin、padding 或半透明遮罩的间隙鼠标跨过这段空白时:hover范围就断了。我会给子菜单加一层透明的“缓冲带”.menu__sub::before { content: ; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; }:before伪元素把鼠标悬停热区向上抬了 8px从主菜单滑到子菜单时哪怕中间有间隙也不会丢失 hover。top: -8px的值要和视觉间隙匹配一般取-12px到-4px。如果子菜单本身就是紧贴主菜单的这块伪元素可以不加省一点渲染成本。这个技巧也解释了为什么很多成熟菜单源码会故意在子菜单上方留一个透明的 padding都是为了缓冲。3. 多级菜单与响应式布局从桌面到移动端不翻车3.1 三级菜单的嵌套定位子子菜单别跑出屏幕右边缘当菜单超过两级默认的子菜单定位方式很容易出问题第三级菜单向右展开时遇到屏边就直接溢出产生横向滚动条。先写一个标准三级结构li classmenu__item has-sub a href#解决方案/a ul classmenu__sub li classmenu__item has-sub a href#行业方案/a ul classmenu__sub menu__sub--nested lia href#金融/a/li lia href#教育/a/li /ul /li /ul /liCSS 默认让嵌套子菜单往右展开.menu__sub--nested { top: 0; left: 100%; }但这样右侧的菜单会溢出。我用一个小 JS 在鼠标进入时检测一下位置document.querySelectorAll(.has-sub).forEach(function (li) { li.addEventListener(mouseenter, function () { var sub li.querySelector(:scope .menu__sub); if (!sub) return; var rect sub.getBoundingClientRect(); if (rect.right window.innerWidth) { sub.classList.add(menu__sub--flip-left); } else { sub.classList.remove(menu__sub--flip-left); } }); });配合翻转类.menu__sub--flip-left { left: auto; right: 100%; }:scope 选择器是关键它只找作为直接子元素的子菜单避免误选中孙级菜单。getBoundingClientRect()拿到菜单相对视口的坐标当rect.right超过innerWidth时就改成向左展开。这个检测只在鼠标进入时执行一次代价很小而且不会影响桌面下拉动画。3.2 移动端的汉堡菜单把多级菜单压缩成抽屉窄屏下横向菜单放不下常见做法是变成汉堡按钮点击后抽屉从右侧滑出。我用一个 checkbox 控制的结构div classnavbar input typecheckbox idnav-toggle classnav-toggle label fornav-toggle classnav-burger span/span span/span span/span /label ul classnav-list li classmenu__itema href# classmenu__link首页/a/li li classmenu__item has-sub a href# classmenu__link产品中心/a ul classmenu__sub.../ul /li /ul /divCSS 控制桌面显示、移动端隐藏汉堡.nav-toggle { display: none; } .nav-burger { display: none; width: 28px; height: 22px; cursor: pointer; flex-direction: column; justify-content: space-between; } .nav-burger span { display: block; height: 2px; background: #333; border-radius: 2px; transition: transform .2s, opacity .2s; } media (max-width: 768px) { .nav-burger { display: flex; } .nav-list { position: fixed; top: 0; right: 0; bottom: 0; width: 260px; flex-direction: column; padding: 60px 16px 16px; background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.08); transform: translateX(100%); transition: transform .25s ease; } .nav-toggle:checked ~ .nav-list { transform: translateX(0); } }这个方案里汉堡按钮的三条线在展开后变成叉号用 :checked 配合兄弟选择器完成.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }说明:checked ~表示当 checkbox 被选中时对它之后的兄弟节点生效。所以input必须放在label和nav-list之前。移动端抽屉的宽度260px是一个比较舒服的值小于 240px 会显得局促大于 320px 会遮住太多内容。别忘了在抽屉里给菜单项加足够的点击高度目标不小于 44px。3.3 窄屏下的菜单模块搜索与横向滚动菜单放不下时的折中如果菜单项不多五六个不一定要抽屉把横向菜单改成可横向滚动也是一种常见的“html菜单源码”做法。特别适合产品分类、频道标签这类一级导航。.nav-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-scroll::-webkit-scrollbar { display: none; }注意flex子项默认flex-shrink: 1在窄屏下会被压得换行或挤变形。所以要么给菜单项加flex-shrink: 0要么在菜单文字上设white-space: nowrap.nav-scroll .menu__link { flex-shrink: 0; white-space: nowrap; }这个方案牺牲了下拉菜单的可发现性所以只适合一级菜单。如果页面本身有二级菜单我还是建议抽屉方案。另外尽量不要把overflow-x: auto直接设在导航的顶层容器上不然position: fixed的抽屉子菜单会被一起滚走。4. 美化升级图标、字体与动效让 html 菜单源码自带“精美”属性4.1 用内联 SVG 还是 Emoji一份不依赖外部图标库的方案许多菜单源码会把图标交给 Font Awesome但对内网项目、离线环境不友好。我习惯用内联 SVG颜色可控不涉及跨域。下面是一个带用户图标的例子a href# classmenu__link svg classmenu__icon viewBox0 0 24 24 aria-hiddentrue path fillcurrentColor dM12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v1h20v-1c0-3.33-6.67-5-10-5z/ /svg 个人中心 /a.menu__icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }参数说明viewBox0 0 24 24是 Material Design 的通用坐标系路径数据对应一个常见用户剪影。fillcurrentColor让图标颜色跟随文字hover 时只需要改color。不要在 SVG 标签里写死width/height用 CSS 控制方便响应式。如果你的项目不需要追求图标细节用 Emoji 也能顶一阵但 Emoji 颜色由系统决定不能跟随 CSS。我建议即便用一个简单的实心圆点也尽量用 inline SVG 或 CSS 的mask方式.menu__icon-image { width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url(icon.svg) center / contain no-repeat; mask: url(icon.svg) center / contain no-repeat; }这样图标内容来自独立 SVG 文件颜色用background-color控制和字体图标类似。这个技术坑是-webkit-mask前缀在部分旧浏览器不支持其它场景都稳定。4.2 菜单项悬停微交互滑线、波纹和弹跳的参数配比“精美”感很大程度来自微交互。我最常用的是一个伪元素下划线动画.menu__link { position: relative; } .menu__link::after { content: ; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px; background: #6366f1; transition: left .2s ease, right .2s ease; } .menu__link:hover::after { left: 14%; right: 14%; }原理伪元素的宽度由left/right控制默认两边都是 50%所以长度为 0、不可见。hover 后两边收到 14%宽度变成 72%并且中心位置不变看起来就像一条线从中间向两边展开。如果改成left: 0; right: 0到left: auto; right: 0就是扫线效果。波纹效果我建议克制使用。它需要额外的 JS 计算点击坐标而且在部分移动端 WebView 上会掉帧。如果你确实想要可以用overflow: hidden配合一个绝对定位的圆形元素做缩放动画但菜单项很多时会显得很吵。我现在的习惯是菜单只保留颜色过渡和滑线把波纹留给页面里的主行动按钮。4.3 一键换肤用 CSS 变量把主题色抽出来一个“漂亮精美”的菜单源码如果后期要改成企业蓝、品牌绿最好提前用变量。我常用的结构:root { --menu-bg: #ffffff; --menu-item-color: #333333; --menu-item-hover-bg: #f0f0ff; --menu-item-hover-color: #6366f1; --menu-shadow: 0 4px 12px rgba(0,0,0,.08); --menu-radius: 8px; } .menu__link { color: var(--menu-item-color); border-radius: var(--menu-radius); } .menu__link:hover { color: var(--menu-item-hover-color); background-color: var(--menu-item-hover-bg); } .menu__sub { background: var(--menu-bg); box-shadow: var(--menu-shadow); border-radius: var(--menu-radius); }以后要支持暗色模式只要在prefers-color-scheme里覆盖变量media (prefers-color-scheme: dark) { :root { --menu-bg: #1f1f1f; --menu-item-color: #e5e5e5; --menu-item-hover-bg: #2d2d2d; --menu-item-hover-color: #a5b4fc; --menu-shadow: 0 4px 12px rgba(0,0,0,.45); } }记住变量定义在:root上会全局生效。如果源码里写死了颜色参考这个思路做一次全局替换就能把一套菜单变成可换肤组件。这也是我拿到任何 html 菜单源码后第一件会做的事先抽变量再改样式。5. 菜单源码的常见问题排查5 个坑照单避开5.1 下拉菜单出不来看不见或盖不住下面的内容现象菜单 hover 后没反应或者菜单跑到了其它模块下面父容器有圆角或滚动条时子菜单直接被裁掉了一半。原因父级容器设置了overflow: hidden导致position: absolute的下拉菜单被裁剪另外 z-index 只在兄弟节点间比较如果菜单和下方轮播图不在同一层级光调菜单的 z-index 是没用的。解决先检查菜单容器向上两层的父元素有没有overflow: hidden或overflow: auto有就去掉或者把下拉菜单移到容器外。如果必须保留滚动容器建议用 JS 把它改成position: fixed的下拉层定位到body下再根据触发项的位置计算坐标。不要靠无限拉大z-index来对抗裁剪那是越补越大。5.2 鼠标一离开菜单项子菜单就闪断消失现象从一级菜单往下移动到二级菜单的途中二级菜单没了特别是在两者之间存在 margin、padding 或一个细缝时。原因鼠标在跨越缝隙时:hover悬停目标变成了外层元素脱离了.menu__item的范围所以子菜单被隐藏。解决按第 2.4 节给子菜单加透明::before缓冲带把热区延伸到父项底部。或者把子菜单的top值改成calc(100% - 4px)让子菜单和父项在垂直方向有 4px 重叠。实际测试中缓冲带最好用因为不会影响子菜单定位。5.3 子菜单加 transition 动画不生效一出现就瞬间跳变现象写了transition: opacity .2s但下拉时菜单根本没有淡入效果而是硬切。原因最典型的原因是父项用display: none切换到display: block。display不是可插值属性浏览器不会对它执行过渡所以元素直接从“不存在”变成“完整可见”。解决不要用display改用opacity pointer-events组合.menu__sub { position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } .menu__item:hover .menu__sub { opacity: 1; visibility: visible; pointer-events: auto; }这段里visibility可以参与过渡它会在隐藏时延迟到动画结束再隐藏显示时立即生效。pointer-events则避免透明菜单还能被点击。这种方式会比display: none稳定很多。5.4 菜单文字换行、溢出不整齐现象菜单项标题比较长时在窄屏下被压缩或者变成两行子菜单宽度也跟着乱跳。原因flex 容器默认允许收缩长文本又没有white-space: nowrap约束所以文字被打断。解决给菜单项加flex-shrink: 0并给链接文字设white-space: nowrap。如果希望超长中文显示省略号可以增加.menu__link { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }注意text-overflow: ellipsis必须配合overflow: hidden和white-space: nowrap才生效单独写没用。5.5 移动端触摸时菜单刚展开又立刻收起现象在手机上点一级菜单子菜单一闪而过或者直接触发了链接跳转。原因触摸设备上:hover在点击时触发点击结束后立刻失效如果链接本身有跳转子菜单根本没有时间展开。解决把仅用于 hover 的下拉样式限制在支持 hover 的设备上media (hover: hover) { .menu__item:hover .menu__sub { opacity: 1; visibility: visible; } }移动端用click事件来处理展开与收起同时给触发链接阻止默认跳转或改成button标签。还有一个容易忽略的细节移动端点击热区太小手指误触会让人误以为菜单“闪断”。在移动端断点下菜单项的最小高度最好调到 44px 以上这也是 App 普遍采用的可点区域尺寸。6. 把菜单源码变成自己的组件一个验证清单和我的保留习惯到了这一步你已经能写出或改出一份能用的菜单了。但“能用”和“敢用到生产环境”之间隔着一个验证过程。我现在拿到任何一份 html 菜单源码第一件事不是看效果而是测三个点断点、键盘、层级。断点测试建议清单把浏览器窗口从 1280 缩到 320菜单应该经历“横向完整 → 部分滚动 / 抽屉切换 → 抽屉可用”三个阶段。移动端用 Chrome DevTools 模拟器时把“设备像素比”调到 2 或 3很多阴影在低 DPR 下会显得过重需要在 CSS 里用更小的阴影值。键盘测试Tab 键应该能依次经过所有菜单项被选中的菜单项有明显的outline或背景变化。如果有下拉菜单回车或空格键也要能展开子菜单。最简单的方法是给菜单项增加tabindex0并在 JS 里处理keydown事件但我更建议直接把一级导航写成button天然支持键盘。另一个细节是aria-expanded要在展开时变为true收起来时恢复false屏幕阅读器用户才不至于迷路。层级测试确认菜单 z-index 比页面内轮播、弹窗、sticky 头部都高。但这还不够还要确认菜单本身不能无限提高否则一旦和其他弹窗同层会出现两个浮层互相遮挡。我习惯把菜单的 z-index 收敛到一个 CSS 变量里比如--menu-z: 1000其他弹窗统一用更大值。最后一个我自己保留的技巧把菜单相关的所有样式都收进一个命名空间比如.menu前缀而不是用.nav或.dropdown这种太通用的类名。这样这份源码复制进任何项目都不太容易和业务的样式撞车。我把这个当成对菜单源码最基本的“隔离”。以后你也会遇到那种一引入就把全局a标签颜色改掉的源码到时候就会理解命名空间比任何花哨效果都重要。希望这些拆解和踩坑记录能帮到你——至少在把菜单搬进项目前少走我走过的弯路。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
