Bootstrap導航欄元素在Laravel中選擇活動

所以我有一個問題，並按照慣例，我正試圖學習前端的東西，我超出了我的深度。我目前正在撰寫一個有論壇，實時聊天，個人資料和其他一些內容的網站。這些我將調用「菜單項」與那些部分，即未讀消息被放置在下拉菜單項的消息。按照刀片服務器的方式，我使用的菜單刀片是佈局刀片的一部分，最後該頁面合併了所需的任何佈局。Bootstrap導航欄元素在Laravel中選擇活動

我在看到帖子後嘗試的最後一個解決方案是將{{ 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的，如果這是你需要的情況下明確說明我如何以及在哪裏放置它，因爲我從未想過使用它！

謝謝！

來源

2016-10-19 Adam Waring

你說得對與將活動類到像李。我會嘗試簡化navbar html，即「角色=」演示文稿「，我在bootstrap文檔中看不到這一點。 – cssBlaster21895

我最近的確有這個問題，我發現了兩個有用的包在packagist.org

watson/active：這個包是非常簡單的和有用的，你可以添加active or any other類到他們的路線菜單基地，這可能是路線，行動或網址激活。
lavary/laravel-menu：我個人發現這個包比上一個更有用，你可以創建分層菜單，根據路線，動作或url激活菜單，甚至可以在任何其他url上激活你的菜單。對於父菜單非常有用，例如，當您處於與菜單中的父鏈接相關的子鏈接時，子鏈接和父鏈接都將被激活。）。這個軟件包比另一個軟件包複雜得多，但我認爲文檔寫得非常清楚，如果你仔細閱讀，你可以用你的菜單做任何你想做的事情。

來源

2016-10-19 07:38:59

Lavary/laravel-menu是我選擇的，但仍然有問題才能實際觸發活動性質，但菜單出來了！ –

@AdamWaring這個包非常有用的鏈接激活，實際上自動執行[檢查你的html在檢查元素「鉻」你看到它把獲得「積極」類鏈接，但如果這不是'你可以按你想要的方式進行配置（我在Semantic web框架旁邊使用這個包），它支持開箱即用的Bootstrap。 https://github.com/lavary/ laravel菜單＃menu-as-bootstrap-3-navbar –

是的我正在與作者交談，這是一種方式，我不得不循環菜單項，我會最終解決它現在我有一個起點。我在想我可能需要（@ item-> url =（$ request-> url - $ rest_base）active @endif –

這裏是我的解決方案

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

來源

2016-10-19 07:21:50 aleksejjj

我一直這樣做了很多次，我根據導航的類型提出了兩種解決方案。

最簡單的，當你有簡單的實體（如郵政，類別，標籤）和每個菜單項1個工作正常。

<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

來源

2016-10-19 10:10:14 SimonDepelchin

Bootstrap導航欄元素在Laravel中選擇活動

回答

相關問題