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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1754閲覧

[CSSハンバーガーメニュー]クリックすると右から出現するよう修正したい

yujill

総合スコア12

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/08 04:22

前提・実現したいこと

https://saruwakakun.com/html-css/reference/nav-drawer
上記のサイトを参考にハンバーガーメニューを作成しようとしています。
サイトでは左からハンバーガーメニューが出現してますが、右側から出現させたいため調整したのですがうまくいきませんでした。
webページ右側にあるハンバーガーメニューをクリックし、右から左へのスライド表示方法についてご教示いただけますと幸いです。

該当のソースコード

HTML

1 <div id="nav-drawer"> 2 <input id="nav-input" type="checkbox" class="nav-unshown"> 3 <label id="nav-open" for="nav-input"><span></span></label> 4 <p>MENU</p> 5 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 6 <div id="nav-content">ここに中身を入れる</div> 7 </div>

CSS

1#nav-drawer { 2 position: relative; 3 width: 60px; 4 text-align: center; 5} 6 7#nav-drawer p { 8 margin: 0; 9 font-size: 10px; 10} 11 12/*チェックボックス等は非表示に*/ 13.nav-unshown { 14 display:none; 15} 16 17/*アイコンのスペース*/ 18#nav-open { 19 display: inline-block; 20 width: 30px; 21 height: 22px; 22 vertical-align: middle; 23 margin: 0; 24} 25 26/*ハンバーガーアイコンをCSSだけで表現*/ 27#nav-open span, #nav-open span:before, #nav-open span:after { 28 position: absolute; 29 height: 3px;/*線の太さ*/ 30 width: 30px;/*長さ*/ 31 border-radius: 3px; 32 background: #555; 33 display: block; 34 content: ''; 35 cursor: pointer; 36} 37#nav-open span:before { 38 bottom: -8px; 39} 40#nav-open span:after { 41 bottom: -16px; 42} 43 44/*閉じる用の薄黒カバー*/ 45#nav-close { 46 display: none;/*はじめは隠しておく*/ 47 position: fixed; 48 z-index: 99; 49 top: 0;/*全体に広がるように*/ 50 left: 0; 51 width: 100%; 52 height: 100%; 53 background: black; 54 opacity: 0; 55 transition: .3s ease-in-out; 56} 57 58/*中身*/ 59#nav-content { 60 overflow: auto; 61 position: fixed; 62 top: 0; 63 left: 0; 64 z-index: 9999;/*最前面に*/ 65 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 66 max-width: 330px;/*最大幅(調整してください)*/ 67 height: 100%; 68 background: #fff;/*背景色*/ 69 transition: .3s ease-in-out;/*滑らかに表示*/ 70 -webkit-transform: translateX(-105%); 71 transform: translateX(-105%);/*左に隠しておく*/ 72} 73 74/*チェックが入ったらもろもろ表示*/ 75#nav-input:checked ~ #nav-close { 76 display: block;/*カバーを表示*/ 77 opacity: .5; 78} 79 80#nav-input:checked ~ #nav-content { 81 -webkit-transform: translateX(0%); 82 transform: translateX(0%);/*中身を表示(右へスライド)*/ 83 box-shadow: 6px 0 25px rgba(0,0,0,.15); 84} 85

試したこと

nav-contentのleft: 0;をright: 0;に変更してみましたが、ページ右側に余白ができてしまうだけで、出現方法は切り替わりませんでした。

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

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

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

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

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

guest

回答2

0

#nav-content {}transform: translateX(-105%);transform: translateX(300%);にしてみたらどうでしょうか?
実際に自分で動かしてみたところ、これで右から左へ表示したい内容を出現させることができました。

投稿2020/03/08 05:22

SanQ

総合スコア92

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

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

yujill

2020/03/08 05:46

回答ありがとうございます! 右から左への出現はかなったのですが、表示されたメニューが左寄せになってしまっていたので、hatena19さんの回答を参考にさせていただきました。 お手数おかけしてしまいすみません、色々な編集の方法があることがわかりました。ありがとうございました!
SanQ

2020/03/08 05:47

解決できたようで良かったです。
guest

0

ベストアンサー

下記でどうでしょうか。
追加 1箇所
修正 2箇所

css

1#nav-drawer { 2 position: relative; 3 width: 60px; 4 text-align: center; 5 margin-left: auto; /*追加 ハンバーガーメニューを右寄せ*/ 6} 7 8/*中身*/ 9#nav-content { 10 overflow: auto; 11 position: fixed; 12 top: 0; 13 right: 0; /*修正 右端に固定 */ 14 z-index: 9999;/*最前面に*/ 15 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 16 max-width: 330px;/*最大幅(調整してください)*/ 17 height: 100%; 18 background: #fff;/*背景色*/ 19 transition: .3s ease-in-out;/*滑らかに表示*/ 20 -webkit-transform: translateX(105%); 21 transform: translateX(105%);/*修正 右の外に隠しておく */ 22}

投稿2020/03/08 04:51

hatena19

総合スコア33620

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

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

yujill

2020/03/08 05:41

ご教示いただいた追加と修正で実現しました!! 素人の質問にもご丁寧にありがとうございました><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問