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

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

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

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

HTML

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

Q&A

1回答

1766閲覧

ハンバーガーメニューが下にいって開けない。

hinakokoko

総合スコア2

jQuery

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

HTML

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

0グッド

0クリップ

投稿2019/08/10 16:27

編集2022/01/12 10:55

<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script> <!-- dropdown.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <!--/.viewer--> <body class="drawer drawer--left"> <header role="banner"> <!-- ハンバーガーボタン --> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <!-- ナビゲーションの中身 --> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <!-- ドロップダウンの中身 --> <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">Nav2 <span class="drawer-caret"></span></a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav1</a></li> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</a></li> <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li> </ul> </li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> <div class="viewer"> <ul> <li><a href="#1"><img src="image/01.jpg" alt=""></a></li> <li><a href="#2"><img src="image/02.jpg" alt=""></a></li> <li><a href="#3"><img src="image/03.jpg" alt=""></a></li> <li><a href="#4"><img src="image/04.jpg" alt=""></a></li> </ul> </div> <!-- ドロワーメニューの利用宣言 --> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).load(function(){ var setElm = $('.viewer'), setMaxWidth = 800, setMinWidth = 320, fadeSpeed = 1500, switchDelay = 5000, sideNavi = 'off', // 'on' or 'off' sideHide = 'hide', // 'hide' or 'show' naviOpc = 0.5; setElm.each(function(){ var targetObj = $(this), findUl = targetObj.find('ul'), findLi = targetObj.find('li'), findLiFirst = targetObj.find('li:first'); findLi.css({display:'block',opacity:'0',zIndex:'99'}); findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed); function timer(){ setTimer = setInterval(function(){ slideNext(); },switchDelay); } timer(); function slideNext(){ findUl.find('li:first-child').not(':animated').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'}); } function slidePrev(){ findUl.find('li:first-child').not(':animated').css({zIndex:'99'}).animate({opacity:'0'},fadeSpeed).siblings('li:last-child').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).prependTo(findUl); } targetObj.css({width:setMaxWidth,display:'block'}); // メイン画像をベースにエリアの幅と高さを設定 var setLiImg = findLi.find('img'), baseWidth = setLiImg.width(), baseHeight = setLiImg.height(); // レスポンシブ動作メイン function imgSize(){ var windowWidth = parseInt($(window).width()); if(windowWidth >= setMaxWidth) { targetObj.css({width:setMaxWidth,height:baseHeight}); findUl.css({width:baseWidth,height:baseHeight}); findLi.css({width:baseWidth,height:baseHeight}); } else if(windowWidth < setMaxWidth) { if(windowWidth >= setMinWidth) { targetObj.css({width:'100%'}); findUl.css({width:'100%'}); findLi.css({width:'100%'}); } else if(windowWidth < setMinWidth) { targetObj.css({width:setMinWidth}); findUl.css({width:setMinWidth}); findLi.css({width:setMinWidth}); } var reHeight = setLiImg.height(); targetObj.css({height:reHeight}); findUl.css({height:reHeight}); findLi.css({height:reHeight}); } } $(window).resize(function(){imgSize();}).resize(); // サイドナビボタン(有り無し) var agent = navigator.userAgent; if(sideNavi == 'on'){ targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>'); var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext'); if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ btnPrevNext.css({opacity:naviOpc}); } else { btnPrevNext.css({opacity:naviOpc}).hover(function(){ $(this).stop().animate({opacity:naviOpc+0.2},200); },function(){ $(this).stop().animate({opacity:naviOpc},200); }); } if(sideHide == 'hide'){ if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ btnPrevNext.css({visibility:'visible'}); } else { btnPrevNext.css({visibility:'hidden'}); targetObj.hover(function(){ btnPrevNext.css({visibility:'visible'}); },function(){ btnPrevNext.css({visibility:'hidden'}); }); } } btnPrev.click(function(){switchPrev();}); btnNext.click(function(){switchNext();}); } // ボタン移動動作 function switchNext(){ findLi.not(':animated').parents('ul').each(function(){ clearInterval(setTimer); slideNext(); timer(); }); } function switchPrev(){ findLi.not(':animated').parents('ul').each(function(){ clearInterval(setTimer); slidePrev(); timer(); }); } }); }); }); </script> </body> </html> ```### 発生している問題・エラーメッセージ ハンバーガーメニューが下にいっている… はじめに単体でハンバーガーメニュー(ナビゲーション)を置いた後、クロスフェードビューアーをjqueryを用いて配置するとハンバーガーメニューがその下にいってしまいメニューが開けなくなりました。 ハンバーガーメニューを常に手前に表示させるにはどうしたらいいでしょうか? <補足>画面の一部のスクリーンショットになります、画像はスライドショーになっていて変化している途中なのですが、その下にメニューが来てしまいメニューが動作しません。 ### 試したこと z-index、$の表記をそれぞれで変えても無理でした。

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

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

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

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

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

8zca

2019/08/11 02:00

こんにちは。 今貼っていただいているコードでその問題(ハンバーガーメニューが裏に隠れる)は発生するでしょうか? また、どういう操作をしたときにその問題は発生するかを追記してもらえるでしょうか?(開いた瞬間なのか、ボタンクリックしたらなのか) 〜補足です〜 ・コードの挿入 <code> ボタンの中にコード書くと見やすくなりますよ。 ・$d(document).ready(function() { の $dはタイポですか?元のソースもそうなっていますか? ・異なるversionのjqueryが2つ読み込まれてますが意図はありますか?
hinakokoko

2019/08/11 02:15

返信ありがとうございます! 今のコードで発生します。単純に、ハンバーガーメニュー自体が機能しない状態です。クリックしても開きません。 ドロワーメニューの下の、画像をスライドショーさせるスクリプトを貼るとそれが機能しなくなった感じです。 $dは、複数スクリプトがあるのが原因だと思いまして私が勝手にdを付けたものです…!消すのを忘れていました。 コードが読みづらくて申し訳ございません。夜、書き直せると思いますのでおまちいただけますと幸いです。
guest

回答1

0

打ち間違いの $d は認識されていらっしゃるので、あとはjqueryが2つ読み込まれているところですね。
google chromeを利用されていらっしゃるなら、デベロッパーツールを開いて console のタブを見てもらうと原因がわかるはずです。
(もちろん他のブラウザでもコンソールは見れます)

動かないときはコンソールを見るようにすると良いと思いますよ。

投稿2019/08/11 02:33

8zca

総合スコア559

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

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

hinakokoko

2019/08/11 08:23

ありがとうございます。 一度、コードを見やすいように書き直させていただきました。 それと、最近始めた初心者なので純粋に質問なのですが、jqueryが2つ読み込まれているとバグが発生することはありますか…?恥かしながら、メニューのコードもクロスフェードビューアーのコードもサンプルのもの(https://haniwaman.com/drawer-js/)と(http://black-flag.net/jquery/20131217-4909.html)をそのままコピーし、そのまま両方組み合わせただけの状態ですので調整などしていない状態です…。 consoleの確認も、少し遅くなりますがしてみます。
8zca

2019/08/11 09:04

scriptはHTMLファイルに書いた順番で実行されることを覚えておいてください。 今回のファイルでは 1. jqueryを読み込み 2. drawer等のライブラリを読み込み  drawerやbootstrapはjqueryが必要なライブラリですね。先にjqueryが読み込まれていないと動作しません。  (1と2の順番を逆にすると動かなくなります) 3. 2つ目のjquery(1.9.1)を読み込み 4. $('.drawer').drawer(); が実行される  consoleを見るとここでエラーになっているのがわかります。 コード上では4が先に書かれていますが、 $(document).ready() の中にあるので、読み込みが終わったあとに実行されのが注意点です。 $(document).ready() についてはこの辺見てください。 https://www.sejuku.net/blog/42981 それで、4を実行しようとdrawerを呼び出したけど、3でjqueryが読み込み直されているため、2で読み込んだライブラリは無かったことになります。 1と2で変数を用意したけど、3で初期化されてしまったとイメージしてください。 そのため、【読み込む順番によって】エラーとなってしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問