css 菜单栏悬停_在CSS中构建悬停菜单

css 菜单栏悬停

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.

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