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

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

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

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

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

CSS

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

Q&A

解決済

1回答

4300閲覧

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

AAA7

総合スコア10

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/29 03:28

編集2019/08/29 04:22

先ほどの質問の続きのものでハンバーガーメニューを通常だとメニューが左に表記されてしまいます。これを右から出るようにすればいいのですがどのようにすればよろしいでしょうか
サイト:
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}

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

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

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

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

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

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

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

回答1

0

ベストアンサー

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

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

修正部分

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

総合スコア2341

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

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

AAA7

2019/08/29 04:43

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

2019/08/29 04:50

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

2019/08/29 04:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問