<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、$の表記をそれぞれで変えても無理でした。
こんにちは。
今貼っていただいているコードでその問題(ハンバーガーメニューが裏に隠れる)は発生するでしょうか?
また、どういう操作をしたときにその問題は発生するかを追記してもらえるでしょうか?(開いた瞬間なのか、ボタンクリックしたらなのか)
〜補足です〜
・コードの挿入 <code> ボタンの中にコード書くと見やすくなりますよ。
・$d(document).ready(function() { の $dはタイポですか?元のソースもそうなっていますか?
・異なるversionのjqueryが2つ読み込まれてますが意図はありますか?
返信ありがとうございます!
今のコードで発生します。単純に、ハンバーガーメニュー自体が機能しない状態です。クリックしても開きません。
ドロワーメニューの下の、画像をスライドショーさせるスクリプトを貼るとそれが機能しなくなった感じです。
$dは、複数スクリプトがあるのが原因だと思いまして私が勝手にdを付けたものです…!消すのを忘れていました。
コードが読みづらくて申し訳ございません。夜、書き直せると思いますのでおまちいただけますと幸いです。