A good menu design is an important part of any website or web app UI. Using only modern HTML and CSS, all kinds of menu combinations can be created to handle whatever user interactions are necessary. In this article, we’ll take a look at how to build three different hover menus: a simple column menu, another one with nested sub-menus, and finally a cool radial “pie” menu with emoji icons.

良好的菜单设计是任何网站或Web应用程序UI的重要组成部分。 仅使用现代HTML和CSS，就可以创建各种菜单组合，以处理所需的任何用户交互。 在本文中，我们将研究如何构建三个不同的悬停菜单：一个简单的列菜单，另一个具有嵌套子菜单的菜单，以及一个带有表情符号图标的凉爽的径向“饼状”菜单。

For a copy of the example project used in this article, check out this repo.

有关本文使用的示例项目的副本，请查看此repo 。

概念 (Concepts)

Hover menus in CSS take advantage of the :hover pseudo-selector and various animations, transitions, and transforms to create the menu interactions. Complex menus can be created by properly sizing the menu components and adding interactions to them as necessary.

CSS中的悬停菜单利用:hover 伪选择器以及各种动画，过渡和转换来创建菜单交互。 可以通过适当调整菜单组件的大小并根据需要向其添加交互来创建复杂的菜单。

The basic idea is simple: when the mouse hovers over a menu, apply whatever effects are desired (such as expanding the menu or changing background color) and display the contents of the menu to the user. The contents of the menu can be arranged in various ways as we will examine shortly.

基本思想很简单：当鼠标悬停在菜单上时，应用所需的任何效果(例如，扩展菜单或更改背景颜色)，然后向用户显示菜单的内容。 菜单的内容可以多种方式安排，我们将在稍后进行检查。

HTML (HTML)

First, let’s take a look at the project structure in index.html:

首先，让我们看一下index.html中的项目结构：

Aside from some basic document structure, we have definitions for three nav menus, each with a header element and varying content. The first menu is simple and contains four choices. The second menu is a little more complex and contains four sub-menus, each with four choices. The third contains emoji device icons that will be displayed around it in a circle.

除了一些基本的文档结构，我们还定义了三个nav菜单，每个菜单都有一个header元素和不同的内容。 第一个菜单很简单，包含四个选项。 第二个菜单稍微复杂一点，包含四个子菜单，每个子菜单有四个选择。 第三个包含表情符号设备图标，该图标将围成一圈显示。

The HTML for this example is kept simple by design and most of the magic happens in CSS, so let’s take a look at that next.

该示例HTML通过设计保持简单，大多数魔术发生在CSS中，因此接下来让我们看一下。

CSS (CSS)

The styles for the example project are located in style.css:

示例项目的样式位于style.css中 ：

First up is the :root block, which contains CSS variables that will be used throughout the rest of the file. Variables are a powerful feature introduced in CSS Level 3 that greatly simplifies the task of organizing CSS code. Here we have a base size for navigation items as --nav-size that will set both the height and width of a closed navigation menu to 12vh(which is 12% of the viewport height). Background colors for the menus are also defined here.

首先是:root块，其中包含CSS变量 ，该变量将在文件的其余部分中使用。 变量是CSS Level 3中引入的一项强大功能，可大大简化组织CSS代码的任务。 此处，导航项的基本大小为--nav-size ，它将关闭的导航菜单的高度和宽度都设置为12vh (这是视口高度的12％)。 菜单的背景色也在此定义。

The item-fade-in animation will be used to show the hidden menu items by setting their display property to flex and fading-in the items with opacity.

item-fade-in动画将通过将隐藏菜单项的display属性设置为flex和淡入display不透明度来显示隐藏的菜单项。

Next, the body is styled, scaled to 100% height and width of the document, and set to display content in a horizontal flex container. The nav items (the root containers for each menu) are set to --nav-size and styled with various properties, and are also defined as flex containers to allow proper spacing of menu items. Note the transition on this element’s non-hover selector, which will cause the element to smoothly transition back to it’s default state (instead of just snapping back immediately). The nav > header selector sizes the menu header to --nav-size and flex is used once again, in this case to center the text inside the header both horizontally and vertically.

接下来，对body进行样式设置，缩放到文档的高度和宽度的100％，并设置为在水平flex容器中显示内容。 nav项(每个菜单的根容器)设置为--nav-size并具有各种属性样式，并且还定义为flex容器，以允许菜单项有适当的间距。 请注意，此元素的非悬停选择器上的transition ，这将导致该元素平稳过渡回其默认状态(而不是立即返回)。 nav > header选择器将菜单标nav > header大小调整为--nav-size并且再次使用flex，在这种情况下，可将文本在标头内水平和垂直居中。

Here’s where we start to get into the actual hover logic of the menu. The selector nav:hover causes the nav item, when hovered over, to transition it’s background color and height, using 120ms and 240ms linear transitions respectively. This demonstrates how multiple transitions can be chained inside a single CSS rule. Next, the first two menus are selected using the nth-child pseudo-class, to extend their transitions with height which will cause the menu to open vertically when activated. Menu items are controlled using the nav > div and related selectors, and these items are also set to center their own content using flex and respond to hover events by applying transitions and animations.

在这里，我们开始进入菜单的实际悬停逻辑。 选择器nav:hover使nav项nav:hover时，分别使用120ms和240ms线性转换来转换其背景颜色和高度。 这说明了如何在单个CSS规则内链接多个转换。 接下来，使用第n个子伪类选择前两个菜单，以扩展其height转换，这将导致菜单在激活时垂直打开。 菜单项是使用nav > div和相关的选择器控制的，并且还可以使用flex将这些项设置为居中放置其内容，并通过应用过渡和动画来响应悬停事件。

The first menu is straightforward and simply drops upon hover, revealing a list of items that will each change background color when hovered over. The second menu is a little more complex and provides a list of horizontal expanding sub-menus when opened. This is achieved in the same manner as the basic menu effect, by selecting deeper into the menu and applying hover effects to show/hide sub-menu items using the same principles.

第一个菜单非常简单，只需将鼠标悬停在菜单上，就会显示一个菜单项，当鼠标悬停在菜单上时，它们都会改变背景颜色。 第二个菜单稍微复杂一点，打开后会提供水平扩展子菜单的列表。 这可以通过与菜单基本效果相同的方式来实现，方法是在菜单中选择更深的内容，然后使用相同的原理将鼠标悬停效果应用于显示/隐藏子菜单项。

The third menu takes a completely different approach, and does not change size when hovered but instead goes transparent, and applies effects to child elements that cause them to be rendered in a circle around the menu. This cool effect is achieved by sizing the menu items to the same size as the parent, using position: fixed to stack them vertically on top of each other, rotating each item by a factor of 90 degrees to encircle the menu, and applying transform: translateX(var(--nav-size)) to the child span element that will shift the span over by one “nav size unit”. The emoji icons are subsequently rotated as necessary, to re-orient them in the right direction (as the previous rotation places some of them sideways, upside-down, etc).

第三个菜单采用完全不同的方法，并且在悬停时不会更改大小，而是变为透明，并对子元素应用效果，使子元素在菜单周围以圆圈显示。 通过使用以下position: fixed将菜单项的大小调整为与父项相同的大小，可以达到以下效果position: fixed以将它们垂直堆叠在一起，将每个项旋转90度以包围菜单，然后应用transform: translateX(var(--nav-size))转换为子span元素，该元素将span移动一个“ nav size单位”。 随后根据需要旋转表情符号图标，以将其重新定向到正确的方向(因为之前的旋转将它们中的一些横向放置，上下颠倒等)。

This example illustrates just a few cool menus that can be designed and built purely in CSS. These menus can be modified or extended in any number of ways to produce interactions that feel right for the application at hand. Some of these concepts can be transferred to responsive mobile designs, replacing hover interactions with implementations of the CSS checkbox hack.

此示例仅说明了一些可以完全在CSS中设计和构建的很酷的菜单。 可以通过多种方式修改或扩展这些菜单，以产生适合手边应用程序的交互。 这些概念中的一些可以转移到响应式移动设计中，用CSS checkbox hack的实现代替悬停交互。

When it comes to HTML and CSS, the front-end developer is only limited by imagination (a healthy dose of patience also goes a long way). Thanks for reading and good luck with your next project!

在HTML和CSS方面，前端开发人员仅受想象力的限制(健康的耐心也有很长的路要走)。 感谢您的阅读并祝您下一个项目顺利！