Q&A
CSSでは難しいと思います。
activeのような、クリックすると背後に揺れる画像が出るナビを作るのに苦労しています。
揺れる画像を単に背後に出すだけはできたのですが、クリックする前は非表示、クリックしたリンクにだけ現れるようにするのが
よくわかりません。
今のコードはこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>タイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="flex_"> <a href="#">top</a> <div class="huwahuwa"></div> <a href="#one">one</a> <div class="huwahuwa"></div> <a href="#two">two</a> <div class="huwahuwa"></div> <a href="#three">three</a> <div class="huwahuwa"></div> </div> </nav> <section id="one"> <p>ここはoneだよ</p> </section> <section id="two"> <p>ここはtwoだよ</p> </section> <section id="three"> <p>ここはthreeだよ</p> </section> </body> </html>
@charset "utf-8"; body{ width:960px; margin:0 auto; font-size: 16px; position: relative ; } a { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } nav{ height:90px; width:90%; margin:0 auto; position: fixed; top:0; left:0; } .flex_{ max-width: 1200px; width:40%; margin:0 0 0 60%; height:80px; line-height:80px; display: flex; position: relative; justify-content: space-between; } @media(max-width: 959px){ body{ width:100%; } .flex_{ width:50%; margin:0 auto; } } .flex_ a{ display: block; font-size:1.5rem; padding:0 0 0 15px; color:#000; text-decoration: none; } .huwahuwa{ animation:huwahuwa 3s infinite ease-in-out .8s alternate; background:url(icon.png) no-repeat center center / 60px auto; display:inline-block; transition:1.5s ease-in-out; width:100px; height:100px; margin-left:-100px; z-index:-99; } @keyframes huwahuwa { 0%{ transform:translate(0,0) rotate(-7deg); } 50%{ transform:translate(0,-7px) rotate(0deg); } 100%{ transform:translate(0,0) rotate(7deg); } } .flex_ a:hover{ opacity:0.6; transition: .6s; } #one,#two,#three{ width:100%; height:600px; } #one{ margin-top:80px; background:pink; z-index:-100; } #two{ background:skyblue; z-index:-100; } #three{ background:green; z-index:-100; } .hidden_box { margin: 0;/*前後の余白*/ padding: 0; position: relative; } /*ボタン装飾*/ .hidden_box label { padding: 15px; cursor :pointer; font-size:1.5rem; line-height:1.5rem; } /*ボタンホバー時*/ .hidden_box label:hover { opacity:0.6; } /*チェックは見えなくする*/ .hidden_box input { display: none; } /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding:0; height: 100px; opacity: 1; position: absolute; top:0; left:0; z-index: -99; }
回答1件
0
ベストアンサー
たとえば、こんな感じでしょうか。
↓サンプルです
https://jsfiddle.net/Lhankor_Mhy/c3mqpt5x/
css
1.huwahuwa{ 2 display: none; 3} 4.active+.huwahuwa{ 5 display: inline-block; 6}
js
1$('.flex_ a').on( 'click', e => $(e.target).addClass('active') )
投稿2021/06/23 04:29
総合スコア36074
回答ありがとうございます！うーん確かにこれではあるものの、「他のリンクがクリックされたときには今までクリックされていたhuwahuwaが消える」表示と非表示が同時に行われるものを作りたいのです。
せっかく作っていただいたのにごめんなさい。
removeClass()で消せばいいだけですよ。わからない点はどこですか？
（ご要望に合わせて「参考になりそう」なコードを書いただけで、完動品を回答したつもりはないです、念のため）
そうだったのですね、失礼しました。
ええと、私は良さそうなコードをコピペして中身をいじれる程度の知識しかないため、eやアローのようなものが出てくるとどうやってremoveClass(active)をこの後に取り付けるかがわからない状態です。
eとアロー式を取り除きました。
https://jsfiddle.net/Lhankor_Mhy/c3mqpt5x/1/
全部書いていただきありがとうございました。お手数をおかけしてすみません、これで実装できそうです。とても助かりました。removeはaddの前に入れなくちゃいけないのもthisの使い所もよくわかっていない未熟者なため、教科書を片手に勉強しようと思います。重複になりますがありがとうございました。
いえいえ、お役に立てたようで何よりです。
addClass removeClass toggleClass は、CSSを簡単に組み合わせることができて、覚えて損はないと思います。お時間のある時にチャレンジしてみてください。
あなたの回答
tips
プレビュー
