Clever Geek Handbook

シンプルなHTMLメニューでアクティブなアイテムを強調表示するツール

デザイナーがレイアウトに描いたほとんどすべてのメニューには、ユーザーが現在いる現在のメニュー項目の表示がわずかに異なります。 これらは、ユーザビリティを向上させるための基本的なトリックです。 ほとんどの場合、そのようなアクティブなメニュー項目は何らかの方法で強調表示しようとします。



順不同リストにメニューを実装するのが慣例であり、現在のメニュー項目をアクティブにするには、 current active



クラスを追加します。 



 <li class="current active"> <a href="#link">Current link</a> </li>




実際、強調表示する必要があるリンクの主な2つのタイプを区別するのが慣例です。





もちろん、Symfonyを使用する場合-アクティブなアイテムのハイライトを調整できるKNPMenuBundle



を使用する機会がありますが、これを初めて行う場合は複雑に見えるかもしれません。 ただし、いくつかのレベルのネストのみを備えた単純なHTMLメニューがあり、 KNPMenuBundle



ようなOOPメニューに転送するのがKNPMenuBundle



な場合は、現在のメニュー項目を強調表示するのに役立つActiveMenuItemBundleライブラリーをお勧めします。



このプロジェクトはオープンソースであり、 MITライセンスの下で配布されており、ダウンロードできます。





設置



Composerを使用して最新バージョンのActiveMenuItemBundle



をSymfonyプロジェクトにインストールする最も簡単な方法は次のとおりです 。 



 { "require": { "bw/active-menu-item-bundle": "1.1.*@dev" } }


次に、バンドルをapp/AppKernel.php



登録しapp/AppKernel.php



。 



 public function registerBundles() { $bundles = array( // other bundles... new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(), );




使用する



Twigテンプレートで、アクティブなメニュー項目を決定するのに役立ついくつかの新しいフィルターと機能が利用できるようになりました。



メニュー項目のルートが現在のルートと一致するかどうかを確認するには、 is_active



フィルターを使用します 。

例1： 

 <li class="{{ 'route_name'|is_active }}"> <a href="{{ path('route_name') }}">Current link</a> </li>


ルートが一致する場合、フィルターは文字列current active



を返します。



マルチレベルメニューの親アイテムの場合、現在のルートがその子サブポイントと一致したかどうかを確認するには、 is_active



関数を使用し、最初の引数で子ルートの配列を渡し、2番目の引数で特定のメニュー項目をルーティングします。

例2： 

 <li class="{{ is_active(['child_route_1', 'child_route_2'], 'parent_route') }}"> <a href="{{ path('parent_route') }}">Parent link</a> <ul> <li class="{{ 'child_route_1'|is_active }}"> <a href="{{ path('child_route_1') }}">Child link</a> </li> <li class="{{ 'child_route_2'|is_active }}"> <a href="{{ path('child_route_2') }}">Current link</a> </li> </ul> </li>


リンクCurrent link



のルートchild_route_2



がchild_route_2



する場合、 current active



クラスがそれに割り当てられ、 active



クラスのみがparent_route parent_route



その親に割り当てられます。



ルートの代わりにリクエストURIを使用する必要がある場合は、 is_active_uri



フィルターとis_active_uri



関数を使用します。 is_active_uri



はまったく同じように機能し、リクエストURIを渡す必要があります。リクエストURIは、Symfonyボックスから提供されるpath



関数によって生成できます。

例3： 

 <li class="{{ path('route_name')|is_active_uri }}"> <a href="{{ path('route_name') }}">Current link</a> </li>




デモ



デモ例を表示するには、 devモードのapp/config/routing_dev.yml



にルーティングをインポートする必要があります。 

 bw_active_menu_item: resource: "@BWActiveMenuItemBundle/Resources/config/routing.yml" prefix: /bw/demo/active-menu-item


次に、ビルトインphp app/console server:run



モードでphp app/console server:run



し、アドレスに移動します localhost:8000/bw/demo/active-menu-item/index



localhost:8000/bw/demo/active-menu-item/index



Twigテンプレートのデモコードを次に示します。



おわりに



私のバンドルが誰かに役立つならうれしいです。このツールは便利でシンプルで、小さなHTMLメニューに対して優れたパフォーマンスを発揮することがわかったと思います。 大きくて複雑なメニューではテストしていませんが、コード実行のシンプルさと速度に基づいて-うまくいくはずです。主なことは、ルートを使用する場所とリクエストURIを適切に決定することです（少し考えます）。

誰が気にかけているのか-フィルターと関数の操作を担当するコードは、長い間探しないようにするためのものです。



ご清聴ありがとうございました！



PS矢印は簡単に押すことができると思いますが、マイナスの場合はコメントで理由を説明してください。


More articles:


All Articles