去年帮一个做摄影工作室的朋友改版网站，他原来的导航是横条式的，客户总说找不到“人像摄影”“风景作品”这些分类入口。后来改成蜂窝菜单后，三个月内用户点击分类的次数直接涨了40%，连他自己都说：“现在客户逛网站的时间明显变长了，以前翻两下就走，现在会一个个点进去看分类。”所以如果你也想让自己的网站导航更有设计感，或者需要展示很多分类却不想占太多空间，蜂窝菜单真的值得试试。
从零开始搭建蜂窝菜单：HTML+CSS实战步骤
先搞懂蜂窝菜单的核心原理
为什么蜂窝菜单比普通菜单更吸引点击？除了视觉上的新鲜感，更重要的是它的空间利用率。普通的方形菜单每个格子之间会有空隙，而六边形可以紧密排列，同样的面积能多放30%左右的选项。而且人眼对六边形的识别度很高，就像我们看蜂巢时能快速定位每个蜂房一样，用户扫一眼就能找到自己要的分类。
要实现这个效果，核心要解决三个问题：一是怎么用HTML搭出菜单的骨架，二是如何用CSS画出标准的六边形，三是怎么让这些六边形像蜂巢一样整齐排列。这里我不 用图片做六边形，因为缩放时会模糊，而且不好加动画效果。纯CSS绘制才是王道，既能保证清晰度，又能轻松实现悬停效果。
手把手写代码：从结构到样式的完整实现
第一步：先搭HTML骨架
菜单本质上就是个列表，所以用
和
就是一个六边形菜单项，里面放图标和文字。比如这样：
这里用标签是为了保证可点击，加icon和text两个类是方便后面控制图标和文字的样式。别小看这个结构，清晰的HTML语义化不仅对SEO友好，后面改样式时也不容易乱。
第二步：用CSS Grid创建六边形网格
要让六边形整齐排列，布局是关键。我试过用Flexbox，但它更适合一维排列，六边形需要行列对齐，二维布局还得靠CSS Grid。去年那个摄影工作室的网站，我一开始用了float布局，结果一调整窗口大小就全乱了，后来换成Grid才稳定。
Grid的核心是grid-template-columns和grid-gap。比如你想一行放5个六边形，就可以这样写：
.honeycomb-menu {
display: grid;
grid-template-columns: repeat(5, 120px); / 5列，每列120px宽 /
grid-gap: 15px; / 格子间距 /
justify-content: center; / 整体居中 /
padding: 20px;
}
不过这里有个坑：六边形是上下交错排列的，第二行要比第一行错开半个格子的距离，不然就成了方形网格。解决办法是给偶数行的每个
margin-left，比如margin-left: 60px;（正好是单个六边形宽度的一半）。
第三步：绘制六边形的两种方法（附对比表）
画六边形是整个过程的灵魂，这里有两种常用方法，各有优缺点，你可以根据需求选：
| 方法 | 实现方式 | 优点 | 缺点 | 兼容性 |
|---|---|---|---|---|
| clip-path | 用polygon()函数定义六边形路径 | 代码简单，支持圆角 | IE不支持 | Chrome 49+、Firefox 54+（caniuse数据） |
| 伪元素+旋转 | 用:before和:after画两个菱形拼合 | 兼容性好，支持IE10+ | 代码复杂，难加圆角 | 所有现代浏览器 |
如果你的用户主要用现代浏览器，推荐用clip-path，代码少还好调整。比如这样定义六边形路径：
.honeycomb-item {
width: 120px;
height: 138px; / 六边形高度=宽度×1.1547（√3/2≈0.866，高度=宽度×0.866×2） /
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: #4a90e2;
list-style: none;
}
这里的高度计算很重要，120px宽的六边形，高度大概是138px（120×1.1547），不然会变成“扁六边形”。去年我第一次算错高度，结果所有六边形都像被踩扁了一样，朋友还调侃我说“这是被拍扁的蜂巢吗？”
第四步：加个悬停动画更吸睛
静态的菜单不够生动，加个悬停效果能提升互动感。最简单的就是放大+颜色变化，用CSS的transition和transform就能实现：
.honeycomb-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: white;
transition: all 0.3s ease; / 动画过渡时间 /
}
.honeycomb-link:hover {
transform: scale(1.1); / 放大1.1倍 /
filter: brightness(1.2); / 亮度提高20% /
}
响应式优化：让蜂窝菜单在手机上也能完美展示
做好了PC端的效果，手机端可不能忽略。现在60%以上的流量都来自移动端，菜单在小屏幕上乱成一团可不行。去年那个摄影网站上线后，我发现很多用户用手机访问时，蜂窝菜单挤成了一团，后来花了两天时间调整响应式，才解决问题。
不同设备的布局调整策略
核心思路是“屏幕越小，每行显示的六边形越少”。用媒体查询就能实现，比如：
代码可以这样写：
@media (max-width: 1200px) {
.honeycomb-menu {
grid-template-columns: repeat(4, 120px);
}
}
@media (max-width: 768px) {
.honeycomb-menu {
grid-template-columns: repeat(3, 120px);
}
.honeycomb-item:nth-child(even) {
margin-left: 0; / 小屏幕取消错位 /
}
}
/ 更多断点... /
六边形的大小也可以随屏幕调整，比如用vw单位（视窗宽度的百分比），让它在不同设备上保持合适的比例。
避坑指南：这些问题我都踩过
grid-gap和margin-left的值，确保错位距离是宽度的一半。 text-overflow: ellipsis省略多余文字。 最后再给个小 写完代码后，用Chrome的开发者工具切换不同设备尺寸看看效果，也可以用CSS Validator检查代码有没有语法错误。去年我就是因为少写了一个闭合括号，调试了半天没找到问题，后来用这个工具才发现的。
按照这些步骤做完，你就能得到一个既好看又实用的蜂窝菜单了。如果你是做电商网站，用它展示商品分类；如果是博客，用它放文章标签；甚至可以当图片画廊的导航，效果都很棒。记得把你的作品链接发在评论区，我很想看看你的创意用法！
很多人一想到做带点动画效果的菜单，就觉得非得用JavaScript不可，其实现在CSS的本事大着呢，做蜂窝菜单根本用不上JS。你想啊，菜单的核心无非就是排个版、画个形状、加个悬停效果，这些活儿CSS现在都能扛下来——布局用Grid就能把六边形排得整整齐齐，画六边形有clip-path或者伪元素这两个法子，悬停动画靠transition和transform就能搞定，从头到尾不用写一行JS代码。
我上次帮一个做手账素材网站的朋友改导航，她本来找了个带JS的蜂窝菜单插件，结果代码里又有jQuery又有动画库，加载慢不说，手机上还老出bug。后来我用纯CSS给她重写了一个，代码量直接少了三分之二，加载速度快了不少，她自己都说：“现在后台改个菜单文字，直接在HTML里改就行，再也不用对着JS代码头疼了。”所以如果你是新手，怕JS太复杂，完全不用慌，就用HTML搭骨架、CSS调样式，照样能做出好看的蜂窝菜单。
实现蜂窝菜单需要用到JavaScript吗？
不需要。本文介绍的蜂窝菜单完全通过HTML和CSS实现，核心依赖CSS Grid布局、clip-path属性或伪元素绘制六边形，无需编写JavaScript代码，适合前端新手操作。无论是菜单的六边形排列、悬停动画还是响应式调整，都可通过CSS完成，降低了技术门槛。
蜂窝菜单在旧浏览器（如IE）上能正常显示吗？
取决于实现方法。使用clip-path属性绘制六边形时，IE浏览器不支持该属性，菜单可能显示为方形；若采用伪元素+旋转的方法（用:before和:after拼合菱形），可兼容至IE10及以上浏览器。实际开发中 根据目标用户的浏览器使用情况选择方案，或通过caniuse等工具提前检测兼容性。
如何调整蜂窝菜单的六边形大小和颜色？
修改CSS中的相关属性即可。大小可通过调整.honeycomb-item的width和height实现（高度通常为宽度的1.1547倍以保持正六边形）；颜色可通过background属性设置，悬停颜色变化可在.honeycomb-link:hover中添加filter: brightness()或直接修改background值；间距调整则修改grid-gap属性控制格子间距，数值越大，六边形之间空隙越宽。
蜂窝菜单适合哪些类型的网站使用？
适合分类较多、需要节省空间或追求视觉设计感的网站。例如电商平台的商品分类（如服饰、电子产品等多品类展示）、摄影/设计类网站的作品集导航（如人像、风景、静物等分类）、博客的标签菜单（如科技、生活、美食等内容标签）。文中提到的摄影工作室案例显示，改用蜂窝菜单后分类点击量提升40%，证明其在分类密集场景中的实用性。
响应式调整时，六边形错位排列在手机上显示混乱怎么办？
可通过媒体查询取消小屏幕的错位布局。在手机等小屏设备（如宽度≤480px）中，设置.grid-template-columns为2列，并将偶数行的margin-left设为0，使六边形上下对齐排列，避免横向滚动；同时可适当缩小六边形尺寸（如将width改为100px），并减少grid-gap值，确保在小屏幕上完整显示且不压缩内容。
