CSSでつくったメニューのアニメーションがうまく動かない・変えたい

締切済

質問者：優里さん
質問日時：2024/01/21 11:48
回答数：2件

このHTMLでは、Widthが500px以下の場合、チェックボックスにチェックが入れられたらアニメーションで<ul id="topnav">を表示するのですが、チェックボックスのチェックを外した時にもアニメーションで消えていくようにできません。アニメーションが始まる（表示される範囲）をチェックボックスより下にしたいです。どうしたらいのか教えていただきたいです。フルのHTMLも教えていただきたいです。よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Menu Example</title>
<style>
/* メニューボタン */
.menu-button {
display: none;
}

/* 横幅が500px以下の場合にul要素を非表示にする */
@media only screen and (max-width: 500px) {
#topnav {
display: none;
}
.menu-button {
display: block;
}
}

/* メニューボタンをクリックしたらul要素を表示する */
@media only screen and (max-width: 500px) {
.menu-button:checked ~ #topnav {
display: block;
animation: slide-down 0.5s ease-out;
}
}

/* スライドダウンアニメーション */
@keyframes slide-down {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

/* メニューボタンをクリックしたらul要素を非表示にする */
@media only screen and (max-width: 500px) {
.menu-button:not(:checked) ~ #topnav {
display: none;
animation: slide-up 0.5s ease-out;
}
}

/* スライドアップアニメーション */
@keyframes slide-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
</style>
</head>
<body>

<input type="checkbox" class="menu-button">
<ul id="topnav">
<li><a>Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2024/01/21 21:05

No1です。

連投失礼。
見直したら、「-100%」は自分自身の高さにならないので、タイミングが少しおかしくなりますね。
HTMLはそのままで、CSSは以下にしておいた方がよさそうです。

<style>
#topnav {
overflow: hidden;
}
#topnav ul {
transform: translate(0, -120%);
transition: transform 0.8s;
}
.menu-button:checked + #topnav ul {
transform: translate(0, 0);
}
</style>

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2024/01/21 13:03

こんにちは

＞チェックを外した時にもアニメーションで消えていくようにできません。
原因は、display:none; を指定しているので、先に非表示になってしまうために、アニメーション効果は見えないですね。

＞（表示される範囲）をチェックボックスより下にしたいです。
意味がちょっとはっきりわかりませんけれど、画面の上からではなく、表示される範囲内だけでスライドしたいということと解釈しました。
表示する部分だけをクリップしてアニメーションする方法も考えられますが、簡単なのは包含要素を設けておいて、その範囲内で表示する方法だと思います。

また、アニメーションの内容が単純なので、@keyframesを用いるよりもtransitionで行う仕組みにした方が簡単になります。

仮に、HTMLを
<input type="checkbox" class="menu-button">
<div id="topnav">
<ul>
<li><a>Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</div>
のようにしておいて、

※ 以下では @media～は省略してありますので、常時の表示になります。
<style>
#topnav {
overflow: hidden;
}
#topnav ul {
margin-top: -100%;
transition: margin 0.8s;
}
.menu-button:checked + #topnav ul {
margin-top: 0;
}
</style>
などとすることで、ほぼご質問の内容になると思います。
（細かな設定はいい加減です。）