Bootstrap sidebar: aktuelles item markieren

Badabum · 9. Dezember 2014

Hallöchen
Ich arbeite jetzt schon seit ein paar Wochen mit PHP. Im Rahmen eines Projektes muss ich eine moderne Seite entwickeln (und Designen). Das ganze soll also nicht nur funktionieren sondern auch noch gut aussehen

Ich benutze ein PHP Framework (Laravel 4.2) und Bootstrap. Ich habe mich jetzt schon viel mit HTML/CSS und Bootstrap auseinandergesetzt und meine Seite sieht schon ganz ansehnlich aus. Allerdings hapert es an einer Stelle. Ich habe auf meiner Home-Seite (Dashboard) eine Sidebar. Die sieht so aus:

HTML

<div class="col-sm-3 col-md-2 sidebar">
	<ul class="nav nav-sidebar">
		<li class="active">
			<a href="/home">1. Item<span class="sr-only">(current)</span></a>
		</li>
		<li>
			<a href="/seite2">2. Item</a>
		</li>
		<li>
			<a href="/seite3">3. Item</a>
		</li>
		<li>
			<a href="/seite4">4. Item</a>
		</li>
	</ul>
</div>

Alles anzeigen

Soweit erstmal. Jetzt habe ich schon herausgefunden, das ich mit dem Befehl "(current)" (hier in der 4. Zeile zu sehen) ein Item in der Sidebar selektieren kann. Jetzt ist meine Sidebar allerdings in eine Datei ausgelagert (mit ich sie auf allen Seiten die einem bestimmten Muster folgen schnell einbinden kann). Aber wie kann ich nun, wenn ich auf der Home-Seite das 3. Item anklicke, das Item auch auf der sich nun öffnenden Seite (in dem Fall Seite 3, da Item 3 = Link auf seite3) selektieren?

Wahrscheinlich mit JavaScript, oder? Ich bitte um eure Hilfe.

Einen schönen Abend noch

wolf · 10. Dezember 2014

Du kannst jedem link ne klasse (z.B. link-4 ) geben und dem Dazugehörigen body auch eine ähnliche klasse (z.B. page-4).. und dan könntest du sowas hier tun:

CSS

.page-1 .link-1,
.page-2 .link-2,
.page-3 .link-3,
.page-4 .link-4{
    transform: scale(1.3);
/* alle 'active' styles */
}

Oder wenn du die Seiten eh per php generierst.. im nav dem richtigen Link eine Klasse mitgeben (z.B. active)

lauras · 10. Dezember 2014

Laravel stellt dir dazu Methoden zur Verfuegung, siehe: http://laravel.com/docs/4.2/requests#request-information

Du koenntest z.B. Request::is() verwenden um die entsprechende Klasse anzuhaengen:

HTML

<li<?php if(Request::is('home')){ echo ' class="active"';}?>>
    <a href="/home">1. Item<?php if(Request::is('home')){ echo '<span class="sr-only">(current)</span>';}?></a>
</li>

Bzw. wie auch immer die Syntax der von dir verwendeten Template-Engine halt lautet

Badabum · 10. Dezember 2014

Danke für die Hilfe, ich habe es jetzt so gemacht, wie du es Vorgeschlagen hast, lauras. Mit Blade:

HTML

<li @if (Request::is('home')) @{{ class="active" }} @endif>
	<a href="/home"><span class="glyphicon glyphicon-stats"></span> Test 1<span  @if (Request::is('home')) @{{ class="sr-only">(current) }} @endif</span></a>
</li>
<li @if (Request::is('test')) @{{ class="active" }} @endif>
	<a href="/test"><span class="glyphicon glyphicon-export"></span> Test 2<span  @if (Request::is('test')) @{{ class="sr-only">(current) }} @endif</span></a>
</li>

Da hätte ich ja draufkommen müssen

Danke

Bootstrap sidebar: aktuelles item markieren

Jetzt mitmachen!

Teilen