質問: ### 前提・実現したいこと YouTubeに動画を貼り付けていますが、このようなメニューをHTMLとCSSで実装したいと考えています。しかし、どのようにソースコードを書けばよいのかが全体的にわかりません。 メニュー再現動画リンク *追記* HTMLとCSSのソースコードを参考にしたサイトのリンクを掲載しました 色々なメニューとしての参考 色々なメニューとしての参考2 ソースコードについての解説がったので参考として見ているサイト スキルとしては、HTML, CSSテンプレートで変更したい点を自分好みに変更する程度ならできます。(感覚としては塗り絵はできるけど元となるイラストは描けないよ。みたいな感じです) ### 発生している問題・エラーメッセージ なし ### 試したこと 他の方々が作られたメニューのソースコード(HTML・CSS)を参考にし、ドロップダウンなどは見つけることができましたが、動画のように「メニュー内で目次が移り変わる」というものを見つけることはできませんでした。 ### 補足情報(FW/ツールのバージョンなど) HTML5 CSS3 を使用していて、ソフトウェアはSublime Text3を使っています。 こちらの質問内容は複数回編集を加えているので最初の状態から変更されている箇所があります。
回答: とりあえず基礎のおさらい ============= 今回の実装について,まず以下の段階に分けて考えてみましょう. 1. ボタンを押すと何かが動くものを作る 2. ハンバーガーを表示する 3. ハンバーガーを押すと何かが動くようにする この3つが自力でできれば,入れ子的な実装は,そう難しくはないです 1の「ボタンを押すと何かが動く」の実装方法は,HTML,CSSでやる方法だけで,ざっくり3種類あります(もしかしたら,私が知らないだけで,もっとあるかも) それぞれ,以下の「擬似クラス」が肝になります. 名前が怖いと思うかもしれませんが,気にしないでください. CSSでボタンを実装するには,彼らの助けが必要なのです^^ * `:hover` * `:target` * `:checked` 一応,1つずつ説明します :hover擬似クラス ============ もうご存知かと思うので説明を省略 **トリガーに使うときの注意点:** 常にマウスカーソルが対象に乗っている必要がある :target擬似クラス ============= こんなHTMLに ``` これはページ内リンク : ・ 小タイトル lorem ipsam... ``` こんなCSSを書くと, ``` #sec_2:target{ background: green; } ``` ページ内リンクを押した際,idがsec_2の部分にスクロールされます リンク先がtargetされ,背景色を緑にします 記事のトップに戻るボタンは,`href="#"`使ってたりします hrefに入れる文字は,要素のidでないとだめです **トリガーに使うときの注意点:** URLの末尾に#~~と書かれてしまうので,ただのボタンには向かない.ページ遷移の代替として,モーダルウィンドウを表示させたいときや,ダイナミックにページがスライドするときに使うのが自然 :checked擬似クラス ============== 本来はフォーム要素で使うものですが,この際,細かいことには目をつむりましょう こんなHTMLと ``` touch me ``` こんなCSSを書くと ``` input:checked +for="btn"]{ background: red; } ``` こうなります(雑) ![checkedのgif ちなみに, 「+」は隣の要素を指定するやつ, 「>」は直下の要素の指定, 「~」は下に続く,同じ階層の要素を指定するやつ, 「foo="bar"]」は属性で指定できるやつです * CSS3のセレクタ全42種 まとめておさらい使い方リファレンス **トリガーに使うときの注意点:** 注意点,というかかなり利点,内包関係を気にせず使えるので,hoverやtargetで手が届かないところをダイレクトにいじれる *「もう,ぜんぶこいつでいいんじゃないかな」* 内容が濃すぎて,説明が雑になってきたので,Web上のリファレンスに頼ろう! * [CSS]知ってると便利!「:target疑似クラス」を使ったスタイルシートのテクニックと注意点 * もうすぐクリスマスなのでinputとlabelの仲を引き裂いてみた * [CSS]この発想はなかった!inputとlabelを使って実装する美しいデザインのアコーディオン * [CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css ...と思ったけど,なかなか分かりやすいリファレンスが見つからないし,デモ作った方が早そうなので,とりあえず,ここでいったん休憩して,明日以降に,続きを書きます. ZZZ... ======= ( ̆ω ̆)スヤァ 追記(20180811) ============= ![hovermenugif ところどころ妥協してますが,`:hover`でやるバージョンはこんな感じになりました 解説に使おうと思っていたデモコードが,左から初級・中級・上級のタブに分かれています. 説明もしっかり書きたいところですが,ここに書くには余白が狭すぎる()ので,いったん省略し,コードを読んでいただいた上で,分からないところがあれば,逐一答えていくようにしようかと思います. 上記リンク先ページの右上にある「リミックス」ボタンを押すとコードの閲覧・編集ができます また,このリンク先のページは今後も更新します(まだ`:target`と`:checked`のデモが未完成なので...) ちなみに,セマンティックなHTMLでやろうとすると,`:hover`だけでやる方法がおそらく最も詰みやすいので,もし心が折れた場合は,素直に`:checked`とか使いましょう^^ (ADVANCEDでいきなりセマンティックにやろうとしたのは痛恨のミス 追記(20180812) ============= !fullgif とりあえず,目的のメニューのデモは一通りできたので,お知らせします ちなみに,ページ内のタブ切替は`:checked`による作例の1つです. divでやる人が多いと思うのですが,構造がつかみやすくなるので,`dl`,`dt`,`dd`で組みました 詳しい説明等は,今度Qiitaで記事を書いたときに,覚えていたら,URLを張りに来ようと思います