cssで作成した三本線のハンバーメニューの下にテキスト「メニュー」を表示したいのですが
テキストを追加すると、三本線に重なり、位置を変更すると三本線が崩れます。
また三本線のだけのときは背景色を設定しボタン風にしましたがテキストを追加するとwidthを変更していなくても
幅が広がります。
メニューの開閉時はjavascriptでhtmlのクラス「.nav-close」が「.nav-open」に変わります。
<div class="nav">
<div><a id="toggle" class="nav-toggle-btn"><span class="nav-toggle-btn_sen"></span></a></div>
<!-- 省略 -->
.nav-toggle-btn {
position: fixed;
top: 5px;
left: 10px;
z-index: 102;
height:auto;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.nav-toggle-btn {
cursor: pointer;
padding: 15px 40px 28px 10px;
margin:0;
background:#ddd;
}
.nav-open .nav-toggle-btn {
top:0;
left: 240px;
}
.nav-toggle-btn .nav-toggle-btn_sen,
.nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn .nav-toggle-btn_sen:after {
cursor: pointer;
height: 3px;
width: 30px;
background: #333;
position: absolute;
display: block;
content: '';
}
.nav-toggle-btn .nav-toggle-btn_sen:before {
top: -7px;
}
.nav-toggle-btn .nav-toggle-btn_sen:after {
bottom: -7px;
}
.nav-toggle-btn .nav-toggle-btn_sen,
.nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn .nav-toggle-btn_sen:after {
transition: all 500ms ease-in-out;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen {
background-color: transparent;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn.active .nav-toggle-btn_sen:after {
top: 7px;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
bottom: 0;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:after {
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
やったこと
<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>タグの中に入れました
<div><a id="toggle" class="nav-toggle-btn"><span class="text-menu"><span class="nav-toggle-btn_sen">MENU</span></span></a></div>
CSSには下記を追記しました。
.nav-toggle-btn .text-menu{
position: relative;
padding-top: 0;
width: 0;
font-size:0.7rem;
}
.nav-toggle-btn .nav-toggle-btn_sen{
position: absolute;
top:0;
left:0;
}
結果はテキストの「.text-menu」のpaddingには「0」以上の数字を入れるとどんどん三本線とテキストが上に表示され、widthは「0」でも「10px」でも変化がありませんでした。
三本線の「.nav-toggle-btn_sen」には位置を設定すると、テキストも一緒に動きます。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
テキストを追加すると、三本線に重なり
三本線はposition:absolute
なのでそのままテキストを追加すると当然重なりますね。
テキストを追加するとwidthを変更していなくても幅が広がります
.nav-toggle-btn
にpadding: 15px 40px 28px 10px
となってるので当然テキストの幅だけa
の幅は広がります。
どうせabsolute
なのでpadding
ではなくtop
とかleft
で位置を指定するのがいいと思います。
下の例ではそうするとともに、テキストを<span class="nav-toggle-btn_label">MENU</span>
として追加しposition:absolute
にしました。中心に配置するために
left: 50%;
transform: translate(-50%, 0);
としました。.nav-open
のときはテキストを表示するスペースがないので非表示にしたいのかなと思いopacity:0
にしました。
CSSの変更点
Diff Checker
<div class="nav">
<div>
<a id="toggle" class="nav-toggle-btn">
<span class="nav-toggle-btn_sen"></span>
<span class="nav-toggle-btn_label">MENU</span>
</a>
</div>
</div>
.nav-toggle-btn_label {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 3px;
font-size: 10px;
transition: all 500ms ease-in-out;
}
.nav-open .nav-toggle-btn_label {
opacity: 0;
}
.nav-toggle-btn {
position: fixed;
top: 5px;
left: 10px;
z-index: 102;
height: auto;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.nav-toggle-btn {
cursor: pointer;
height: 43px;
width: 50px;
margin: 0;
background: #ddd;
}
.nav-open .nav-toggle-btn {
top: 0;
left: 240px;
}
.nav-toggle-btn .nav-toggle-btn_sen {
left: 10px;
top: 15px;
}
.nav-toggle-btn .nav-toggle-btn_sen,
.nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn .nav-toggle-btn_sen:after {
cursor: pointer;
height: 3px;
width: 30px;
background: #333;
position: absolute;
display: block;
content: '';
}
.nav-toggle-btn .nav-toggle-btn_sen:before {
top: -7px;
}
.nav-toggle-btn .nav-toggle-btn_sen:after {
bottom: -7px;
}
.nav-toggle-btn .nav-toggle-btn_sen,
.nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn .nav-toggle-btn_sen:after {
transition: all 500ms ease-in-out;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen {
background-color: transparent;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before,
.nav-toggle-btn.active .nav-toggle-btn_sen:after {
top: 7px;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:before {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
bottom: 0;
}
.nav-open .nav-toggle-btn .nav-toggle-btn_sen:after {
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
テキストでの説明になりますが、
- テキストをタグ(aタグでもpタグでも何でも)で括る
- そのタグの中に三本線のspanタグを入れる
- テキストを括っているタグにposition: relative; と padding-top: XXpx; と width: XXpx;を付与する。
- spanタグにposition: absolute;を指定して位置を決める
これで質問者様の言うスタイルが実現するかと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/04/30 20:25
本当にありがつとうございます。
三本線の「position: absolute;」が不要だったのですね。
説明がとてもわかりやくて勉強になりました。
open時のテキスト(メニューという文字)が消えなかったのですが、こちらも教えていただいたソースで解決されていました。
回答をみて思わず声が出たのは初めてです。ありがとうございました。
2018/04/30 22:56
いえそれはそのままにしていますが...。