Navigations-Dilemma

tobm_knows_best · 15.09.2014

Hallo das werte Forum,

ich habe ein kleines Problem mit einer Sidebar-Navigation, die ich auf entsprechende Site eingebaut habe.

Eigentlich nichts wirklich Wildes, nur möchte ich, dass die Navigation auf der Seite nicht zusammenklappt sobald ich einen Menüpunkt im Submenü anklicke...

Momentan verweissen die Links alle auf die gleiche Seite - soll heißen, die Seite lädt sich jedes mal neu beim betätigen eines Links.

Wie stelle ich das jetzt an, dass die Navigation offen bleibt, obwohl sich die Seite neu lädt !?

Hier mal er Link zur besagten Seite... Vielleicht kommt ja der ein oder andere zurecht mit dieser komischen Fragestellung, aber ich kann mir nicht vorstellen dass das unmöglich sein wird....

http://www.mediengrafik-online.de/add/UI_Interface_Testing/index2.html

Mit Frames zu arbeiten ist hier jetzt aber kein absolutes Muss - oder?

Merci schon mal im Voraus für Eure Hilfe...
Gruß

Mereel · 16.09.2014

Wenn du dem übergeordneten li-Element die Klasse "parent-focus" verpasst, bleibt das Submenü geöffnet. Das kannst du denke ich am Besten direkt Server-seitig, aber auch mit Javascript machen. Da gäbe es verschiedene Möglichkeiten, wie das zu bewerkstelligen wäre - hängt natürlich davon ab, welche Software du im Hintergrund einsetzt (CMS o.Ä.). Ohne nähere Angaben wird es schwierig, da weiter ins Detail zu gehen.

tobm_knows_best · 16.09.2014

Mereel schrieb:
Wenn du dem übergeordneten li-Element die Klasse "parent-focus" verpasst, bleibt das Submenü geöffnet. Das kannst du denke ich am Besten direkt Server-seitig, aber auch mit Javascript machen. Da gäbe es verschiedene Möglichkeiten, wie das zu bewerkstelligen wäre - hängt natürlich davon ab, welche Software du im Hintergrund einsetzt (CMS o.Ä.). Ohne nähere Angaben wird es schwierig, da weiter ins Detail zu gehen.

Coole Sache - danke Dir - ähm... jetzt sind erst mal alle Submenüs offen

Wie ich jetzt die anderen Menüs wieder automaisch zubekomme weißt du nicht zufällig so spontan :/... !?

Ich arbeite mit Dreamweaver, kein WP oder sonst was... reines Codegfriemel (wo ich schon jetzt sehe dass so mancher Leser hier die Händer über´n Kopf zusammen schlägt :/ - na aber jeder fängt mal klein an...)

Kurzes Feedback von Dir wäre super

VG

Mereel · 16.09.2014

Du darfst natürlich die Klasse nur dem einen Listenelement geben, dem die aktuelle Seite untergeordnet ist. Wie du am besten herausfindest, unter welchem Listenelement sich der aktuelle Link befindet, solltest du denke ich am besten selber wissen ;-)
Im Zweifelsfall kannst du dir die aktuelle URL mit jquery holen und mit den href-Attributen aller Unterpunkte vergleichen. Stimmen die URLs überein, hangelst du dich im DOM bis zum übergeordneten menüpunkt hoch und vergibst die entsprechende Klasse. Das ist natürlich nicht die eleganteste Methode :-/

tobm_knows_best · 16.09.2014

Hallo Mereel,

vielen Dank für die ausführliche Antwort.
Wenn ich dich richtig verstanden habe würde ich quasi bei entsprechen viel Inhalt entsprechend viele Seiten erstellen müssen, wo ich den einzelnen Listenelementen dann die "Parent-Focus"-Klasse verpasse...

Mit jQuery und den "harten" Funktionen hab ich so gut wie gar nicht´s im Petto - Gibt´s ne alternative oder war die oben genannte jetzt schon das "unelegante jene"...?

Mereel · 17.09.2014

Ich versuchs nochmal mit Codebeispiel:

HTML:

<div class="leftpanel">
     <h5 class="leftpanel-title">Navigation</h5>
     <ul class="nav nav-pills nav-stacked">
          <li class="parent"><a href="#">User</a> <!-- DIESM LI-ELEMENT GIBST DU DIE KLASSE  parent-focus -->
               <ul class="children">
                    <li><a href="index1.html">Einstellungen</a></li><!-- DIES IST DER LINK, DER ZU DEINER AKTUELL AUFGERUFENEN SEITE FÜHRT -->
                    <li><a href="index2.html">Logout</a></li>
               </ul>
          </li>
          ...
     </ul>
</div>

Hier ein paar Tutorials, die zwar darauf abzielen, das Menüelement der aktuellen Seite zu finden, und nicht das Menüelement, das dem der aktuellen Seite übergeordnet ist, sollte aber das Prinzip verdeutlichen:

Die jQuery-Methode, die ich oben genannt habe (hier mit purem Javascript):
Eine reine CSS-Methode: https://www.youtube.com/watch?v=GKXu7oFVjhE
Ein Vergleich aller bisher genannten Methoden (CSS, JS, Server-seitig): http://www.apaddedcell.com/highlight-links-current-page-css

tobm_knows_best · 17.09.2014

Mereel schrieb:
Ich versuchs nochmal mit Codebeispiel:

HTML:

<div class="leftpanel"> <h5 class="leftpanel-title">Navigation</h5> <ul class="nav nav-pills nav-stacked"> <li class="parent"><a href="#">User</a>  <ul class="children"> <li><a href="index1.html">Einstellungen</a></li> <li><a href="index2.html">Logout</a></li> </ul> </li> ... </ul> </div>

Hier ein paar Tutorials, die zwar darauf abzielen, das Menüelement der aktuellen Seite zu finden, und nicht das Menüelement, das dem der aktuellen Seite übergeordnet ist, sollte aber das Prinzip verdeutlichen:

Die jQuery-Methode, die ich oben genannt habe (hier mit purem Javascript):

Eine reine CSS-Methode: https://www.youtube.com/watch?v=GKXu7oFVjhE

Ein Vergleich aller bisher genannten Methoden (CSS, JS, Server-seitig): http://www.apaddedcell.com/highlight-links-current-page-css

Vielen Dank dir,

ich werde mir mal heute Abend alles schön "reinziehn"... konnte arbeitsbedingt noch nicht antworten - aber so langsam lichtet sich der Nebel

Merci