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

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

ただいまの
回答率

90.32%

  • jQuery

    7116questions

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

jQueryでメニューごとに異なるドロワーを設置したいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 961

8070_nn

score 8

現在、
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)}});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2017/03/31 23:18

    現在記述したコードを質問文に追記すると回答が得られやすくなると思います。

    キャンセル

  • 8070_nn

    2017/03/31 23:33

    ありがとうございます!

    キャンセル

回答 1

checkベストアンサー

+2

質問者さんが挙げているサイトのメニューのような動作は、jQuery Mobileを使用することで実現できると思いますが、いかがでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }

        ul li {
            padding: 0 8px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="menu">
        <ul>
            <li><a href="#menu1" class="open-panel">menu1</a></li>
            <li><a href="#menu2" class="open-panel">menu2</a></li>
            <li><a href="#menu3" class="open-panel">menu3</a></li>
        </ul>
    </div>
    <div role="main" class="ui-content">
        <h1>テキスト</h1>
        <p>テキスト。</p>
    </div>
    <div class="panel">
        <div data-role="panel" id="menu1" data-display="overlay" data-position="right" data-theme="a">
            <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a>
            <h2>menu1の内容</h2>
            <p>テキスト</p>
        </div>
        <div data-role="panel" id="menu2" data-display="overlay" data-position="right" data-theme="a">
            <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a>

            <h2>menu2の内容</h2>
            <p>テキスト</p>
        </div>
        <div data-role="panel" id="menu3" data-display="overlay" data-position="right" data-theme="a">
            <a href="#" class="ui-btn-right ui-link" data-rel="close">閉じる</a>
            <h2>menu3の内容</h2>
            <p>テキスト</p>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<script>
    $(".open-panel").on("click", function (e) {
        e.preventDefault();
        $.mobile.silentScroll($($(this).attr("href")).offset().top);
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/01 21:32

    できました!ありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7116questions

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