編集履歴

質問編集履歴

画像を追加

2019/08/11 08:26

投稿

hinakokoko

スコア2

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,3 +1,6 @@
+![](c8b9d64103ae513bbaa46f7c04ab5068.png)
 ```ここに言語を入力
 <html>
 <head>
@@ -188,7 +191,9 @@
 はじめに単体でハンバーガーメニュー（ナビゲーション）を置いた後、クロスフェードビューアーをjqueryを用いて配置するとハンバーガーメニューがその下にいってしまいメニューが開けなくなりました。
 ハンバーガーメニューを常に手前に表示させるにはどうしたらいいでしょうか？
+＜補足＞画面の一部のスクリーンショットになります、画像はスライドショーになっていて変化している途中なのですが、その下にメニューが来てしまいメニューが動作しません。
 ### 試したこと
 z-index、$の表記をそれぞれで変えても無理でした。

コードの修正

2019/08/11 08:26

投稿

hinakokoko

スコア2

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,19 +1,7 @@
-### 発生している問題・エラーメッセージ
-ハンバーガーメニューが下にいっている…
-はじめに単体でハンバーガーメニュー（ナビゲーション）を置いた後、クロスフェードビューアーをjqueryを用いて配置するとハンバーガーメニューがその下にいってしまいメニューが開けなくなりました。
-ハンバーガーメニューを常に手前に表示させるにはどうしたらいいでしょうか？
-### 試したこと
+```ここに言語を入力
-z-index、$の表記をそれぞれで変えても無理でした。
-### 現在のコード（htmlのみ）
 <html>
 <head>
-	    <link rel="stylesheet" type="text/css" href="style.css" />
+<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 -->
@@ -25,34 +13,34 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
-	<!--/.viewer-->
+<!--/.viewer-->
 <body class="drawer drawer--left">
-  <header role="banner">
+<header role="banner">
-    <!-- ハンバーガーボタン -->
+<!-- ハンバーガーボタン -->
-    <button type="button" class="drawer-toggle drawer-hamburger">
+<button type="button" class="drawer-toggle drawer-hamburger">
-      <span class="sr-only">toggle navigation</span>
+<span class="sr-only">toggle navigation</span>
-      <span class="drawer-hamburger-icon"></span>
+<span class="drawer-hamburger-icon"></span>
-    </button>
+</button>
-    <!-- ナビゲーションの中身 -->
+<!-- ナビゲーションの中身 -->
-    <nav class="drawer-nav" role="navigation">
+<nav class="drawer-nav" role="navigation">
-      <ul class="drawer-menu">
+<ul class="drawer-menu">
-        <li><a class="drawer-brand" href="#">Brand</a></li>
+<li><a class="drawer-brand" href="#">Brand</a></li>
-        <li><a class="drawer-menu-item" href="#">Nav1</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>
+<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">
+<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 nav1</a></li>
-            <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</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>
+<li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li>
-          </ul>
+</ul>
-        </li>
+</li>
-      </ul>
+</ul>
-    </nav>
+</nav>
-  </header>
+</header>
-  <main role="main">
+<main role="main">
-    <!-- Page content -->
+<!-- Page content -->
-  </main>
+</main>
 <div class="viewer">
 <ul>
 <li><a href="#1"><img src="image/01.jpg" alt=""></a></li>
@@ -61,136 +49,146 @@
 <li><a href="#4"><img src="image/04.jpg" alt=""></a></li>
 </ul>
 </div>
-  <!-- ドロワーメニューの利用宣言 -->
+<!-- ドロワーメニューの利用宣言 -->
-  <script>
+<script>
-    $ｄ(document).ready(function() {
+$(document).ready(function() {
-    $ｄ('.drawer').drawer();
+$('.drawer').drawer();
-  });
+});
-  </script>
+</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();
-                });
-            }
-        });
-    });
+$(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>
+</html>
+```### 発生している問題・エラーメッセージ
+ハンバーガーメニューが下にいっている…
+はじめに単体でハンバーガーメニュー（ナビゲーション）を置いた後、クロスフェードビューアーをjqueryを用いて配置するとハンバーガーメニューがその下にいってしまいメニューが開けなくなりました。
+ハンバーガーメニューを常に手前に表示させるにはどうしたらいいでしょうか？
+### 試したこと
+z-index、$の表記をそれぞれで変えても無理でした。