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

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

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

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

Q&A

解決済

2回答

13800閲覧

スマホで右上にハンバーガーメニューを設置したい

yayaya

総合スコア19

CSS3

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

0グッド

1クリップ

投稿2019/07/27 17:17

https://saruwakakun.com/html-css/reference/nav-drawer
上記のサイトを参考にハンバーガーメニューを作成しようとしています。
WordPressにて使用します。
PCではハンバーガーではなく、横並びのナビゲーションリストのイメージです。
サイトでは左にハンバーガーメニューを設置してあったのですが、右側に設置したいため調整したのですがうまく表示されず。。
ハンバーガーメニューをクリックし、右から左への、スライド表示がうまくいっておらず、うまく表示される方法をご教示いただけますと幸いです。

PHP

1<div class="headerContainer"> 2 <h1><a href=""><img src="/asset/common/logo.svg" class="headerLogo" alt=""></h1> 3 <?php if ( wp_is_mobile() ) : ?> 4 <div id="nav-drawer"> 5 <input id="nav-input" type="checkbox" class="nav-unshown"> 6 <label id="nav-open" for="nav-input"><span></span></label> 7 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 8 <div id="nav-content"> 9 <nav> 10 <ul class="headerLink"> 11 <li class="navTitle"><a href="/category/news">お知らせ</a></li> 12 <li class="navTitle"><a href="/category/blog">ブログ</a></li> 13 <li class="navTitle"><a href="/category/casestudy">導入事例</a></li> 14 <li class="navTitle"><a href="/company">会社情報</a></li> 15 <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li> 16 </ul> 17 </nav> 18 </div> 19 </div> 20 <?php else: ?> 21 <div id="nav-content"> 22 <nav> 23 <ul class="headerLink"> 24 <li class="navTitle"><a href="/category/news">お知らせ</a></li> 25 <li class="navTitle"><a href="/category/blog">ブログ</a></li> 26 <li class="navTitle"><a href="/category/casestudy">導入事例</a></li> 27 28 <li class="navTitle"><a href="/company">会社情報</a></li> 29 <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li> 30 </ul> 31 </nav> 32 </div> 33 </div> 34 <?php endif; ?> 35 </div> 36 </div>

CSS

1#nav-drawer { 2 position: absolute; 3 top: 15px; 4 right: 15px; 5} 6 7/*チェックボックス等は非表示に*/ 8.nav-unshown { 9 display:none; 10} 11 12/*アイコンのスペース*/ 13#nav-open { 14 display: inline-block; 15 width: 30px; 16 height: 22px; 17 vertical-align: middle; 18} 19 20/*ハンバーガーアイコンをCSSだけで表現*/ 21#nav-open span, #nav-open span:before, #nav-open span:after { 22 position: absolute; 23 height: 3px;/*線の太さ*/ 24 width: 25px;/*長さ*/ 25 border-radius: 3px; 26 background: #030818; 27 display: block; 28 content: ''; 29 cursor: pointer; 30} 31#nav-open span:before { 32 bottom: -8px; 33} 34#nav-open span:after { 35 bottom: -16px; 36} 37 38/*閉じる用の薄黒カバー*/ 39#nav-close { 40 display: none;/*はじめは隠しておく*/ 41 position: fixed; 42 z-index: 99; 43 top: 0;/*全体に広がるように*/ 44 left: 0; 45 width: 100%; 46 height: 100%; 47 background: black; 48 opacity: 0; 49 transition: .3s ease-in-out; 50} 51 52/*中身*/ 53#nav-content { 54 overflow: auto; 55 position: fixed; 56 top: 0; 57 left: 0; 58 z-index: 9999;/*最前面に*/ 59 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 60 max-width: 330px;/*最大幅(調整してください)*/ 61 height: 100%; 62 background: #fff;/*背景色*/ 63 transition: .3s ease-in-out;/*滑らかに表示*/ 64 -webkit-transform: translateX(120%); 65 transform: translateX(120%);/*右に隠しておく*/ 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}

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

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

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

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

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

guest

回答2

0

ベストアンサー

https://jsfiddle.net/5qvkuoxy/

html

1<h1><a href=""><img src="/asset/common/logo.svg" class="headerLogo" alt=""></h1>

ここの</a>がないのできちんと閉じる

html

1<h1><a href=""><img src="/asset/common/logo.svg" class="headerLogo" alt=""></a></h1>

また、右から表示させたいようなので、CSSで中身を右寄せに

css

1#nav-content { 2 left: 0; 3}

css

1#nav-content { 2 right: 0; 3}

こちらで動作するのではないでしょうか。

投稿2019/07/30 02:18

okne

総合スコア217

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

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

TakayukiNakajo

2019/07/30 03:24

確かに!これで動きそうですね。
yayaya

2019/08/02 04:13

ありがとうございます! #nav-contentのrightをゼロにしたら良い、シンプルかつ明瞭でした・・! こちらで動きました! ありがとうございます!
guest

0

phpのif文をなくした状態では、ハンバーガーメニューちゃんと動作しておりますか?

投稿2019/07/29 17:33

TakayukiNakajo

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問