英文:
Center dropdown sub-categories on hovering with css animation
问题
在向我的导航栏添加CSS动画效果之前，一切都是居中的，工作得很完美，但现在有了动画，当悬停在主分类上时，子分类不再居中显示在中间。
我尝试使用以下样式：
text-align: center;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
但似乎没有起作用。
此外，我还在这里创建了一个 Codepen，以查看它的工作方式并进行实验：Codepen链接
有没有办法在悬停主分类时将子分类居中显示？
英文:
Before I added a CSS animation effect to my navbar, everything was centered and working perfect, but now with the animation, when hovering the main-categories, the sub-categories are no longer displayed centered in the middle.
I tried using
text-align:center, margin:0 auto, left:50% and transform:translatex(-50%);
but nothing seems to work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'IBM Plex Serif', serif;
font-size: 16px;
font-weight: 400;
color: #121212;
}
a {
color: #121212;
text-decoration: none;
}
a:hover {
color: #E5633F;
}
nav {
grid-area: navi;
display: block;
text-align: center;
border-bottom: 3px solid #121212;
background-color: inherit;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
cursor: pointer;
z-index: 8;
width: 100%;
}
main-categories {
position: relative;
display: inline-block;
background-color: inherit;
text-transform: uppercase;
height: 42px;
line-height: 42px;
text-align: center;
padding: 0px 22px 0px 22px;
}
main-categories:hover {
color: #E5633F;
}
main-categories a {
position: relative;
text-decoration: none;
}
main-categories a:hover {
color: #E5633F;
}
main-categories a:before{
content: '▪ ';
}
sub-categories {
display: none;
position: absolute;
width: auto;
left: 50%;
transform: translatex(-50%);
text-align: center;
white-space: nowrap;
background-color: inherit;
}
sub-categories a {
display: block;
font-size: 15px;
padding: 0 36px 0 36px;
text-transform: capitalize;
text-decoration: none;
height: 36px;
line-height: 36px;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
border-bottom: 1px solid #121212;
}
sub-categories a:hover {
color: #FFFFFF;
background-color: #121212;
}
main-categories:hover sub-categories {
display: block;
}
sub-categories a:before{
content: '';
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg)
}
70% {
transform: rotateX(20deg)
}
100% {
transform: rotateX(0deg)
}
}
<!-- language: lang-html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<nav class="menu">
<!-- 1. -->
<main-categories>
<a href="#void">News</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 2. -->
<main-categories>
<a href="#void">Politics</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 3. -->
<main-categories>
<a href="#void">Economy</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 4. -->
<main-categories>
<a href="#void">Health</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 5. -->
<main-categories>
<a href="#void">Education</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 6. -->
<main-categories>
<a href="#void">Culture</a>
</main-categories>
</nav>
<!-- end snippet -->
I also created a Codepen here to see it working and play around with it
https://codepen.io/familias/pen/XWygWzY
Any idea how to center the sub-categories when hovering the main-categories?
答案1
得分: 1
代码反映
sub-categories {
left: 50%;
transform: translateX(-50%);
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg);
}
70% {
transform: rotateX(20deg);
}
100% {
transform: rotateX(0deg);
}
}
这是正确的代码以设置中心位置。然而，transform: translateX(-50%);（在sub-categories中）没有生效，因为您在动画中覆盖了它...所以它应该在动画结束时应用！
解决方案
sub-categories {
left: 50%;
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg) translateX(-50%); /* 在这里 */
}
70% {
transform: rotateX(20deg) translateX(-50%); /* 在这里 */
}
100% {
transform: rotateX(0deg) translateX(-50%); /* 在这里 */
}
}
在动画中，当您定义变换时，需要在每处都包含transformX(-50%)。这样，它将在动画期间和之后应用于元素。
示例
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-css -->
/*** 可选设置 ***/
.menu {
display: flex; /* 不需要调整，但这样菜单将始终单行显示，即使在小屏幕上也是如此。 */
}
.menu > main-categories > a {
display: flex; /* 无需调整，但这样点和<a>内的文本将始终放在一起。 */
gap: 5px; /* 两个元素之间的距离可以在Flex中设置，因此点和文本之间始终有5px的距离。 */
}
/*** 原始设置 ***/
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'IBM Plex Serif', serif;
font-size: 16px;
font-weight: 400;
color: #121212;
}
a {
color: #121212;
text-decoration: none;
}
a:hover {
color: #E5633F;
}
nav {
grid-area: navi;
display: block;
text-align: center;
border-bottom: 3px solid #121212;
background-color: inherit;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
cursor: pointer;
z-index: 8;
width: 100%;
}
main-categories {
position: relative;
display: inline-block;
background-color: inherit;
text-transform: uppercase;
height: 42px;
line-height: 42px;
text-align: center;
padding: 0px 22px 0px 22px;
}
main-categories:hover {
color: #E5633F;
}
main-categories a {
position: relative;
text-decoration: none;
}
main-categories a:hover {
color: #E5633F;
}
main-categories a:before {
content: '▪ ';
}
sub-categories {
display: none;
position: absolute;
width: auto;
left: 50%;
/* transform: translateX(-50%); 这不起作用，因为您已经在动画中覆盖了它...所以它应该在动画结束时应用！ */
text-align: center;
white-space: nowrap;
background-color: inherit;
}
sub-categories a {
display: block;
font-size: 15px;
padding: 0 36px 0 36px;
text-transform: capitalize;
text-decoration: none;
height: 36px;
line-height: 36px;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
border-bottom: 1px solid #121212;
}
sub-categories a:hover {
color: #FFFFFF;
background-color: #121212;
}
main-categories:hover sub-categories {
display: block;
}
sub-categories a:before {
content: '';
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg) translateX(-50%); /* 在这里 */
}
70% {
transform: rotateX(20deg) translateX(-50%); /* 在这里 */
}
100% {
transform: rotateX(0deg) translateX(-50%); /* 在这里 */
}
}
<!-- 语言: lang-html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<nav class="menu">
<!-- 1. -->
<main-categories>
<a href="#void">News</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 2. -->
<main-categories>
<a href="#void">Politics</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 3. -->
<main-categories>
<a href="#void">Economy</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href
<details>
<summary>英文:</summary>
### Reflection to your code
```css
sub-categories {
left: 50%;
transform: translateX(-50%);
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg);
}
70% {
transform: rotateX(20deg);
}
100% {
transform: rotateX(0deg);
}
}
Thats correct code to set center position. However, transform: translateX(-50%); (on sub-categories) doesn't take effect because you have overridden it with the animation... so it should be applied at the end of the animation!
Solution
sub-categories {
left: 50%;
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg) translateX(-50%); /* HERE */
}
70% {
transform: rotateX(20deg) translateX(-50%); /* HERE */
}
100% {
transform: rotateX(0deg) translateX(-50%); /* HERE */
}
}
In the animation, when you define the transform, you need to include transformX(-50%) everywhere. This way, it will be applied to the element during and after the animation.
Example
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*** OPTIONAL SETTINGS ***/
.menu {
display: flex; /* No adjustment is necessary, but this way the menu will always be single-line, even on small screens. */
}
.menu > main-categories > a {
display: flex; /* No need for adjustment, but this way the dot and the text within the <a> will always be placed next to each other. */
gap: 5px; /* The distance between the two elements can be set in Flex, so there will always be a 5px distance between the dot and the text. */
}
/*** ORIGINAL SETTINGS ***/
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'IBM Plex Serif', serif;
font-size: 16px;
font-weight: 400;
color: #121212;
}
a {
color: #121212;
text-decoration: none;
}
a:hover {
color: #E5633F;
}
nav {
grid-area: navi;
display: block;
text-align: center;
border-bottom: 3px solid #121212;
background-color: inherit;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
cursor: pointer;
z-index: 8;
width: 100%;
}
main-categories {
position: relative;
display: inline-block;
background-color: inherit;
text-transform: uppercase;
height: 42px;
line-height: 42px;
text-align: center;
padding: 0px 22px 0px 22px;
}
main-categories:hover {
color: #E5633F;
}
main-categories a {
position: relative;
text-decoration: none;
}
main-categories a:hover {
color: #E5633F;
}
main-categories a:before {
content: '▪ ';
}
sub-categories {
display: none;
position: absolute;
width: auto;
left: 50%;
/* transform: translateX(-50%); This doesn't take effect because you have overridden it with the animation... so it should be applied at the end of the animation! */
text-align: center;
white-space: nowrap;
background-color: inherit;
}
sub-categories a {
display: block;
font-size: 15px;
padding: 0 36px 0 36px;
text-transform: capitalize;
text-decoration: none;
height: 36px;
line-height: 36px;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
border-bottom: 1px solid #121212;
}
sub-categories a:hover {
color: #FFFFFF;
background-color: #121212;
}
main-categories:hover sub-categories {
display: block;
}
sub-categories a:before {
content: '';
}
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg) translateX(-50%); /* HERE */
}
70% {
transform: rotateX(20deg) translateX(-50%); /* HERE */
}
100% {
transform: rotateX(0deg) translateX(-50%); /* HERE */
}
}
<!-- language: lang-html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<nav class="menu">
<!-- 1. -->
<main-categories>
<a href="#void">News</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 2. -->
<main-categories>
<a href="#void">Politics</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 3. -->
<main-categories>
<a href="#void">Economy</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 4. -->
<main-categories>
<a href="#void">Health</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 5. -->
<main-categories>
<a href="#void">Education</a>
<sub-categories>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<!-- 6. -->
<main-categories>
<a href="#void">Culture</a>
</main-categories>
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论