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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

1回答

351閲覧

レスポンシブ対応のハンバーガーメニューの作り方

katusi

総合スコア12

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2020/02/23 14:59

編集2022/01/12 10:55

html

1<!DOCTYPE html> 2<html lang="ja" prefix="og: http://ogp.me/ns#"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2"> 6 <link rel="stylesheet" href="practice13-for-pc.css" type="text/css" media="screen and (max-width: 2000px) and (min-width: 1400px)"> 7 <link rel="stylesheet" href="practice13-for-sm.css" type="text/css" media="screen and (max-width: 740px) and (min-width: 410px)"> 8 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> 12 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> 13 <script async src="https://platform.twitter.com/widgets.js"></script> 14 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 15 <title>practice13</title> 16</head> 17 18<body> 19 <header> 20 <div class="inner"> 21 <img class="header-logo-back" src="https://writer-station.com/img/front/pc_img/bg_wave.svg?1578457100" alt=""> 22 <div class="header-logo"> 23 <a href="https://writer-station.com/"> 24 <img class="img-white" src="https://writer-station.com/img/front/pc_img/logo_ttl_white.svg" alt=""> 25 <img class="img-blue" src="https://writer-station.com/img/front/pc_img/logo_ttl_blue.svg" alt=""> 26 <p>WRITER STATION<br><span class="big">ライターステーション</span><p></a> 27 </div> 28 <a class="nav-button" href="#"> 29 <span></span> 30 <span></span> 31 <span></span> 32 </a> 33 <div id="gloval-nav"> 34 <nav> 35 <ul> 36 <li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li> 37 <li><a href="https://writer-station.com/#overview">▽案件例</a></li> 38 <li><a href="https://writer-station.com/#overview">▽対象とする人</a></li> 39 <li><a href="https://writer-station.com/#overview">▽サポート体制</a></li> 40 <li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li> 41 <li><a href="https://writer-station.com/#overview">▽Q&A</a></li> 42 <li><a href="https://writer-station.com/#overview">▽ブログ</a></li> 43 <li><a href="https://writer-station.com/#overview">▽ログイン</a></li> 44 <li><a href="https://writer-station.com/#overview">▽登録する</a></li> 45 <li><a href="https://writer-station.com/#overview">▽再チャレンジ</a></li> 46 </ul> 47 </nav> 48 </div> 49 </div> 50 </header> 51以下コンテンツが続く

css

1.inner { 2 overflow: hidden; 3 margin: 0; 4 padding: 0; 5 max-width: 100%; 6} 7body { 8 margin: 0; 9 padding: 0; 10 font-family:"verdana","MSPゴシック","Arial","sans-serif"; 11} 12body a { 13 text-decoration: none; 14} 15body ul { 16 list-style: none; 17} 18header { 19 position: fixed; 20 background-color: white; 21 z-index: 1002; 22 width: 100%; 23 height: 8%; 24 margin: 0; 25 padding: 0 0 1% 0; 26} 27#page_top { 28 display: none; 29} 30.blue { 31 color: #0164C9; 32} 33.header-logo-back { 34 display: none 35} 36.img-white { 37 display: none; 38} 39.img-blue { 40 width: 11%; 41 height: 5.5%; 42} 43.header-logo { 44 position: absolute; 45 left: 7%; 46} 47.header-logo p { 48 color: #0164C9; 49 display: inline-block; 50 font-size: 0.8rem; 51} 52.big { 53 font-weight: 900; 54 font-size: 1.2rem; 55} 56.header-menu { 57 display: none; 58} 59.header-sub { 60 display: none; 61} 62.nav-button { 63 display: none; 64} 65.nav-button, .nav-button span { 66 display: inline-block; 67 transition: all 0.4s; 68 box-sizing: border-box; 69} 70.nav-button { 71 z-index: 20; 72 position: relative; 73 width: 40px; 74 height: 0px; 75} 76.nav-button span { 77 position: absolute; 78 left: 800%; 79 width: 100%; 80 height: 4px; 81 background-color: #333; 82 border-radius: 4px; 83 } 84 .nav-button span:nth-of-type(1) { 85 margin: 25% 0 0 0; 86 } 87 .nav-button span:nth-of-type(2) { 88 margin: 45% 0 0 0; 89 } 90 .nav-button span:nth-of-type(3) { 91 margin: 65% 0 0 0; 92 } 93 .nav-button.active span:nth-of-type(1) { 94 -webkit-transform: translateY(16px) rotate(-45deg); 95 transform: translateY(16px) rotate(-45deg); 96 } 97 .nav-button.active span:nth-of-type(2) { 98 opacity: 0; 99 } 100 .nav-button.active span:nth-of-type(3) { 101 -webkit-transform: translateY(-16px) rotate(45deg); 102 transform: translateY(-16px) rotate(45deg); 103 } 104#gloval-nav.open { 105 display: block; 106 } 107 108#gloval-nav.close { 109 display: none; 110} 111#gloval-nav ul { 112 background: rgb(76,76,76,0.8); 113 position: relative; 114 top: -35px; 115 padding: 10% 0 100% 0; 116 width: 100%; 117 118 119} 120#gloval-nav li { 121 font-size: 1em; 122 padding: 2% 0 0 35%; 123 width: 100%; 124 margin: 0; 125} 126#gloval-nav a { 127 color: white; 128 display: block; 129 text-align: left; 130}

js

1<script> 2if (window.matchMedia( '(min-width: 410px)and(max-width: 740px)' ).matches) { 3 $(function() { 4 $('.nav-button').on('click', function() { 5 if ($(this).hasClass('active')) { 6 $(this).removeClass('active'); 7 $('#gloval-nav') 8 .addClass('close') 9 .removeClass('open'); 10 } else { 11 $(this).addClass('active'); 12 $('#gloval-nav') 13 .addClass('open') 14 .removeClass('close'); 15 } 16 }); 17}); 18} 19</script>

前提・実現したいこと

レスポンシブ対応のためにハンバーガメニューを作っているのですが、gloval-navを表示非表示をしたいにですが、toggleやhideを使っても上手くいきません。
まず現時点のjsが機能しません。cssでdislay: none;にしてからjsでshowにしてもダメでした。
どこが間違っているのでしょうか?
あと、ネットなどでハンバーガメニューの作り方を見た際にspanを使ってやられている例が多かったのですが、どちらのやり方の方が、今回のサイトにふさわしいのでしょうか?
個人的には、画像を使う方がやりやすいと感じるのですが、、、

補足情報(FW/ツールのバージョンなど)

模写をしているので元サイトと同じ見栄えにしたいです。
元サイトのURLは(https://writer-station.com/)です。
よろしくお願いいたします!!

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

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

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

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

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

guest

回答1

0

レスポンシブ対応のためにハンバーガメニューを作っているのですが、3本線とばつ印に画像を使いgloval-navを表示非表示をしたいにですが、toggleやhideを使っても上手くいきません。

詳細なコードが不明であるため具体的にどこが間違っているのかはわかりませんが、簡単な表示の切り替えであれば、 toggle メソッドと hide メソッドを用いて行えます (動作確認用リンク)。

jQuery

1 2$('#gloval-nav ul, #nav-toggle > .white').hide(); 3 4$('#nav-toggle').on('click', function() { 5 $('#gloval-nav ul, #nav-toggle > i').toggle(); 6});

あと、ネットなどでハンバーガメニューの作り方を見た際にspanを使ってやられている例が多かったのですが、どちらのやり方の方が、今回のサイトにふさわしいのでしょうか?

今回の場合、ハンバーガーメニューの開閉時にアニメーションを適用する必要があるため、 SVG もしくは span 要素などの要素を用いて表現したハンバーガーメニューへアニメーションを適用する方法がより簡単だと思います。質問者さんが参考にしている Web サイトでは、 span 要素で transition プロパティを使用し、各要素へ transform プロパティを適用しています。

投稿2020/02/23 23:47

s8_chu

総合スコア14731

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

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

katusi

2020/02/24 14:06

回答ありがとうございます。 上記のように修正して見たのですが、上手くいきませんでした。 jsは他のところで効いているので導入に関しては大丈夫だと思うのですが問題はcssでしょうか?
s8_chu

2020/03/10 13:35 編集

katusi さん> 少なくとも動作確認は出来ているため、まったく別の問題があるのだと思います。 質問を解決済みにしたうえで、適宜問題をまとめて新たに質問を投稿されることをお勧めします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問