Laravelで現在のURLを取得してメニューの色を変えたりハイライトする方法

Laravel・PHP豆知識・トラブル対策

Laravelで、Bladeファイル上の処理だけで、カレントURLを取得し、メニューの色を変更できる方法を解説します。

コントローラーを使わないのでテンプレートにも使えますし、foreachを使った部分でもOK。

メニューの色を変えて、ユーザービリティを高めていきましょう。

Laravelで現在のURLを取得してメニューの色を変えたりハイライトする方法

まずは基本編から。

次のリンクメニューを変更し、ユーザーがこのメニューにいるときには、色を変更するようにします。

次のようにコードに修正を加えます。

Bootstrapを使っていますが、もちろん、通常のクラス名を使っても大丈夫です。

分かりやすくクラス内のコードをまとめると、次のとおり。

{{url()->current() == route(‘ルート名’) ? ‘変更後のクラス名’ : ‘通常のクラス名’}}”>

url()->current() で、ユーザーが現在いるURLを指します。

その後、最初に【現在のURLになったときのクラス名】をいれ、コロンでくぎった後に【通常のクラス名】を指定します。

if文を使って書いた場合

上記のコードは三項演算子を使用して書きました。

もちろん、ifを使っても同じ動きをするコードを作れます。

その場合は、次のようになります。

ifの場合には、ルート名を{{}}で囲いません。

また、クラス名もクオテーションで囲いません。

foreach文を使っている場合

foreach文でも同じように使えます。

ルートと一緒に変数を引き渡す場合には、この変数も入れてあげます。

次のようになります。

foreach部分も、ユーザーが現在いる場所だけ色を変えることができます。

Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました