Question

所以我有一个问题，按照惯例，我正在尝试学习前端的东西，这是我的深度。我目前正在撰写一个网站，其中包含论坛，实时聊天，个人资料以及其他一些内容。我打电话给＆＃34;菜单项＆＃34;这些部分即未读消息被放置在消息的下拉菜单项上。按照刀片方式，我使用菜单刀片，它是布局刀片的一部分，最后页面包含它想要的任何布局。

我看到帖子之后尝试的最后一个解决方案是将{{ Request::segment(1) === 'messages' ? 'active' : '' }}或{{ Request::segment(1) === 'messages' ? 'active' : 'null' }}添加到菜单项的相应li的类部分中，这样就成功更新了一些菜单项样式而且还打破了下拉功能。

下面是我的代码，其中还包含我的最后一个解决方案：

 <nav class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand {{ Request::segment(1) === '/' ? 'active' : '' }}" data-toggle="tab" href="/">Home</a>
  </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown {{ Request::segment(1) === 'forum' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="/forum" role="button" aria-haspopup="true" aria-expanded="false">Forum<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Newest Posts</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Something</a></li>
<li role="separator" class="divider"></li>
<li><a href="/forum">Create New Post <span class="glyphicon glyphicon-edit"></span></a></li>
<li><a href="/forum">Your Posts</a></li>
</ul>
</li>
<li class="{{ Request::segment(1) === 'chat' ? 'active' : null }}"><a href="/chat">Chat</a></li>

<li role="presentation" class="dropdown {{ Request::segment(1) === 'messages' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Unread</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Sent</a></li>
<li role="separator" class="divider"></li>
<li><a href="/messages">All</a></li>
</ul>
</li>
</ul>

</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default"></nav>

我很欣赏我是新手，并且大多数解决方案都需要像js或jquery这样的东西，如果是这种情况，你需要明确我放置它的方式和位置，因为我从未想过使用它！

谢谢！

Answer 1

这是我的解决方案

<a class="@if(Request::is('home')) active @endif" href="{{ route('home') }}">Home</a>

Answer 2

我最近遇到了这个问题，我在packagist.org

中找到了两个有用的包

watson/active：此软件包非常简单实用，您可以在其路径上添加active or any other类到菜单，这可能是路由，操作或网址激活。
lavary/laravel-menu：我个人发现此软件包比上一个软件包最有用，您可以创建分层菜单，激活路由，操作或网址的菜单，甚至可以激活您的菜单基础任何其他网址（这对父菜单很有用，例如，当您处于与菜单中父链接相关的子链接时，子链接和父链接都将被激活。）。这个包比其他包最复杂，但我认为文档写得非常清楚，如果你仔细阅读，你可以用你的菜单做任何你想做的事。

Answer 3

我已经多次这样做了，我根据导航的类型提出了两种解决方案。

最简单，当你有简单的实体（如帖子，类别，标签）和每个菜单条目时，工作正常。

<a href="{{ route('posts.index') }}" class="{{ request()->is('posts*') ? 'active' : '' }}">Posts</a>

这将匹配所有经典终结点，例如/posts，/posts/new，/posts/{post}，...

我一直在将这个用于我的最新项目，因为它很简单并且允许更多的自定义。如果你有类似嵌套导航项的东西，这非常有用。
- 帖子
- 所有帖子
- 新帖
- 帖子设置
- 分类
- 所有类别
- 新类别

我只是将变量传递给我的布局。

// views/posts/index.blade.php
@extends('layouts.app', ['activeMenu' => 'posts.index'])

@section('content')
    // Your content
@stop

// views/layouts/app.blade.php
<html>
    //...
    <li class="{{ $activeMenu == 'posts.index' ? 'active' : '' }}"><a href="">All Posts</a></li>
    <li class="{{ $activeMenu == 'posts.create' ? 'active' : '' }}"><a href="">New Post</a></li>
    // ...

你也可以使用这样的嵌套活动状态。

// views/posts/index.blade.php
@extends('layouts.app', ['activeMenu' => 'posts' 'activeSubMenu' => 'posts.index'])

@section('content')
    // Your content
@stop

// views/layouts/app.blade.php
<html>
    //...
    <li class="dropdown {{ $activeMenu == 'posts' ? 'active' : '' }}">
        <a class="dropdown-toggle" data-toggle="dropdown tab">Posts <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="{{ $activeSubMenu == 'posts.index' ? 'active' : '' }}"><a href="#">All Posts</a></li>
            <li class="{{ $activeSubMenu == 'posts.create' ? 'active' : '' }}"><a href="#">New Post</a></li>
        </ul>
    // ...

否则我建议你看一下spatie/laravel-menu

Bootstrap Navbar Element在Laravel

3 个答案: