Laravel中用於Twitter Bootstrap導航的自動活動類

Question

像大多數人一樣，我正在使用Twitter Bootstrap來訪問我目前正在Laravel中開發的網站。 到目前為止，我很享受使用Laravel作為與Rails相當的PHP，但我想知道是否有更好的方法來做導航欄。 我正在嘗試確保我的navbar li標簽自動獲得活動類，所以我有這個：

<ul class="nav nav-pills">
@if(URL::current() . "/" == URL::route('home'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('home') }}">Home</a>
</li>
@if(URL::current() == URL::route('about'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('about') }}">About</a>
</li>
</ul>

現在這個沒關系。 但是當我有菜單和更多導航時，最終看起來很難調試和處理。

有什么類似於Laravel的Gem Tabulous或者在Laravel中處理導航的一般方法嗎？

Answer 1

我用這個：

<li class="{{Request::path() == 'home' ? 'active' : '';}}">
  <a href="/home"><i class="fa fa-home"></i>Home</a>
</li>

Answer 2

看一下Bootstrapper軟件包，它有很多工具可以幫助你使用Twitter Bootstrap。 在您的示例中，您可以像這樣構建導航：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
    )
));

還有簡寫方法，不那么詳細，我不是特別喜歡，但可以使用：

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about')),
    ))
);

值得注意的是，在兩個示例中， Bootstrapper自動處理active類 ，將當前請求URL與傳遞給項目的URL進行比較。 但是，如果您希望為此應用指定不同的條件，則只需為較短的方法傳遞active值或數組中的第三個值。 例：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
        'active' => true,
    )
));

要么

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about'), true),
    ))
);

Answer 3

我找到了一個幫助解決這個問題的小片段。 希望這有助於下一個搜索此問題的人。 http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

Answer 4

我為這個任務創建了一個簡單的幫助器。 我把它保存為/app/helpers/Menu.php 。 然后在/app/start/global.php中我將我的幫助文件添加到ClassLoader::addDirectories數組中，如下所示： _app_path().'/helpers', （如果未加載類，請嘗試運行“composer dump-autoload”）控制台，有關添加助手的更多信息，請點擊此處 ）

class Menu {
 public static function item($route, $label='', $class='', $params=array()) {
    $class .= (Route::getCurrentRoute()->getAction()['as']==$route) ? ' active' : '';
    $tag = $class ? '<li class="'.trim($class).'">' : '<li>';
    return $tag.HTML::link(URL::route($route, $params),$label).'</li>'; 
  }
}

在你看來。 只提供路由名稱，它將創建一個內部鏈接的LI元素，'active'類被添加到LI元素。 您還可以使用第三個參數添加自定義類。

<ul class="menu">
  {{ Menu::item('index','Home') }}
  {{ Menu::item('pages.about','About Us') }}
  {{ Menu::item('pages.contact','Get In Touch','last') }}
  {{ Menu::item('profile-user','Profile','',array('username' => Auth::user()->username)) }}
</ul>

Answer 5

如果您不介意解決方案是基於jQuery的，那么您可以嘗試以下方法：

$('#mainmenu li').removeClass('active');
$('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');

其中mainmenu是導航欄的id或包含li項的任何其他元素。

Answer 6

這是我使用的：

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

Answer 7

對於讀這篇關於Laravel 5.4的人來說：

<li class="{{Request::path() == 'home' ? 'active' : '';}}">

需要變成（取出結局;）：

<li class="{{Request::path() == 'home' ? 'active' : ''}}">

Answer 8

另一個有用的庫可以在這里https://code.google.com/p/bootstrap-php/source/browse/#svn%2Ftrunk%2FNavbar不復雜，但很容易使用

$oNavbar      = new Bootstrap_Navbar_Handler(array('class' => 'nav-pills'));
$oNavbar->addEntry('Home', array('href' => '/pageurlHome'));
$oNavbar->addEntry('About', array('href' => '/pageurlAbout'));

$oNavbar->setAutoActive(true);
echo $oNavbar->display();

這會產生：

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav-pills nav">
        <li class="active"><a href="/pageurlHome" class="">Home</a></li>
        <li><a href="/pageurlAbout" class="">About</a></li>
      </ul>
    </div>
  </div>
</div>

通過使用

$oNavbar->setAutoActive();

該類自動激活相應的條目

Answer 9

不是Laravel解決方案，而是我今天寫的一個簡單的客戶端JavaScript解決方案：

https://github.com/davidmars/bootstrapNavActive

<!--include our little script-->
<script src="https://cdn.rawgit.com/davidmars/bootstrapNavActive/master/BootstrapNavActive.min.js"></script>

<!--initialize the nav element-->
<script>
$( document ).ready(
function(){
    var $mySmartNav=$("#mySmartNav");
    new BootstrapNavActive($mySmartNav);
  }
);
</script>

歡迎改進代碼;）

Answer 10

我用這個工作正常

<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
   <a href="{{ route('blogs.create') }}">Create</a>
</li>