####目標
- もはや維持だけになっているjQuery縛りで、CSSのみで三本線のメニューを美しく表示させたい。
- 調べて行くうちに、ラジオボタンを使う方法がいいのではないかと判断したがうまくできない現状。
####参考にしたサイト
####大まかなHTML構成 - 動作確認サンプル
HTML
1<nav> 2<input type="checkbox" id="nav"/> 3<label for="nav"> 4<span class="nav-btn"></span> 5<div class="nav-content">コンテンツだよ!</div> 6</label> 7</nav>
####使用してみたCSS
css
1nav { 2 position: relative; 3} 4nav label { 5 height: auto; 6} 7.nav-content { 8 display: none; 9} 10.nav-btn { 11 display: block; 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 width: 14px; 16 height: 2px; 17 margin: -1px 0 0 -7px; 18 background: #000; 19 transition: .2s; 20} 21.nav-btn:before,.nav-btn:after{ 22 display: inline-block; 23 content: ""; 24 position: absolute; 25 top: 50%; 26 left: 0; 27 width: 14px; 28 height: 2px; 29 background: #000; 30 transition: .3s; 31} 32.nav-btn:before{ 33 margin-top: -6px; 34} 35.nav-btn:after{ 36 margin-top: 4px; 37} 38 39input:checked .nav-content { 40 display: block; 41} 42input:checked .nav-btn:before, input:checked .nav-btn:after{ 43 margin-top: 0; 44} 45input:checked .nav-btn:before{ 46 transform: rotate(-45deg); 47 -webkit-transform: rotate(-45deg); 48} 49input:checked .nav-btn:after{ 50 transform: rotate(-135deg); 51 -webkit-transform: rotate(-135deg); 52}
####要望
- CSSのみで完結させたい
CSSのラジオボタンを使うのはほぼ初めてで全然うまくいかなかったので、解決方法がわかる方は教えてください
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/04 17:03
2017/03/04 17:17
2017/03/04 18:11