waSlideMenu.js。 階層化スクロールメニュー

サブメニュー（ツリー）をスクロールメニューシステムに変えるjQueryプラグイン。



リポジトリ： github.com/webasyst/waslidemenu

試してください： jsfiddle.net/7LnSY/

例： demo-ru.webasyst.com



このようなメニューを作成するタスクは、Webasystアプリケーションの新しいデザインテーマの作業中に現れました。 プロトタイプとして、ナビゲーションメニューが検討されました。これは、iOS、Androidなどに基づいたほとんどのタブレットやスマートフォンにあります。 そのようなメニューの実装の美しいプロトタイプは、ウェブ上でFacebookヘルプセンターで 1つだけ見つかりました。 このようなメニューの既製のシンプルなソリューションは見つかりませんでしたので、独自のプラグインを作成しました。 プラグインは無料です（MIT）-あなたの健康を使用してください。

接続

<link href="/path/to/waslidemenu.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="/path/to/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.waslidemenu.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メニュー構成

マークアップ（ul li、divなど）に関係なく、ネストされた構造で動作します。

 <nav id="menu"> <ul> <li> <a href="#1">Parent 1</a> <ul> <li><a href="#1.1">Child 1.1</a> <ul> <li><a href="#1.1.1">We need to go deeper</li> </ul> </li> <li><a href="#1.2">Child 1.2</a></li> </ul> </li> <li><a href="#2">Parent 2</a></li> <li><a href="#2">Parent 3</a></li> </ul> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <nav id="menu"> <div class="menu"> <div class="item"> <a href="#1">1</a> <div class="menu"> <div class="item"><a href="#1.1">1.1</a></div> <div class="item"><a href="#1.2">1.2</a></div> </div> </div> <div class="item"><a href="#2">2</a></div> <div class="item"><a href="#3">3</a></div> </div> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインの初期化

ただ：

 $('#menu').waSlideMenu();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、いくつかの設定を追加できます。

 $('#menu').waSlideMenu({ menuSelector : '.menu', itemSelector : '.item', autoHeightMenu: true, minHeightMenu: 400, backLinkContent: 'Back please', backOnTop: true, scrollToTopSpeed: 200, slideSpeed: 500, onLatestClick: function(){ alert('Last node ' + $(this).text() + ' selected') } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設定

• menuSelector： '.menu'-メニューのセレクター。デフォルトはul。
• itemSelector： '.item'-メニュー項目のセレクター、デフォルトはli。
• autoHeightMenu：true-遷移後のサブメニューの高さを自動的に設定します。
• minHeightMenu：400-初期化およびその後の高さの変更中のメニューの最小の高さ。
• backLinkContent： 'Back please'-戻るリンクのコンテンツ。
• backOnTop：true-戻るリンクの場所の場所を選択します。
• scrollToTopSpeed：200- 「現在の」メニュー項目までのページのスクロール速度。 次のサブメニューへのスライドの後、そのアイテムが表示領域から消える場合があります。 この場合、ページは選択したメニュー項目までスクロールアップします。
• slideSpeed：500-メニュースライドの速度。
• その他の可能な設定については、githubのreadmeで詳しく説明しています。

コールバック

 $('#menu').waSlideMenu({ onInit : function(){ alert('Here I am!'); }, onLatestClick: function(){ alert('Last node ' + $(this).text() + ' selected') } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• onInit-メニューの初期化直後にトリガーします。
• onSlideForward-メニューの「詳細」レベルに切り替えた後に呼び出されます。
• onSlideBack -1レベル戻ると呼び出されます。
• afterSlide-メニュースライドの完了後にトリガーされます。
• onLatestClick-最後のメニュー項目をクリックした後に呼び出されます。
• afterLoadAlways -URLの読み込み結果に関係なく、常に呼び出されます。
• afterLoadDone -URLのロードが成功した後に呼び出されます。

その他の機能と要件

• プラグインは、ページ上の無制限の数のメニューに接続できます。
• 必要なコンテンツをロードし、ページのタイトルを設定し、ブラウザのアドレスバーのURLを変更できます。
• さまざまなブラウザー（IE9 +）、スマートフォン、タブレットでうまく機能します。
• あらゆる種類のコールバックとイベント。
• jQuery 1.7+を使用する必要があります。
• MITライセンス。

便利なリンク

• jQueryパターン 。 jQueryプラグインの作成に関するトピックを最初に見つけて読む必要があります。
• JavaScriptパターンコレクション 。 Celestial Empireの同志が1ページに多くの有用な資料を集めました。
• jQuery UIウィジェットファクトリに関するスライドのカップル。 次回は$ .widgetのみを使用します。

もう一度： リポジトリとデモ へのリンク 。 フィードバックと提案に感謝します！