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.

基本思想很簡單：當鼠標懸停在菜單上時，應用所需的任何效果(例如，擴展菜單或更改背景顏色)，然后向用戶顯示菜單的內容。 菜單的內容可以多種方式安排，我們將在稍后進行檢查。

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方面，前端開發人員僅受想象力的限制(健康的耐心也有很長的路要走)。 感謝您的閱讀并祝您下一個項目順利！

翻譯自: https://uxdesign.cc/building-hover-menus-in-css-fd901931f06f

css 菜單欄懸停

總結

以上是生活随笔為你收集整理的css 菜单栏悬停_在CSS中构建悬停菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。