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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

13282閲覧

ハンバーガーメニューの下にテキストを表示したボタンにしたい

kagaminoB

総合スコア14

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/04/29 10:04

編集2018/04/29 14:13

cssで作成した三本線のハンバーメニューの下にテキスト「メニュー」を表示したいのですが
テキストを追加すると、三本線に重なり、位置を変更すると三本線が崩れます。
また三本線のだけのときは背景色を設定しボタン風にしましたがテキストを追加するとwidthを変更していなくても
幅が広がります。
メニューの開閉時はjavascriptでhtmlのクラス「.nav-close」が「.nav-open」に変わります。

html

1<div class="nav"> 2 <div><a id="toggle" class="nav-toggle-btn"><span class="nav-toggle-btn_sen"></span></a></div> 3<!-- 省略 -->

css

1 .nav-toggle-btn { 2 position: fixed; 3 top: 5px; 4 left: 10px; 5 z-index: 102; 6 height:auto; 7 -webkit-transition: all 0.4s ease-in-out; 8 -moz-transition: all 0.4s ease-in-out; 9 -o-transition: all 0.4s ease-in-out; 10 -ms-transition: all 0.4s ease-in-out; 11 transition: all 0.4s ease-in-out; 12 } 13 .nav-toggle-btn { 14 cursor: pointer; 15 padding: 15px 40px 28px 10px; 16 margin:0; 17 background:#ddd; 18 } 19 .nav-open .nav-toggle-btn { 20 top:0; 21 left: 240px; 22 } 23 .nav-toggle-btn .nav-toggle-btn_sen, 24 .nav-toggle-btn .nav-toggle-btn_sen:before, 25 .nav-toggle-btn .nav-toggle-btn_sen:after { 26 cursor: pointer; 27 height: 3px; 28 width: 30px; 29 background: #333; 30 position: absolute; 31 display: block; 32 content: ''; 33 } 34 .nav-toggle-btn .nav-toggle-btn_sen:before { 35 top: -7px; 36 } 37 .nav-toggle-btn .nav-toggle-btn_sen:after { 38 bottom: -7px; 39 } 40 .nav-toggle-btn .nav-toggle-btn_sen, 41 .nav-toggle-btn .nav-toggle-btn_sen:before, 42 .nav-toggle-btn .nav-toggle-btn_sen:after { 43 transition: all 500ms ease-in-out; 44 } 45 .nav-open .nav-toggle-btn .nav-toggle-btn_sen { 46 background-color: transparent; 47 } 48 .nav-open .nav-toggle-btn .nav-toggle-btn_sen:before, 49 .nav-toggle-btn.active .nav-toggle-btn_sen:after { 50 top: 7px; 51 } 52 .nav-open .nav-toggle-btn .nav-toggle-btn_sen:before { 53 transform: rotate(45deg); 54 -moz-transform: rotate(45deg); 55 -ms-transform: rotate(45deg); 56 -o-transform: rotate(45deg); 57 -webkit-transform: rotate(45deg); 58 bottom: 0; 59 } 60.nav-open .nav-toggle-btn .nav-toggle-btn_sen:after { 61 transform: rotate(-45deg); 62 -moz-transform: rotate(-45deg); 63 -ms-transform: rotate(-45deg); 64 -o-transform: rotate(-45deg); 65 -webkit-transform: rotate(-45deg); 66 } 67

やったこと

html

1<div><a id="toggle" class="nav-toggle-btn"><span class="nav-toggle-btn_sen"></span><span class="txt">メニュー</span></a></div>

「.txt」にpaddingやmarginを設定しても三本線の下に「メニュー」が表示されませんでした。
また背景色は右側と下側に広がってしまいました。

回答案を試しました。
テキストを<span>タグで括り、三本線の<span>タグの中に入れました

html

1<div><a id="toggle" class="nav-toggle-btn"><span class="text-menu"><span class="nav-toggle-btn_sen">MENU</span></span></a></div>

CSSには下記を追記しました。

css

1.nav-toggle-btn .text-menu{ 2 position: relative; 3 padding-top: 0; 4 width: 0; 5 font-size:0.7rem; 6} 7 8.nav-toggle-btn .nav-toggle-btn_sen{ 9 position: absolute; 10 top:0; 11 left:0; 12 } 13

結果はテキストの「.text-menu」のpaddingには「0」以上の数字を入れるとどんどん三本線とテキストが上に表示され、widthは「0」でも「10px」でも変化がありませんでした。
三本線の「.nav-toggle-btn_sen」には位置を設定すると、テキストも一緒に動きます。

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

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

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

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

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

guest

回答2

0

ベストアンサー

テキストを追加すると、三本線に重なり

三本線はposition:absoluteなのでそのままテキストを追加すると当然重なりますね。

テキストを追加するとwidthを変更していなくても幅が広がります

.nav-toggle-btnpadding: 15px 40px 28px 10pxとなってるので当然テキストの幅だけaの幅は広がります。

どうせabsoluteなのでpaddingではなくtopとかleftで位置を指定するのがいいと思います。
下の例ではそうするとともに、テキストを<span class="nav-toggle-btn_label">MENU</span>として追加しposition:absoluteにしました。中心に配置するために

csss

1 left: 50%; 2 transform: translate(-50%, 0);

としました。.nav-openのときはテキストを表示するスペースがないので非表示にしたいのかなと思いopacity:0にしました。

JSFiddle Demo

CSSの変更点
Diff Checker

html

1<div class="nav"> 2 <div> 3 <a id="toggle" class="nav-toggle-btn"> 4 <span class="nav-toggle-btn_sen"></span> 5 <span class="nav-toggle-btn_label">MENU</span> 6 </a> 7 </div> 8</div>

css

1.nav-toggle-btn_label { 2 position: absolute; 3 left: 50%; 4 transform: translate(-50%, 0); 5 bottom: 3px; 6 font-size: 10px; 7 transition: all 500ms ease-in-out; 8} 9 10.nav-open .nav-toggle-btn_label { 11 opacity: 0; 12} 13 14.nav-toggle-btn { 15 position: fixed; 16 top: 5px; 17 left: 10px; 18 z-index: 102; 19 height: auto; 20 -webkit-transition: all 0.4s ease-in-out; 21 -moz-transition: all 0.4s ease-in-out; 22 -o-transition: all 0.4s ease-in-out; 23 -ms-transition: all 0.4s ease-in-out; 24 transition: all 0.4s ease-in-out; 25} 26 27.nav-toggle-btn { 28 cursor: pointer; 29 height: 43px; 30 width: 50px; 31 margin: 0; 32 background: #ddd; 33} 34 35.nav-open .nav-toggle-btn { 36 top: 0; 37 left: 240px; 38} 39 40.nav-toggle-btn .nav-toggle-btn_sen { 41 left: 10px; 42 top: 15px; 43} 44 45.nav-toggle-btn .nav-toggle-btn_sen, 46.nav-toggle-btn .nav-toggle-btn_sen:before, 47.nav-toggle-btn .nav-toggle-btn_sen:after { 48 cursor: pointer; 49 height: 3px; 50 width: 30px; 51 background: #333; 52 position: absolute; 53 display: block; 54 content: ''; 55} 56 57.nav-toggle-btn .nav-toggle-btn_sen:before { 58 top: -7px; 59} 60 61.nav-toggle-btn .nav-toggle-btn_sen:after { 62 bottom: -7px; 63} 64 65.nav-toggle-btn .nav-toggle-btn_sen, 66.nav-toggle-btn .nav-toggle-btn_sen:before, 67.nav-toggle-btn .nav-toggle-btn_sen:after { 68 transition: all 500ms ease-in-out; 69} 70 71.nav-open .nav-toggle-btn .nav-toggle-btn_sen { 72 background-color: transparent; 73} 74 75.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before, 76.nav-toggle-btn.active .nav-toggle-btn_sen:after { 77 top: 7px; 78} 79 80.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before { 81 transform: rotate(45deg); 82 -moz-transform: rotate(45deg); 83 -ms-transform: rotate(45deg); 84 -o-transform: rotate(45deg); 85 -webkit-transform: rotate(45deg); 86 bottom: 0; 87} 88 89.nav-open .nav-toggle-btn .nav-toggle-btn_sen:after { 90 transform: rotate(-45deg); 91 -moz-transform: rotate(-45deg); 92 -ms-transform: rotate(-45deg); 93 -o-transform: rotate(-45deg); 94 -webkit-transform: rotate(-45deg); 95}

投稿2018/04/29 15:55

karamarimo

総合スコア2551

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

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

kagaminoB

2018/04/30 11:25

できました! 本当にありがつとうございます。 三本線の「position: absolute;」が不要だったのですね。 説明がとてもわかりやくて勉強になりました。 open時のテキスト(メニューという文字)が消えなかったのですが、こちらも教えていただいたソースで解決されていました。 回答をみて思わず声が出たのは初めてです。ありがとうございました。
karamarimo

2018/04/30 13:56

> 三本線の「position: absolute;」が不要だったのですね。 いえそれはそのままにしていますが...。
guest

0

テキストでの説明になりますが、

  1. テキストをタグ(aタグでもpタグでも何でも)で括る
  2. そのタグの中に三本線のspanタグを入れる
  3. テキストを括っているタグにposition: relative; と padding-top: XXpx; と width: XXpx;を付与する。
  4. spanタグにposition: absolute;を指定して位置を決める

これで質問者様の言うスタイルが実現するかと思います。

投稿2018/04/29 12:02

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kagaminoB

2018/04/29 14:14

ありがとうございます。 試してみましたがうまくいきませんでした。(質問欄に追記して試したコードを記載しました。) タグの括り方を間違えているのでしょうか…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問