如何在菜单 Laravel 中制作活动颜色 - PHP

在 Laravel 中，我们可以使用一些 CSS 样式类来为菜单中的当前选中项制作活动颜色。这是通过在 Blade 模板中使用条件语句来实现的。下面是一个示例：

<ul>
    <li class="{{ Request::is('home') ? 'active' : '' }}"><a href="/home">Home</a></li>
    <li class="{{ Request::is('about') ? 'active' : '' }}"><a href="/about">About</a></li>
    <li class="{{ Request::is('services') ? 'active' : '' }}"><a href="/services">Services</a></li>
    <li class="{{ Request::is('contact') ? 'active' : '' }}"><a href="/contact">Contact</a></li>
</ul>

在上面的代码中，我们使用了 Blade 模板的条件语句 {{ Request::is('path') ? 'active' : '' }}，其中 path 是我们要检查的当前路径。如果当前路径与 path 匹配，则添加 active 类，否则不添加。

为了使用这个样式类，我们需要在 CSS 文件中定义它。这是一个简单的例子：

.active {
    color: red;
    font-weight: bold;
}

在上面的例子中，我们将当前选中项的文本颜色和字体加粗。

为了使页面更加可读，我们应该将这些样式类集中在一个单独的 CSS 文件中，例如 menu.css。我们可以在 Blade 模板中使用 @section 和 @yield 指令来加载这个文件，如下所示：

@section('styles')
    <link rel="stylesheet" href="/path/to/menu.css">
@endsection

<ul>
    <li class="{{ Request::is('home') ? 'active' : '' }}"><a href="/home">Home</a></li>
    <li class="{{ Request::is('about') ? 'active' : '' }}"><a href="/about">About</a></li>
    <li class="{{ Request::is('services') ? 'active' : '' }}"><a href="/services">Services</a></li>
    <li class="{{ Request::is('contact') ? 'active' : '' }}"><a href="/contact">Contact</a></li>
</ul>

@yield('styles')

在上面的代码中，我们在 styles 区块中加载 CSS 文件，并在 yield 指令之后将其呈现出来。我们可以在任何继承自父 Blade 模板的子模板中重写 styles 区块来添加或修改样式。

本文展示了如何在 Laravel 中使用 CSS 样式类为菜单中的当前选中项制作活动颜色。通过在 Blade 模板中使用条件语句和 @section / @yield 指令，我们可以轻松地定制菜单样式，增加页面的可读性。