6

像大多数人一样，我正在为我目前在 Laravel 开发的网站使用 Twitter Bootstrap。到目前为止，我很喜欢将 Laravel 用作与 Rails 等效的 PHP，但我想知道是否有更好的方法来制作导航栏。我试图确保我的导航栏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 中处理导航的更好方法吗？

4

10 回答 10

19

我用这个：

<li class="{{Request::path() == 'home' ? 'active' : '';}}">
  <a href="/home"><i class="fa fa-home"></i>Home</a>
</li>
于 2014-01-09T22:00:30.027 回答
9

看看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),
    ))
);
于 2013-06-24T02:21:14.197 回答
5

我发现了一个有助于解决这个问题的小片段。希望这可以帮助下一个搜索这个的人。 http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

于 2013-12-25T15:48:12.013 回答
2

我为此任务创建了一个简单的助手。我将其保存为/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 元素，“活动”类将添加到 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>
于 2014-05-24T23:15:20.490 回答
2

对于在 Laravel 5.4 上阅读本文的任何人：

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

需要变成（去掉结尾；）：

<li class="{{Request::path() == 'home' ? 'active' : ''}}">
于 2017-05-15T17:32:09.080 回答
1

如果您不介意该解决方案是基于 jQuery 的，那么您可以尝试以下方法：

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

mainmenu您的导航栏或包含项目的任何其他元素的 id在哪里li。

于 2014-10-30T07:23:01.743 回答
1

This is what I use:

<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>
于 2015-11-16T02:57:59.223 回答
0

另一个有用的库可能在这里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();

该类自动激活相应的条目

于 2013-12-07T10:52:24.710 回答
0

我用这个工作正常

<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
   <a href="{{ route('blogs.create') }}">Create</a>
</li>
于 2016-04-15T20:06:51.077 回答
0

不是 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>

欢迎改进代码；）

于 2016-04-04T08:17:05.567 回答