ハンバーガーメニューの表示位置の変更

先ほどの質問の続きのものでハンバーガーメニューを通常だとメニューが左に表記されてしまいます。これを右から出るようにすればいいのですがどのようにすればよろしいでしょうか
サイト:
https://teratail.com/questions/208632

html
1<html lang="en" dir="ltr">
2  <head>
3    <meta charset="utf-8">
4    <title>Fooden</title>
5    <link href="base.css" rel="stylesheet">
6  </head>
7  <body>
8
9    <div class="test">
10      <div id='main-name'>
11        <span>Post</span>
12      </div>
13      <input id="sbox1"  id="s" name="s" type="text" placeholder="検索 …" />
14      <div class="test2">
15        <div id="nav-drawer">
16          <input id="nav-input" type="checkbox" class="nav-unshown">
17          <label id="nav-open" for="nav-input"><span></span></label>
18          <label class="nav-unshown" id="nav-close" for="nav-input"></label>
19          <div id="nav-content">
20            <p><a href="">お気に入り</a></p>
21            <p><a href="">予約確認</a></p>
22            <p><a href="">アカウント管理</a></p>
23            <p><a href="">設定</a></p>
24          </div>
25        </div>
26      </div>
27    </div>
28  </body>
29</html>

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

m.ts10806

2019/08/29 03:57

続きだとしても解決した結果、コードも改修されたでしょうし状況も変わっているかと思います。現在の状況は状況でコードを追記してください。また、「ハンバーグタグ」「ハンバーガータグ」というものはありません。一般的には「ハンバーガーメニュー」と呼ばれます。このあたりは正しく表現されたほうが無用なトラブルも少ないかと思います。もろもろ含めて質問内容再編してください。

AAA7

2019/08/29 04:04

わかりました。

m.ts10806

2019/08/29 04:16

ところで前の質問でも出ている{% load static %} は何でしょうか。今回つけられているタグとは関係のない情報のように思います。もし何かしらのテンプレートエンジンやフレームワークをお使いでしたらそれを明記するか、もしくは、ブラウザ表示時のHTML（ソースを表示　で取得）を提示されたほうが混乱が少ないと思いますし、こちらも再現確認がしやすくなります、。

AAA7

2019/08/29 04:20

了解です。

m.ts10806

2019/08/29 04:28

1点確認です。通常この手のメニューは左から出るのが UXの観点では自然と思います。例：https://materializecss.com/ それを右から出すというのはどういう意図があるのでしょうか？また、右にはハンバーガーメニューが設置されています。これは現在の位置を維持したまま出すのでしょうか？それともメニューが出た分だけ位置をずらすのでしょうか？（要はサイドメニューが出てきたときにハンバーガーメニューが隠れるのか見えたままにするのか）

AAA7

2019/08/29 04:45

左にはタイトルが別にあるためそこに重なるのは少し汚くなってしまう気はして右に出したいなと思いました。またハンバーガーメニューは隠したいと思っていました。

m.ts10806

2019/08/29 04:49

一案として、「出た分だけコンテンツをずらす」というのもなくはないですね。あとはレスポンシブ対応にしておき、ハンバーガーメニューも常時ではなく狭くしたときだけにして、ハンバーガーメニュー時にはタイトルはセンターに置く、とか。今回の要件とは別方向ですが。

AAA7

2019/08/29 04:57

色々な用途に対応する形でやっていくことも確かによろしいですね！色々試してみます！！

m.ts10806

2019/08/29 04:58

そうですね。「使う人がどうしたら使いやすいか」このあたりはUI/UXという概念があるので調べてみてください。

AAA7

2019/08/29 05:01

はい！まだまだ始めたばかりではありますが、知識を豊富に蓄えていきユーザーがいかに使いやすいものを試行錯誤してwebサイトなどを作っていきたいと思います。

m.ts10806

2019/08/29 05:02

「出てくるメニューの最上部にタイトルに準ずるものを入れておく」とすれば隠れても気にならないかもしれません。コメントにあげたMaterializeのサイトはそのようになってます。

AAA7

2019/08/29 05:48

確かに。。そうするとユーザーがワンタッチせずにメニューを閲覧できるということもありますね。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっとは自分でどうにかしようと努力しましたかねというのはさておき

参考サイト：[パーツ]メニュークリックすると右からメニューが出てくる

修正部分

CSS
1/*中身*/
2#nav-content {
3
4  overflow: auto;
5  position: fixed;
6  top: 0;
7  right: -100vw; /* 【追加部分】 右に隠す*/
8  z-index: 9999;
9  width: 90%;
10  max-width: 300px;
11  height: 100%;
12  background: #fff;
13  transition: .3s ease-in-out;
14}
15
16#nav-input:checked ~ #nav-content {
17  -webkit-transform: translateX(-100vw); /*修正部分 ずらした分もとにもどす*/
18  transform: translateX(-100vw);
19  box-shadow: 6px 0 25px rgba(0,0,0,.15);
20}

投稿2019/08/29 04:26

azuapricot

総合スコア2343

AAA7

2019/08/29 04:43

確かに自分で調べられたことではありますね。今回はazuapricotさんが新しい質問をということで少し甘えてしまいました。今後はやる前に一度調べてから、投稿していきたいとおもいます。ありがとうございました。

azuapricot

2019/08/29 04:50

左って設定してるところを右に動かせばいいんだよなーっていうのに着目すると、親切にコメントに左に動かす～とか書いてあるのでそこらへんいじればなんとかなるんじゃない？っていう検討はつけられたのかなーとは思います。もし既に色々試行錯誤していたのなら、次回からは質問に【試したこと】など書いておくと良いですね

AAA7

2019/08/29 04:55

わかりました。今回はありがとうございました！

行動規範の内容に同意します