質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

426閲覧

HTML5・CSS3を使用した縦メニュー実装に関する相談

MioMioHayabusa

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2018/08/10 12:15

編集2018/08/10 14:57

前提・実現したいこと

YouTubeに動画を貼り付けていますが、このようなメニューをHTMLとCSSで実装したいと考えています。しかし、どのようにソースコードを書けばよいのかが全体的にわかりません。

メニュー再現動画リンク

*追記*
HTMLとCSSのソースコードを参考にしたサイトのリンクを掲載しました
色々なメニューとしての参考
色々なメニューとしての参考2
ソースコードについての解説がったので参考として見ているサイト

スキルとしては、HTML, CSSテンプレートで変更したい点を自分好みに変更する程度ならできます。(感覚としては塗り絵はできるけど元となるイラストは描けないよ。みたいな感じです)

発生している問題・エラーメッセージ

なし

試したこと

他の方々が作られたメニューのソースコード(HTML・CSS)を参考にし、ドロップダウンなどは見つけることができましたが、動画のように「メニュー内で目次が移り変わる」というものを見つけることはできませんでした。

補足情報(FW/ツールのバージョンなど)

HTML5
CSS3
を使用していて、ソフトウェアはSublime Text3を使っています。

こちらの質問内容は複数回編集を加えているので最初の状態から変更されている箇所があります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

liveasnotes

2018/08/10 13:43

■丸投げ系の質問は本当はだめなのですが,個人的に面白そうだと思ったので,答えてみたいと思います. ■ただ,その前にいくつか必要な情報があるので,以下の点に注意しながら,質問文を修正していただきたいです. ■【①】自分の知識やスキルの程度を示す.過去作があれば,そのリンクを示しても良い(どの程度噛み砕いて回答を書く必要があるのか見当を付けるためです.Web系やプログラミング系でなくても良いです.) ■【②】実際に書いたコードや,試している途中のものがあれば,せめてもの努力の証として示すべし(回答する側のやる気を左右します.デモを動画で示しているのは非常に良いと思います.) ■【③】各機能(動き)のトリガーが不明なので,それを示す(特に,今まで見たことのないような動きを実装する場合は,どの部分に何をすることで,その動きが発生するのか,またその動きの結果が持続するのか,もとに戻るときのトリガーは何なのか,といったことまで示すと,要件が明確に伝わります) ■【④】デザイン上の制約について,予め示す.(文字サイズは固定なのか変動なのか,アイコンは画像かCSSか,各ボタンやラベル等のサイズ・縦横比は固定か変動か,などなど...) ■【⑤】最低限対応させたい,画面サイズ・縦横比・ブラウザ・OS等があれば記述する(これは殆ど必要ないといえば必要ないですが,ワンソースでコードを書く癖のある人は,ときどき聞いてくると思われます.聞かれたら答える程度でいいかも) ///以下余談/// ■最初に「丸投げ系はダメ」とは書きましたが,初心者のうちは誰でも全体的に分からないものなので,あまり気にしなくても良いです.わざわざ動画を用意していただいたり,開発環境について書いているあたり,こっち系の人たちの気質も分かっているようですし,これからもそのスタンスでやっていけば大丈夫です ■ただ,やっぱり初めのうちはギャップが大きいので,かなり簡単なサイトを作るところから始めるのをお薦めします(私が最初に作ったサイトは,中央に楕円が浮かんでいるだけのサイトでした) ■いきなり完成品を作ろうとせず,部品単位に分けて製作し,画家がときどきアイデアスケッチを公開するのと同じように,それらをポートフォリオサイト上で,習作として公開するつもりでやると,気が楽です.上手くいかなくても,次に作ったときにもっとよく出来ていれば,それで良いからです. ■つい,いっぱい書いちゃいましたが,今回の質問文で最低限必要な修正は【③】なので,まずはそこからお願いいたします.あとは,これから順次実装する感じで良いです(とりあえず,まずは続けることが大事.回答者側も結構自由にやってるところもあるので,完璧にしようと気を張る必要はありません
liveasnotes

2018/08/10 13:45

要約:「動きは分かったけど,何を押したらそう動くようにしたいのか分からないぜ」
MioMioHayabusa

2018/08/10 14:34 編集

丁寧にありがとうございます???? まず、何を押したらどうなるということについての回答ですが、 動画内で左上の「三」...(ハンバーガーメニュー?)を押したら、左からメニュー(1層目)が出てくるようにしたいです。 ここまでは、いろいろなサイトで紹介されていたりしたので、最悪2層目ができないと判断した場合はこれで頑張ろうと思います。 続いてメニュー(1層目)をクリックかタップすると、左にスライドするようなアニメーションと共にメニュー2、メニュー3が現れるような構造にしたいと考えています。 もし、不十分な内容があれば教えてください♪
m.ts10806

2018/08/10 14:44

liveAsNotesさん 「答えてみます」なのであれば回答に書いてください。コメント欄では改行もマークダウンも使えないので句読点を幾ら適切に置いていたとしても読みづらいです。
m.ts10806

2018/08/10 14:48

もし質問内容に対する指摘なのであれば項目ごとにコメントを分けてあげたほうが質問者さんも確認しやすく読みやすく漏れも起きにくいかと。
m.ts10806

2018/08/10 14:49

私としてはタイトルが要件とは言い難いのでもう少し質問内容に寄ったタイトルにしていただきたいです。このタイトルだと別の内容でも書けてしまいます。同じタイトルで別の内容というのは基本的に起こりえないものと思います。(連番でシリーズ物にする人がたまにいますが、実際は細かく要件変わってるのでNGという認識)
liveasnotes

2018/08/10 14:50

確かに読みづらいですよね,すみません.次からはもっと手短に書くか,質問欄に書くようにします
MioMioHayabusa

2018/08/10 14:52

mts10806さん、コメント欄と解答欄って別物だったんですね???? タイトルは修正を入れておきますね!
hope_mucci

2018/08/10 14:55

javascriptは使っちゃイカンのですか?cssだけでやっつけるのは相当なイバラロードな気がするのですが。
MioMioHayabusa

2018/08/10 15:02 編集

hope_mucciさん、過去にソースコード記述者としてはJavascriptに触れた経験がないので、そもそもJavascriptが何であるかを知らないのです???? でも、Javascriptの方が簡潔に済むのであれば興味深いですね
liveasnotes

2018/08/10 15:04

むしろCSSでしかボタン作ったことのない人が私だったりします(CSS3すごく便利
hope_mucci

2018/08/10 15:08

この機会にJavaScriptを習得してみては?を「多階層ドロワーメニュー」で検索すると、実装例や動くデモサイトがいろいろ見つかりますよ。
MioMioHayabusa

2018/08/10 15:36

hope_mucciさん、そうですね。HTMLとCSSでの実装に合わせてJavascriptで簡単そうなものを探してみることにします!✨
yukihisa

2018/08/15 05:10

横から失礼。今回の質問内容とはかけ離れてしまいますがCSSボタンについて。サルワカくんもですが、CSSボタンにhoverなどで動きを付ける場合、結構な割合のサイトが境界辺りにポインタを持って行った際の動きに対応しておらず、細かい人間が見るといらっとする動きをしたりします。エンジニア塾とかでさえそれを放置している現状に危機感を持っていたりなんて。。。主題と離れてますね、申し訳ない。さて、ドロワーメニューですが、他の方も指摘していますがやはりCSSよりもjavascriptを用いた方がやりやすいんではないかなと思います。
liveasnotes

2018/08/15 05:44

動画のメニューいいですね!どこからともなくふわっと出てくるのが良い感じです! (p.s.境界付近の挙動といえば,:hover時に回転するボタンを作ったとき,最終的に擬似要素だったか,親要素だったかを:hoverの対象にして実装したのですが,スマホ対応も含めてワンソースでやったので,かなりヤバいコードが出来上がりましたねえ.今だったらもうちょっと簡潔に書けるかなあ
yukihisa

2018/08/15 06:08

おぉ、動画確認してみましたがきれいに仕上がってますね、素晴らしい。さっき自己解決にしていた質問について。メニュー項目が多くなりすぎたときは思い切ってサイト自体を分けてみるっていうのも一つの手だったりします。SEO的にもターゲットを絞り込むことができていいですよー (蛇足 僕は境界線付近の挙動対策についてはボタンにhover付けて子要素をぶん回す感じで作ってますが、他にもいい方法があればぜひ知りたいですね!
hope_mucci

2018/08/15 22:41

おおっ、すごい!カッコよく仕上がっていますね。お疲れさまでした。イメージ通りのものが実現できたようで良かった。
guest

回答2

0

hover擬似クラスを使った実現方法は、既に他の回答者さんが回答しているようなので、checked擬似クラスを用いた方法を回答します。checked擬似クラスを使うと、質問者さんが実現したいような動作は、以下のように行えると思います。現在、動作確認ができる状況ではないため、動作確認をしていませんが、あまり難しいことはしていないと思うので、もし正しく動作しない箇所があったとしても、ソースコードを読んでみると、何をしようとしているのかが分かると思います。

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 * { 8 box-sizing: border-box; 9 margin: 0; 10 padding: 0; 11 } 12 13 body { 14 color: #cdcdcd; 15 background: #232323; 16 } 17 18 a, label[for='check2'] { 19 text-decoration: none; 20 color: #232323; 21 } 22 23 #menuToggle { 24 width: 300px; 25 height: 100vh; 26 } 27 28 input[type='checkbox'] { 29 display: none; 30 } 31 32 label[for='check1'] { 33 position: fixed; 34 z-index: 1; 35 top: 10px; 36 left: 10px; 37 width: 33px; 38 mix-blend-mode: difference; 39 } 40 41 label[for='check1'] > span { 42 display: block; 43 width: 100%; 44 height: 4px; 45 margin-bottom: 5px; 46 background: #cdcdcd; 47 } 48 49 #menu, #submenu { 50 position: absolute; 51 top: 0; 52 width: 300px; 53 height: 100vh; 54 padding-top: 50px; 55 transition: .5s; 56 } 57 58 #menu { 59 left: -100%; 60 overflow: hidden; 61 background: #cdcdcd; 62 } 63 64 #submenu { 65 right: -100%; 66 background: #f2f2f2; 67 } 68 69 #check1:checked ~ #menu { 70 left: 0; 71 } 72 73 #check2:checked ~ #submenu { 74 right: 0; 75 } 76 </style> 77</head> 78<body> 79<nav> 80 <div id="menuToggle"> 81 82 <input type="checkbox" id="check1"> 83 <label for="check1"> 84 <span>&nbsp;</span> 85 <span>&nbsp;</span> 86 <span>&nbsp;</span> 87 </label> 88 89 <ul id="menu"> 90 <li> 91 <input type="checkbox" id="check2"> 92 <label for="check2">メニュー1</label> 93 <ul id="submenu"> 94 <li><a href="#">メニュー2</a></li> 95 <li><a href="#">メニュー3</a></li> 96 <li><label for="check2">メニュー1に戻る</label></li> 97 </ul> 98 </li> 99 </ul> 100 101 </div> 102</nav> 103</body> 104</html>

投稿2018/08/11 12:07

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MioMioHayabusa

2018/08/11 15:41

HTMLのみで動かせるのですか!????? 早速本日中に試してみたいと思います!
s8_chu

2018/08/12 10:21

まあ、おそらく動くと思います(まだ動作確認はできていませんが)。 `checked擬似クラス`と`隣接セレクタ`, `間接セレクタ`を使ったCSS制御は便利なので、覚えておくと良いと思います。
guest

0

ベストアンサー

とりあえず基礎のおさらい

今回の実装について,まず以下の段階に分けて考えてみましょう.

  1. ボタンを押すと何かが動くものを作る
  2. ハンバーガーを表示する
  3. ハンバーガーを押すと何かが動くようにする

この3つが自力でできれば,入れ子的な実装は,そう難しくはないです
①の「ボタンを押すと何かが動く」の実装方法は,HTML,CSSでやる方法だけで,ざっくり3種類あります(もしかしたら,私が知らないだけで,もっとあるかも)

それぞれ,以下の「擬似クラス」が肝になります.
名前が怖いと思うかもしれませんが,気にしないでください.
CSSでボタンを実装するには,彼らの助けが必要なのです^^

  • :hover
  • :target
  • :checked

一応,1つずつ説明します



:hover擬似クラス

もうご存知かと思うので説明を省略

トリガーに使うときの注意点:
常にマウスカーソルが対象に乗っている必要がある

:target擬似クラス

こんなHTMLに

html

1<a href="#sec_2">これはページ内リンク</a> 234<section id="sec_2"> 5 <h2>小タイトル</h2> 6 <p>lorem ipsam...</p> 7</section>

こんなCSSを書くと,

css

1#sec_2:target{ 2 background: green; 3}

ページ内リンクを押した際,idがsec_2の部分にスクロールされます
リンク先がtargetされ,背景色を緑にします
記事のトップに戻るボタンは,href="#"使ってたりします
hrefに入れる文字は,要素のidでないとだめです

トリガーに使うときの注意点:
URLの末尾に#~~と書かれてしまうので,ただのボタンには向かない.ページ遷移の代替として,モーダルウィンドウを表示させたいときや,ダイナミックにページがスライドするときに使うのが自然

:checked擬似クラス

本来はフォーム要素で使うものですが,この際,細かいことには目をつむりましょう
こんなHTMLと

html

1<input type="checkbox" id="btn"> 2<label for="btn">touch me</label>

こんなCSSを書くと

css

1input:checked +[for="btn"]{ 2 background: red; 3}

こうなります(雑)
checkedのgif
ちなみに,

「+」は隣の要素を指定するやつ,
「>」は直下の要素の指定,
「~」は下に続く,同じ階層の要素を指定するやつ,
「[foo="bar"]」は属性で指定できるやつです

トリガーに使うときの注意点:
注意点,というかかなり利点,内包関係を気にせず使えるので,hoverやtargetで手が届かないところをダイレクトにいじれる
「もう,ぜんぶこいつでいいんじゃないかな」



内容が濃すぎて,説明が雑になってきたので,Web上のリファレンスに頼ろう!

...と思ったけど,なかなか分かりやすいリファレンスが見つからないし,デモ作った方が早そうなので,とりあえず,ここでいったん休憩して,明日以降に,続きを書きます.

ZZZ...

( ˘ω˘)スヤァ

追記(20180811)

https://thimbleprojects.org/liveasnotes/531595/
hovermenugif
ところどころ妥協してますが,:hoverでやるバージョンはこんな感じになりました

解説に使おうと思っていたデモコードが,左から初級・中級・上級のタブに分かれています.
説明もしっかり書きたいところですが,ここに書くには余白が狭すぎる()ので,いったん省略し,コードを読んでいただいた上で,分からないところがあれば,逐一答えていくようにしようかと思います.

上記リンク先ページの右上にある「リミックス」ボタンを押すとコードの閲覧・編集ができます
また,このリンク先のページは今後も更新します(まだ:target:checkedのデモが未完成なので...)
ちなみに,セマンティックなHTMLでやろうとすると,:hoverだけでやる方法がおそらく最も詰みやすいので,もし心が折れた場合は,素直に:checkedとか使いましょう^^
(ADVANCEDでいきなりセマンティックにやろうとしたのは痛恨のミス

追記(20180812)

fullgif
とりあえず,目的のメニューのデモは一通りできたので,お知らせします
ちなみに,ページ内のタブ切替は:checkedによる作例の1つです.
divでやる人が多いと思うのですが,構造がつかみやすくなるので,dl,dt,ddで組みました
詳しい説明等は,今度Qiitaで記事を書いたときに,覚えていたら,URLを張りに来ようと思います

投稿2018/08/10 16:05

編集2018/08/12 13:10
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MioMioHayabusa

2018/08/11 15:44

これはまさに私がしようとしていたものですね!!???? しかし、まだ良く分からないものが多数含まれているので触ってみてわからない箇所があったらまた再度質問させていただきます
liveasnotes

2018/08/12 02:04

ちょっと書き換えたので通知しときます クラス名が良くないなと思ったので, .hvr_ip (item_parent) --> .hvr_iw (item_wrapper) .hvr_ic (item_child) --> .hvr_ic (item_container) に変更しました また, ボタンの大きさを縦横50pxにし,関係する他の部分も編集しました targetとcheckedはあとでやります
liveasnotes

2018/08/12 02:19

左右にできる変な隙間を埋めるため,リストのwidthを変更する代わりに,おおもとのコンテナにoverflow:hiddenをかけ,その中の要素のleftを変更するようにしました.「/*ズレ対策*/」と書かれている部分が関連個所です
MioMioHayabusa

2018/08/15 03:40

試してみたときに思ったこととしてHover類似クラスが何かがわかりませんでした^^;
MioMioHayabusa

2018/08/15 04:13

GIFやサイトさんを閲覧し、何をしていて何を書いたらこうなる(丸コピ)ということは分かりました。 しかし、「完全に複製したら同じことができる」という状態なのでそれを使ってハンバーガーの位置を移動したりするのは全く理解できていない状態です^^;
MioMioHayabusa

2018/08/15 04:14

私が試した結果をお知らせしますと、何も理解できなかったということになってしまったので簡単なHTMLとCSSを使ったメニューに切り替えて考えてみます・・・
liveasnotes

2018/08/15 04:43

:hover擬似クラスを使うと, マウスカーソルが乗った,もしくはタッチデバイス上でタップした際に, 要素のCSSを上書きすることができます 例えば, /*変化前*/ a:link, a:visited{ color: red; } /*変化後*/ a: hover{ color: green; } という指定があるとき リンクの上にマウスカーソルの乗せると 文字色が赤から緑に変化します この変化の仕方は,transitionプロパティで詳しく指定できます --- > 何も理解できなかった 私もそうでした なので,既に作ったことがあると思われる「ボタン」のCSSを改造するところから始めるのが良いかと思われます ボタンの上にマウスを乗せた際に,何か変化を起こす,という方法については,何となく理解していると思います 変化のトリガーを:activeにしてみたり,要素の位置やサイズを変えてみたり...とにかく細分化してください 基本的なコードを下に載せておくので,練習に活用していただければ幸いです ```html <div class="wrap"> <div class="btn">THIS IS BUTTON</div> <div class="r_g">red-green(and pos_move)</div> <div class="pos">pos_move(and transition)</div> <div> ``` ```css .wrap{ width: 500px; outline: 1px solid; } .btn{ position: relative; padding: 2em; background: tomato; } .btn::before{ content: "BFR(move 50px)"; position: absolute; top: 0; left: 0; background: #fff; } .btn:hover{ background: skyblue; } .btn:hover::before{ left: 50px; } .btn:hover::after{ content: " [ this is AFTER]"; } .r_g{ color: red; } .btn:hover +div{ color: green; } .btn:hover ~div{ transform: translate(50%); } .pos{ transition: 1s; } ``` https://liveweave.com/などで試してみてください^^
MioMioHayabusa

2018/08/15 04:58

Liveweave...こんなサイトがあるとは思ってもいませんでした???? HTMLテンプレートで簡単なメニューを探して、それを改造していくことにしてみます!
MioMioHayabusa

2018/08/15 05:37

他の方から頂いたコメントによって行いたいと考えていたことが実現できたので、こちらのコメントも合わせて参考にしながらカスタマイズをしていきます! :hoverなどは現段階ではホント簡易的なものしかわかりませんが、必要なものはある程度提示していただけたため、それらも合わせて「猿でも分かるHover」のように検索して学んでいこうと思います????✨
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問