イイダリョウのブログ。HTMLスマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。smooth(CSSだけでスムーススクロール)最後にJS(クリックイベント)を使ったハンバーガーこれまでのハンバーガーメニュー。CodePen.ヘッダー右上の開くボタン(三)を押すと右側からハンバーガーメニューが出てきます。メニューの中の閉じるボタン(×)を押すとメニューが閉じる。開くボタン(三)とメニューが大きな塊で、閉じるボタン(×)はメニューの中に含まれています。positonの位置はtop設定のみ。transitionアニメについてはこちらで解説しています。クモのようにコツコツとpositionのright設定はクラス名.outside、.insideの方に書いています。.outsideは右に-100%つまり自分の幅分ページの外側に配置されちる。.inside右に0`つまり画面右端だが、まだHTML上にない。false);変数openと#open、変数closeと#close、変数g_menuと#g_menuを紐付けopenをクリックしたとき、g_menuにクラス名inside追加、クラス名remove削除closeをクリックしたとき、g_menuにクラス名inside削除、クラス名remove追加メニューの位置やアニメはすべてCSS上に書いているので、JSではクリックイベントでclass名を追加、削除するだけ。insideを追加するとメニューがページ外から右端に移動する。これはCSSマリオをジャンプさせた時と同じ方法。クモのようにコツコツとCSS(擬似クラス:target)のみのハンバーガーさて、これまではこの方法で作ってきたのですが、擬似クラス:targetを使うとJSなしでCSSのみで実現できそうでした。コリス:targetはページ内リンクのaタグをクリックした時に指定先のid名のタグに当たるスタイルです。CodePen.どうですか!動作に関しては最初のJSを使ったハンバーガーメニューと全く同じじゃないですか!でも「JS」のタブを開くと1行も書かれていないことがわかります。</div></nav>#g_menuにあったクラス名.outsideはここでは付いていないHTML上の違いはほとんどありませんね。#g_menuにクラス名がなくなったくらい。0は.insideではなく#g_menu:targetにここに擬似クラス:targetが入ります。開くボタン(三)のリンク先は#g_menuなので開くボタンを押した時にページ外にあるメニューが画面右端に移動します。1行目の:not()は以前こちらで解説しました。クモのようにコツコツと:not(:target)は:target以外、つまり開くボタン(三)を押したとき以外はメニューがページ外という設定。そのため閉じるボタンやメニューをクリックするとページ外に移動します。smooth(CSSだけでスムーススクロール)もう一つ、今回知ったCSSがありました。smoothといってJSを使わずにCSSだけでページ内リンクのスムーススクロールを実現する方法です。smooth;}実際にやっみたので、ハンバーガーメニューの中の「メニュー1」とかを押してみてください。CodePen.っと、先ほどの記事にもあったように、どうやらSafariでは動かない模様。etc対応が待たれますねー。それまではこれまで通りJSを使いませう。ONZE最後にクリックイベントの代替に使えそうなCSS:target。etcCSSで完結できることがどんどん増えていくのは嬉しい限りです。昔はアニメーションの設定値もJSに書いてましたからね〜。20:22Tweet関連記事2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-07-30【Tone.js】3コード楽器を1オクターブに拡張するTone.jsシリーズ、前回は3コード楽器のコードを拡張しやすいよ...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。