Q&A
2つのプラグインからどのようなスタイルが当てられているのか確認できないと問題の特定がしづらいと思いますので、可能であれば動くサンプルをUPしていただくか、該当箇所に関連するスタイルを抜粋して掲載できませんか？
お世話になります。
まだまだ初心者ではありますが、よろしければご教授の程よろしくお願いいたします。
現在HP製作のためスマホ用の多階層ドロップダウンの可能なドロワーメニューを作っています。
ネットで色々調べたところ、ドロップダウンが可能なドロワーメニューが色々公開されていましたが、
自分のイメージするものが見つからずそれぞれ単体では見つけることが出来ましたのでそれらを組み合わせようと考えました。
プラグイン名は「drawer」というドロワーメニュープラグインと「tendina」というドロップダウンプラグインを使用させていただいております。
ソースを貼らさせていただきます。
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.0/css/drawer.min.css"> <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> </head> <body class="drawer drawer--left"> <button type="button" class="drawer-toggle drawer-hamburger" id="menubtn"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <div class="drawer-masta drawer-default"> <nav class="drawer-nav"> <ul class="drawer-menu dropdown"> <li class="spmenu"><a href="#" id="active">親メニュー1</a> <ul> <li><a href="#">子メニュー1</a> <ul> <li><a href="#">孫メニュー1</a></li> <li><a href="#">孫メニュー2</a></li> <li><a href="#">孫メニュー3</a></li> <li><a href="#">孫メニュー4</a></li> <li><a href="#">孫メニュー5</a></li> <li><a href="#">孫メニュー6</a></li> <li><a href="#">孫メニュー7</a></li> <li><a href="#">孫メニュー8</a></li> <li><a href="#">孫メニュー9</a></li> </ul> </li> <li><a href="#">子メニュー2</a> <ul> <li><a href="#">孫メニュー10</a></li> <li><a href="#">孫メニュー11</a></li> </ul> </li> <li><a href="#">子メニュー3</a> <ul> <li><a href="#">孫メニュー12</a></li> <li><a href="#">孫メニュー13</a></li> </ul> </li> </ul> </li> <li><a href="#">親メニュー2</a></li> <li><a href="#">親メニュー3</a></li> <li><a href="#">親メニュー4</a></li> <li><a href="#">親メニュー5</a></li> <li><a href="#">親メニュー6</a></li> </ul><!-- / .dropdown --> <!-- tendina --> <script src="tendina.min.js"></script> <script> $('.dropdown').tendina({ animate: true, speed: 200, openCallback: function($clickedEl) { console.log($clickedEl); }, closeCallback: function($clickedEl) { console.log($clickedEl); } }) </script> </nav><!-- / .drawer-nav --> </div><!-- / .drawer-masta drawer-default --> <!-- jquery ドロワーメニュー --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.0/js/drawer.min.js"></script> <!-- drawer-master 有効化 --> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> </body>
「drawer」と「tendina」を組み合わせ多階層のドロップダウンドロワーメニューを作ることが出来たはできたのですが、
例えばスマートフォンで検証したところ、
ドロップダウンで「子メニュー1」→「孫メニュー1〜９」と展開させた時に、
「子メニュー1」と「孫メニュー1〜９」のheight分だけ下にさがるので、下の方にある「親メニュー6」などは当然ながらスマホの画面下に隠れる形になるのですが、
なぜかそのままスクロールさせようにも「親メニュー6」までスクロールできません。
「子メニュー1」と「孫メニュー1〜９」の高さ分、下までスクロールができなくなるというわけです。
理由としては、ドロップダウンの「子メニュー1」と「孫メニュー1〜９」が.drawer-navのheight100%からはみ出した扱いになっているからだと想定しているのですが、
「孫メニュー1〜９」を出している状態で一度ドロワーメニュー（ハンバーガーボタン）を閉じ、再度開くとheight100%が読み込み直しされるのか、「子メニュー1」と「孫メニュー1〜９」も.drawer-navのheight100%の中に含まれており、「親メニュー6」までスクロールすることが可能でした。
試しにその状態で「子メニュー1」「孫メニュー1〜９」のドロップダウンを閉じて元に戻してみると、「親メニュー6」の下に「子メニュー1」「孫メニュー1〜９」の高さ分の空白ができていました。
もう一度ドロワーメニュー（ハンバーガーボタン）を閉じ、開き直してみると空白は消え、元通りの高さに戻っていました。
この問題をなんとか解決し、正常なドロワーメニューにすることは可能でしょうか？
言葉で説明するのが難しく、わかりづらい説明で申し訳ありませんが
ご回答よろしくお願いいたします。
【追記】
動くサンプルをUPという追記依頼をいただきましたので、
先程アップさせていただきました。こちらが現状です。
https://jsfiddle.net/nzs639mk/3/
上げ方がおかしかったのかローカルで作りアップロードしたものと少し挙動が違います。
お手数ではありますが、ローカルで見ていただければと思います。
ローカルで作りアップロードした物はPCでは正常にスクロールが可能ですが、
jsfiddleに上げたものは、PCでのスクロールすらおかしくなってしまっています。
何卒よろしくお願いいたします。
特に「.drawer-nav」にoverflow:hidden;がかかっていないか確認したいところです。
ご回答ありがとうございます、追記させていただきました。よろしくお願いいたします。
回答1件
0
ベストアンサー
スマホ未検証。
CSS
1.drawer-nav { 2 overflow: auto !important; 3 overflow-x: auto !important; 4 overflow-y: scroll !important; 5}
JavaScript
1$( function() { 2 $( '.drawer' ).drawer( { 3 iscroll: { freeScroll: true } 4 } ); 5 $( '.dropdown' ).tendina( { 6 animate: true 7 , speed: 200 8 , openCallback: function( $clickedEl ) { 9 console.log( $clickedEl ); 10 } 11 , closeCallback: function( $clickedEl ) { 12 console.log( $clickedEl ); 13 } 14 } ); 15} ); 16```**動くサンプル：**[https://jsfiddle.net/22hw5f04/](https://jsfiddle.net/22hw5f04/)
投稿2016/10/06 18:01
総合スコア69407
ご回答ありがとうございます。
PCでは正常に動きましたが、なぜかスマホではドロップダウンすらできない状態でした。
ご教授頂きありがとうございますm(__)m
あなたの回答
tips
プレビュー
