Создание меню с активными ссылками в Laravel может быть выполнено с помощью встроенных функций Blade и условных операторов для определения активной ссылки. Это позволяет динамически изменять стиль или классы для активной ссылки, улучшая пользовательский опыт и визуальное представление вашего сайта. В этой статье мы рассмотрим, как создать простое меню с активными ссылками в Laravel.
Шаг 1: Создание маршрутов
Допустим, у вас есть несколько маршрутов, которые вы хотите отобразить в меню:
// routes/web.php
Route::get('/', 'HomeController@index')->name('home');
Route::get('/about', 'AboutController@index')->name('about');
Route::get('/contact', 'ContactController@index')->name('contact');
Шаг 2: Создание представления меню
Создайте файл Blade для вашего меню, например resources/views/partials/menu.blade.php. В этом файле вы можете использовать функцию Route::currentRouteName() для определения текущего маршрута и добавить класс active к активной ссылке:
<!-- resources/views/partials/menu.blade.php -->
<nav>
<ul>
<li class="{{ Route::currentRouteName() == 'home' ? 'active' : '' }}">
<a href="{{ route('home') }}">Home</a>
</li>
<li class="{{ Route::currentRouteName() == 'about' ? 'active' : '' }}">
<a href="{{ route('about') }}">About</a>
</li>
<li class="{{ Route::currentRouteName() == 'contact' ? 'active' : '' }}">
<a href="{{ route('contact') }}">Contact</a>
</li>
</ul>
</nav>
Шаг 3: Использование меню в представлениях
Теперь вы можете включить ваше меню в любое представление Blade с помощью директивы @include:
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Laravel Site</title>
</head>
<body>
@include('partials.menu')
<main>
@yield('content')
</main>
</body>
</html>
Шаг 4: Добавление стилей для активной ссылки
Вы можете добавить CSS-стили для класса active в вашем файле стилей, чтобы выделить активную ссылку:
/* public/css/app.css */
.active {
color: red;
font-weight: bold;
}
Не забудьте подключить ваш CSS-файл в вашем макете Blade:
<!-- resources/views/layouts/app.blade.php -->
<head>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
Заключение
Создание меню с активными ссылками в Laravel позволяет динамически изменять стиль или классы для активной ссылки, улучшая пользовательский опыт и визуальное представление вашего сайта. Использование функций Blade и условных операторов для определения активной ссылки делает этот процесс простым и эффективным.
0 комментариев