良いアイデアやインスピレーションがない場合、創造的に異なるメニューを作成するのは非常に難しい場合があります. しかし、この種の問題は、他のインスピレーションを与えるメニューデザインを検索するか、ツールを使用して修正できます. この件では、 jQuery.Mmenu かなり便利なツールとして登場します。

jQuery.Mmenu は、Web サイトにモバイル アプリのスライド ナビゲーション メニューを作成するための使いやすい jQuery プラグインです。 この洗練されたクリエイティブなメニューは、より洗練されたユーザー エクスペリエンスをもたらします。

入門

はじめに jQuery.Mmenu、ダウンロード ページに移動すると、プラグインが自動的にダウンロードされます。 この投稿では、基本的なメニューを作成してみます。

他の jQuery プラグインと同様に、これを使用するには、必要な依存関係をサイトに含める必要があります。 それらは jQuery, jquery.mmenu.jsjquery.mmenu.css. スニペットは次のとおりです。

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

すべての機能とスタイルを備えた基本的なメニューを作成するには、これで十分です。 より高度な追加機能では、追加の JS および CSS ファイルを含める必要があります。

A の作成 Menu

いつものように基本的なメニューを作ってみましょう navullia 要素。 このデモでは、3 つのサブメニューと 3 つのサブサブメニューを持つ水平メニューを作成します。

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

上記のメニューには、jQuery.mmenu 関数の参照として使用されるメニュー ID を持つナビゲーションが含まれています。 次に、 plugin とともに javascript 機能し、そのようにIDを含めます。

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

LI タグには、次の名前のクラスが表示されます。 Selected、このクラスは、初期化時にデフォルトで選択されたメニューを作成するのに役立ちます。 独自のクラスを追加することもできます (たとえば、 active)、ただし、そのように構成セクションに必ず含めてください。

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

このプラグインは、サブメニューを閉じるリンクと開くリンクを自動的に追加するため、それらを作成する必要はありません。 メニューは次のようになります。

結論

jQuery.mmenu は、さまざまなメニューをできるだけ簡単に作成する優れたソリューションを提供します。 このプラグインで他のインタラクティブな要素を作成することもできます。たとえば、モバイル サイト用のスライド ツールチップと通知バーを作成できます。

jQuery.Mmenu 事前の使用のためにカスタマイズすることもできます。 たとえば、テーマ拡張機能、アドオン (ラベル、カウンター、ヘッダー、dragOpen および検索フィールド) と配置を組み合わせて、サイトにモバイルのような連絡先リストを作成できます。

記事を見つけたら jQuery.mmenu を使用して簡単にスライド メニューを作成する 役に立つので、友達と共有してください。 次の投稿でお会いしましょう。 従う driveria.net 最新のアップデートを入手するために!