Q&A
現在記述したコードを質問文に追記すると回答が得られやすくなると思います。
現在、
http://www.m
のサイトのようにナビゲーションメニューを押すとそれぞれ違った内容のドロワーが出てくるようにしてほしいと言われました。
https://blog.mismithportfolio.com/web/20150320drawer
を参考にこのプラグインを使い、
よくあるハンバーガーメニューをクリックした時と同じように
グローバルメニューをクリック時にドロワーを右から出すことはできましたが、
メニューごとにドロワーの中身を変えることができませんでした、
まだjQueryの知識が甘いので一から組み立てるにしても、
ヒントになるのような記事が無くだいぶ追い込まれています。
どなたか実装したことがある方、またはこのコードを使えばいいとヒントくださる方、
何卒お願い致します。
<!--スライド 中身--> <div class="drawer drawer--right"> <nav class="drawer-nav"> <div class=" cf"> <ul class="drawer-men"> <li class="menuItem"> TOP </li> <li class="menuItem"> ABOUT </li> <li class="menuItem"> CONTACT </li> </ul> </div> <span class="icon iconClose"></span> </nav> </div> <!--スライド中身 @end-->
<!--グローバルメニュ--> <div class="head"> <div class="headArea cf inner"> <h1 class="headH1 cf">10x</h1> <nav class="headNav"> <ul class="cf"> <li class="headLi drawer-toggle drawer-hamburger">About</li> <li class="headLi drawer-toggle drawer-hamburger">WORK</li> <li class="headLi drawer-toggle drawer-hamburger">contact</li> </ul> </nav> </div> </div>
//jQuery 「script.js」 $(document).ready(function() { $('.drawer').drawer(); });
//DROWERのプラグインJS /*! * jquery-drawer v3.2.1 * Flexible drawer menu using jQuery, iScroll and CSS. * http://git.blivesta.com/drawer * License : MIT * Author : blivesta <design@blivesta.com> (http://blivesta.com/) */ !function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){"use strict";var t="drawer",s="undefined"!=typeof document.ontouchstart,n={init:function(s){return s=e.extend ({iscroll:{mouseWheel:!0,preventDefault:!1},showOverlay:!0},s),n.settings={state:!1,events:{opened:"drawer.opened",closed:"drawer.closed"},dropdownEvents:{opened:"shown.bs.dropdown",closed:"hidden.bs.dropdown"}},n.settings["class"]=e.extend({nav:"drawer-nav",toggle:"drawer-toggle",overlay:"drawer-overlay",open:"drawer-open", close:"drawer-close",dropdown:"drawer-dropdown"},s["class"]),this.each(function(){var o=this,r=e(this),i=r.data(t);i||(s=e.extend({},s),r.data(t,{options:s}),n.refresh.call(o),s.showOverlay&&n.addOverlay.call(o) ,e("."+n.settings["class"] .toggle) .on("click."+t,function(){return n.toggle.call(o),o.iScroll.refresh()}),e(window).on("resize."+t,function(){return n.close.call(o),o.iScroll.refresh()}),e("."+n.settings["class"].dropdown) .on(n.settings.dropdownEvents.opened+" "+n.settings.dropdownEvents.closed,function(){return o.iScroll.refresh()}))})},refresh:function(){this.iScroll=new IScroll("."+n.settings["class"].nav,e(this).data(t).options.iscroll)},addOverlay:function(){var t=e(this) ,s=e("<div>").addClass(n.settings["class"].overlay+" "+n.settings["class"].toggle);return t.append(s)},toggle:function(){var e=this;return n.settings.state?n.close.call(e):n.open.call(e)},open:function() {var o=e(this);return s&&o.on("touchmove."+t,function(e){e.preventDefault()}),o.removeClass(n.settings["class"].close).addClass(n.settings["class"].open).css({overflow:"hidden"}) .drawerCallback(function(){n.settings.state=!0,o.trigger(n.settings.events.opened)})},close:function(){var o=e(this);return s&&o.off("touchmove."+t),o.removeClass(n.settings["class"].open).addClass(n.settings["class"].close).css({overflow:"auto"}) .drawerCallback(function(){n.settings.state=!1,o.trigger(n.settings.events.closed)})},destroy:function(){return this.each(function(){var s=this,o=e(this);e("."+n.settings["class"].toggle).off("click."+t),e(window). off("resize."+t),e("."+n.settings["class"].dropdown).off(n.settings.dropdownEvents.opened+" "+n.settings.dropdownEvents.closed),s.iScroll.destroy(),o.removeData(t).find("."+n.settings["class"].overlay) .remove()})}};e.fn.drawerCallback=function(t){var s="transitionend webkitTransitionEnd";return this.each(function(){var n=e(this);n.on(s,function(){return n.off(s),t.call(this)})})},e.fn.drawer=function(s){return n[s]?n[s] .apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof s&&s?void e.error("Method "+s+" does not exist on jQuery."+t):n.init.apply(this,arguments)}});
回答1件
0
ベストアンサー
質問者さんが挙げているサイトのメニューのような動作は、jQuery Mobileを使用することで実現できると思いますが、いかがでしょうか。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 ul { 14 display: flex; 15 justify-content: center; 16 list-style: none; 17 } 18 19 ul li { 20 padding: 0 8px; 21 } 22 23 a { 24 text-decoration: none; 25 } 26 </style> 27</head> 28<body> 29<div class="container"> 30 <div class="menu"> 31 <ul> 32 <li><a href="#menu1" class="open-panel">menu1</a></li> 33 <li><a href="#menu2" class="open-panel">menu2</a></li> 34 <li><a href="#menu3" class="open-panel">menu3</a></li> 35 </ul> 36 </div> 37 <div role="main" class="ui-content"> 38 <h1>テキスト</h1> 39 <p>テキスト。</p> 40 </div> 41 <div class="panel"> 42 <div data-role="panel" id="menu1" data-display="overlay" data-position="right" data-theme="a"> 43 <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a> 44 <h2>menu1の内容</h2> 45 <p>テキスト</p> 46 </div> 47 <div data-role="panel" id="menu2" data-display="overlay" data-position="right" data-theme="a"> 48 <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a> 49 50 <h2>menu2の内容</h2> 51 <p>テキスト</p> 52 </div> 53 <div data-role="panel" id="menu3" data-display="overlay" data-position="right" data-theme="a"> 54 <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a> 55 <h2>menu3の内容</h2> 56 <p>テキスト</p> 57 </div> 58 </div> 59</div> 60<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 61<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script> 62<script> 63 $(".open-panel").on("click", function (e) { 64 e.preventDefault(); 65 $.mobile.silentScroll($($(this).attr("href")).offset().top); 66 }); 67</script> 68</body> 69</html> 70
投稿2017/03/31 18:28
編集2017/03/31 18:31総合スコア14731
あなたの回答
tips
プレビュー
