
この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 <li>の中の文字一部に色を...
-
レスポンシブWebデザインでリン...
-
liタグの中に<p>タグやら<dl>を...
-
リストの左余白の削除方法
-
<ul><li></li></ul>にするメリ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
疑似クラス :activeが効きません
-
<li>タグの数が増えすぎたので...
-
CSSのデクレッシェンド(>)と...
-
URLにアクセスした際に指定した...
-
<table>の高さ固定。情報増加時...
-
左メニューをCSSで固定したい
-
リンク文字同士の間隔を開ける...
-
ulタグやliタグの中でbrタグ...
-
excel vba で ulタグのなかのse...
-
更新履歴の作り方
-
html/cssの、navを2段にする...
-
HTMLで組織図を作成する方法
-
真横に展開するドロップダウン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
HTMLで組織図を作成する方法
-
list-style-type部分だけ大きく...
-
htmlの<ol>タグで、数字などを...
-
テーブル内のプルダウンの下に...
-
html <li>の中の文字一部に色を...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
レスポンシブWebデザインでリン...
-
背景色を行ごとに変えるには?
-
Dreamweaverで、ul要素の下に写...
-
ページを開いているときのリン...
おすすめ情報