デザイナーがレイアウトに描いたほとんどすべてのメニューには、ユーザーが現在いる現在のメニュー項目の表示がわずかに異なります。 これらは、ユーザビリティを向上させるための基本的なトリックです。 ほとんどの場合、そのようなアクティブなメニュー項目は何らかの方法で強調表示しようとします。
順不同リストにメニューを実装するのが慣例であり、現在のメニュー項目をアクティブにするには、
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(
使用する
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矢印は簡単に押すことができると思いますが、マイナスの場合はコメントで理由を説明してください。