
この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>
No.2ベストアンサー
- 回答日時:
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>
No.1
- 回答日時:
こんにちは
>チェックを外した時にもアニメーションで消えていくようにできません。
原因は、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>
などとすることで、ほぼご質問の内容になると思います。
(細かな設定はいい加減です。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない 3 2024/01/05 17:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
レスポンシブで困っています・・
-
HTML/CSSを使って写真のような...
-
テーブルの行を折りたたみたい...
-
HTMLタグのあるCSVファイルを利...
-
HTMLでクロス抽出したい
-
ホームページの制作について教...
-
テーブルのセルデータを自動改...
-
HTML&CSS メディアクエリにつ...
-
、URL化させるにはどうしたらい...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
GoogleSearchControlにホームペ...
-
HTML&CSS メディアクエリについ...
-
HTML&CSS メディアクエリ
-
HTML&CSSについて。
-
HTML &CSSとHTML5&CSS3 違い
-
HTML&CSSとHTML5&CSS3の違い...
-
HTML&CSSとHTML5&CSS3の違い...
-
列のどこをクリックしてもソー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報