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

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

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

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

HTML5

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

jQuery

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

Q&A

解決済

1回答

456閲覧

ハンバーガーメニューが開きません

ryuji000

総合スコア19

CSS3

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

HTML5

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

jQuery

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

0グッド

0クリップ

投稿2017/08/09 06:42

編集2017/08/09 06:52

###前提・実現したいこと
ハンバーガーメニューを実装したいのですが、メニューが開いてくれません

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="shortcut icon" href="favicon.ico" type="icon/logo.jpg"> 7 <link rel="apple-touch-icon" href="icon/logo.jpg"> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/normalize.css"> 10 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 11 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 12 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 13 <script type="text/javascript" src="slick/slick.min.js"></script> 14 <title>農業サポートセンター</title> 15</head> 16 17<nav class="nav"> 18 <ul class="nav__gNav flex"> 19 <a href=""><li>事業一覧</li></a> 20 <a href=""><li>企業説明</li></a> 21 <a href=""><li>企業理念</li></a> 22 <a href=""><li>企業情報</li></a> 23 <a href=""><li>新着情報</li></a> 24 <a href=""><li>お問い合わせ</li></a> 25 </ul> 26 </nav> 27

css

1.nav__gNav li { 2 margin: 0 10px; 3 padding: 1px 4px; 4 font-size: 1.7rem; 5} 6.nav__gNav a { 7 border-bottom: 4px solid transparent; 8} 9.nav__gNav a:hover { 10 color: #05562e; 11 border-bottom: 4px solid #05562e; 12} 13@media only screen and (max-width: 800px) { 14 .nav ul { 15 width: 100%; 16 } 17 18 .nav ul li { 19 width: 20%; 20 } 21} 22 23/* ------------------------------ 24 MEDIAQUERIES[SP]LAYOUT 25------------------------------ */ 26@media only screen and (max-width: 768px) { 27 .nav { 28 display: none; 29 } 30 31 .nav { 32 width: 100%; 33 border-bottom: #aaa 1px solid; 34 } 35 36 .nav #switchBtnArea { 37 width: 100%; 38 height: 60px; 39 background: #3c3c3c; 40 position: relative; 41 } 42 43 #rwdMenuWrap #switchBtnArea #switchBtn { 44 top: 10px; 45 right: 10px; 46 width: 40px; 47 height: 40px; 48 display: block; 49 background: #a7a7a7; 50 position: fixed; 51 border-radius: 5px; 52 z-index: 100000; 53 54 } 55 56 #rwdMenuWrap #switchBtnArea #switchBtn span { 57 left: 20%; 58 width: 60%; 59 height: 4px; 60 display: block; 61 position: absolute; 62 background-color: #fff; 63 border-radius: 5px; 64 transition: all 0.2s linear; 65 } 66 #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) { 67 top: 10px; 68 -webkit-transform: rotate(0); 69 transform: rotate(0); 70 } 71 #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) { 72 top: 18px; 73 -webkit-transform: scale(1); 74 transform: scale(1); 75 } 76 #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) { 77 bottom: 10px; 78 -webkit-transform: rotate(0); 79 transform: rotate(0); 80 } 81 82 #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) { 83 top: 18px; 84 -webkit-transform: rotate(-45deg); 85 transform: rotate(-45deg); 86 } 87 #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) { 88 -webkit-transform: scale(0); 89 transform: scale(0); 90 } 91 #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) { 92 bottom: 18px; 93 -webkit-transform: rotate(45deg); 94 transform: rotate(45deg); 95 } 96 97 #rwdMenuWrap ul { 98 width: 100%; 99 display: none; 100 } 101 102 #rwdMenuWrap ul li { 103 width: 100%; 104 border-bottom: #aaa 1px solid; 105 } 106 107 #rwdMenuWrap ul li a { 108 padding: 15px 20px; 109 text-align: left; 110 display: block; 111 background: #ebebeb; 112 position: relative; 113 } 114 115 #rwdMenuWrap ul li a:after { 116 content: ''; 117 margin-top: -4px; 118 top: 50%; 119 right: 15px; 120 width: 8px; 121 height: 8px; 122 color: #888; 123 font-size: 1em; 124 font-weight: bold; 125 line-height: 1.2em; 126 display: block; 127 position: absolute; 128 border-top: 2px solid #b0b0b0; 129 border-right: 2px solid #b0b0b0; 130 -webkit-transform: rotate(45deg); 131 transform: rotate(45deg); 132 } 133 134 #contents { 135 width: 100%; 136 } 137 138 #contents p { 139 padding: 0 20px 2em 20px; 140 } 141} 142 143/* ------------------------------ 144 CLEARFIX ELEMENTS 145------------------------------ */ 146.nav > ul:before, 147.nav > ul:after { 148 content: " "; 149 display: table; 150} 151.nav > ul:after {clear: both;} 152.nav > ul {*zoom: 1;}

jQuery

1<script> 2$(function(){ 3 var rwdMenu = $('#menuList'), 4 switchPoint = 768, 5 slideSpeed = 500; 6 7 var menuSouce = rwdMenu.html(); 8 9 $(window).load(function(){ 10 11 function menuSet(){ 12 if(window.innerWidth <= switchPoint){ 13 if(!($('#rwdMenuWrap').length)){ 14 $('body').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea"><a href="javascript:void(0);" id="switchBtn"><span></span><span></span><span></span></a></div></div>'); 15 $('#rwdMenuWrap').append(menuSouce); 16 17 var menuList = $('#rwdMenuWrap > ul'); 18 19 $('#switchBtn').on('click', function(){ 20 menuList.slideToggle(slideSpeed); 21 $(this).toggleClass('btnClose'); 22 }); 23 } 24 } else { 25 $('#rwdMenuWrap').remove(); 26 } 27 } 28 29 $(window).on('resize', function(){ 30 menuSet(); 31 }); 32 33 menuSet(); 34 }); 35}); 36</script>

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

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

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

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

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

kei344

2017/08/09 06:47

「ハンバーガーメニュー」部分はどのように実装されていますか?
ryuji000

2017/08/09 06:52

すみませんjQuery書き足しました
kei344

2017/08/09 07:03

jQueryとHTMLが合っていませんが、別のHTMLを持ってこられていませんか?
ryuji000

2017/08/09 07:14

このhtmlに組み込みたいのですが
dit.

2017/08/09 07:14

直接的な回答ではないのですが気になった部分があったのでこちらの欄で失礼します。<ul><a href=""><li>事業一覧</li></a>...</ul>となっていますが、<ul>要素の直下は<li>が適当かと思います。<ul><li><a href="">○○</a></li>...</ul>に修正していただいた方が良いのではないでしょうか。
ryuji000

2017/08/10 00:27

勉強したてなのでそのよな指摘があると助かります。
guest

回答1

0

ベストアンサー

開閉したいメニューの中身はスクリプトでは$('#menuList')と指定されているようですが、HTML側には指定がありません。

HTML

1<nav class="nav" id="menuList">

としたかったのではないですか?

投稿2017/08/09 07:03

zohnam

総合スコア1441

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

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

ryuji000

2017/08/09 07:29

回答ありがとうございます。 そのとおりでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問