H5 实现蜂巢(六边形)导航，支持用户交互和动态添加，纯css实现无需布局计算

最近公司的项目出了版新的UI设计图，所以准备进行样式改版

而其中就有个导航要改成蜂巢(六边形)导航，当我看到时其实也挺迷糊的。

说一下我一开始的想法哈：

我一开始是打算使用背景颜色线性渐变 或者 用4个子元素覆盖4角 来实现 六边形的视觉效果

这种方法虽然也能实现，但要导航子项之间要有一定距离不然后一个元素会被前一个元素的边角遮盖。

如果仅仅只是展示而不需要用户交互效果则完全不用考虑这些问题，不过我这里的需要 “高亮” 和 “点击交互” 等效果，所以只能想其他方法。

最终发现使用css 的 clip-path 可以实现

下面是我今天一次次试错后，最后写出来的两个demo：

（今天花了丢时间随便写的，样式有点丑，客官不要介意）

dom结构一样

HTML：

<div style="background: #0d5593;height: 900px">
	<div class="menu">
		<div class="menu-cell" onclick="test('导航1')">
			<div class="menu-cell__title">导航1</div>
		</div>
		<div class="menu-cell" onclick="test('导航2')">
			<div class="menu-cell__title">导航2</div>
		</div>
		<div class="menu-cell" onclick="test('导航3')">
			<div class="menu-cell__title">导航3</div>
		</div>
		<div class="menu-cell" onclick="test('导航4')">
			<div class="menu-cell__title">导航4</div>
		</div>
		<div class="menu-cell" onclick="test('导航5')">
			<div class="menu-cell__title">导航5</div>
		</div>
	</div>
</div>

CSS 实现方案一：

实现效果：

代 码 ：

.menu {
	max-width: 250px;
	margin: 0 auto;
}
.menu-cell {
	text-align: center;
	background: #3ea0eb;
	z-index: 1;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	height: 175px;
	line-height: 175px;
	width: 150px;
	margin: 6px;
	overflow: hidden;
}
.menu-cell:hover{
	background: #0a7993;
	transition: background 350ms;
}

.menu-cell:nth-child(1) {
	transform: translate(0, calc(0 * 25%));
}

.menu-cell:nth-child(2) {
	transform: translate(50%, calc(-1 * 25%));
}

.menu-cell:nth-child(3) {
	transform: translate(0, calc(-2 * 25%));
}

.menu-cell:nth-child(4) {
	transform: translate(50%, calc(-3 * 25%));
}

.menu-cell:nth-child(5) {
	transform: translate(0, calc(-4 * 25%));
}

这种需要根据子项排序设置 “位置偏移样式”
可以通过js遍历动态设置 transform 的样式

CSS 实现方案二：

实现效果：

代 码 ：

.menu {
    display: flex;
    flex-wrap: wrap;
    max-width: 250px;
    margin: 0 auto;
    padding: 30px 0;
  }
  .menu-cell {
    height: 88.5px;
    margin: 30px 0px 25px;
    position: relative;
    text-align: center;
    z-index: 1;
	width: 150px;
  }
  .menu-cell:nth-child(2n){
	  transform: translateX(calc(50% + 0.055*150px) );
  }
  .menu-cell::before {
    background: #0a7993;
    -webkit-transform: scale(1.055);
    transform: scale(1.055);
  }
  .menu-cell::after {
    background: #3ea0eb;
    opacity: 0.5;
    transition: opacity 350ms;
  }
  .menu-cell::before, .menu-cell::after {
    content: '';
  }
  .menu-cell:hover::after {
    opacity: 0.2;
  }
  .menu-cell::before, .menu-cell::after{
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
  }

这种方法是 纯css实现无需布局计算

同样的原理也可以实现下面这种效果：