菜鸟-创作你的创作

html实现蜂窝菜单的示例代码

lichongyang

蜂窝菜单（Honeycomb Menu）是一种布局设计，通常呈现为六边形或其他形状的图标，形成类似蜂窝的结构。它常用于现代网站、应用程序和仪表盘中，提供一种吸引眼球且功能丰富的导航方式。

下面是一个使用 HTML、CSS 和一点 JavaScript 实现蜂窝菜单的简单示例。我们将使用 CSS 来布局六边形菜单项，并通过 hover 效果和简单的动画来增加交互性。

示例代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜂窝菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu-container">
        <div class="menu-item">
            <a href="#home" class="hexagon">Home</a>
        </div>
        <div class="menu-item">
            <a href="#services" class="hexagon">Services</a>
        </div>
        <div class="menu-item">
            <a href="#about" class="hexagon">About</a>
        </div>
        <div class="menu-item">
            <a href="#contact" class="hexagon">Contact</a>
        </div>
        <div class="menu-item">
            <a href="#portfolio" class="hexagon">Portfolio</a>
        </div>
        <div class="menu-item">
            <a href="#blog" class="hexagon">Blog</a>
        </div>
    </div>
</body>
</html>

CSS 部分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

/* 菜单容器 */
.menu-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-gap: 20px;
    position: relative;
}

/* 六边形 */
.hexagon {
    position: relative;
    width: 100px;
    height: 58px;
    background-color: #ff6f61;
    color: white;
    text-align: center;
    line-height: 58px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    display: block;
    text-decoration: none;
    transform: rotate(30deg);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hexagon:before,
.hexagon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transition: all 0.3s ease;
}

.hexagon:before {
    top: -29px;
    border-bottom: 29px solid #ff6f61;
}

.hexagon:after {
    bottom: -29px;
    border-top: 29px solid #ff6f61;
}

/* 点击或悬停时的效果 */
.hexagon:hover {
    background-color: #e55d4e;
    transform: scale(1.1) rotate(30deg);
}

/* 布局调整 */
.menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-container .menu-item:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.menu-container .menu-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.menu-container .menu-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.menu-container .menu-item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

.menu-container .menu-item:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
}

.menu-container .menu-item:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

解释

  1. HTML结构：
    • 使用了一个容器 <div class="menu-container"> 来承载多个菜单项，每个菜单项被包装在 <div class="menu-item"> 中。
    • 每个菜单项是一个 <a> 标签，通过 class="hexagon" 来应用样式。
  2. CSS样式：
    • 使用 CSS Grid 来创建一个 3×3 的网格布局。菜单项使用 CSS Grid 定义了它们的位置，通过 grid-column 和 grid-row 来定位每个菜单项。
    • 菜单项本身是 六边形，通过旋转方形块（transform: rotate(30deg);）来实现六边形形状。
    • 使用 :before 和 :after 伪元素创建六边形的上下三角形，以补充六边形的外观。
    • hover 效果通过改变背景色和缩放（transform: scale(1.1)）来实现。
  3. 动画效果：
    • 使用 transition 使得在鼠标悬停时，六边形会平滑地放大并改变颜色，给用户带来交互的反馈。

效果

当加载页面时，用户将看到一个由六个六边形图标组成的蜂窝状菜单。每个六边形代表一个链接，鼠标悬停时会有放大和颜色变化的效果，提供良好的交互体验。

扩展

这种布局提供了一个吸引用户注意的方式，非常适合具有较多内容或者服务的站点。

退出移动版