[CSS] Navigation per CSS Problem.

[toxic189]

Schönen guten Tag meine Damen und Herren


Ich habe eine frage, denn ich glaube es liegt an mir, das ich mich nicht ganz so auskenne mit CSS da ich erst anfange

Ich Arbeite mit Contao, das ist aber eher nebensächlich

Ich möchte eine Navigation via CSS formatieren. Funktioniert auch soweit ganz gut.
Nur komme ich gerade auf keinen Grünen Zweig denn momentan ist es ja so das man wenn man über "Firstlevel" drüber fährt die Untermenüs aufklappen.
Ich möchte aber erst bei einem Mausklick die Untermenüs direkt darunter angezeigt werden.
Aber irgendwie möchte das nicht so wie ich
Daher melde ich mich nun hier und würde mich freuen, wenn ihr mir helfen könntet.

.mod_navigation, .mod_navigation ul.level_1 { padding: 0; margin: 0; list-style: none;}
.mod_navigation a { display: block; width: 10em;}
.mod_navigation li { float: left; width: 10em;}
.mod_navigation li ul { position: absolute; width: 10em; left: -999em;}
.mod_navigation li:hover ul.level_2 { left: auto;}
.mod_navigation li ul ul { margin: -1em 0 0 10em;}
.mod_navigation, .mod_navigation ul { padding: 0; margin: 0; list-style: none; line-height: 1;}
.mod_navigation li:hover ul ul { left: -999em;}
.mod_navigation li:hover ul ul{ left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul { left: auto;}
.mod_navigation li:hover ul ul, .mod_navigation li:hover ul ul ul { left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul, .mod_navigation li li li:hover ul { left: auto;}
.mod_navigation li:hover ul ul, .mod_navigation li:hover ul ul ul, .mod_navigation li:hover ul ul ul ul { left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul, .mod_navigation li li li:hover ul, .mod_navigation li li li li:hover ul { left: auto;}

 

[echoDave]

Versuche mal das :hover durch :active zu ersetzen. Ich garantiere dir aber nicht dass es funktioniert, teste es einfach mal und dann sehen wir es.

Wenn das jedoch nicht funktioniert, ist es mittels JS/Jquery realisierbar.

 

[Daaron]

CSS kann kein Click-Handling, nur :hover. Dafür brauchst du zwingend JavaScript.

Außerdem wäre solches Click-Handling bei Contao eher unpraktisch, da du dann ja Seiten anlegst, die nicht über die Navigation erreichbar sind und nur als "Container" dienen. Und spätestens der Google-Bot merkt, was du da verbrochen hast.

 

[toxic189]

Ja genau das habe ich auch mitbekommen. das es nicht geht.
Das müsste ich mit den Mootools machen richtig ?!...
Wie stelle ich das am dümmsten an ?! :/

 

[Daaron]

$$('.level_1 > .sibling > a').addEvent('click',function(){
//toller Code, der dann das passende Element öffnet und alle anderen schließt, z.B. indem du CSS-Klassen zum Element hinzufügst und entfernst
return false; //damit der Link nicht mehr die Seite wechselt
});

 

[toxic189]

Kannst du mir zum Code mehr erzählen auf was ich beachten muss oder dergleichen ?!

 

[Daaron]

Nicht wirklich. Es kommt zu weiten Teilen ja darauf an, was du genau für einen Effekt haben willst. Ein einfaches "Aufploppen" könntest du direkt dadurch erreichen, dass du "level_2" normalerweise verbirgst und einfach per JavaScript deinem gewünschten Kindelement eine Klasse (z.B. "visible") gibst (und allen anderen Kindern weg nimmst), in der dann eben per CSS das Element sichtbar gemacht wird.

http://mootools.net/docs/core/Element/Element#Element:addClass & Co wären dazu noch nützlich.

 

[toxic189]

Alles klar danke es funktioniert nun soweit.

Aber ich habe eine frage und zwar:

Ich habe Verlinkte "level_1" ebenen Sprich Seiten in der Navigation die inhalt haben.
Wenn ich diese nun anklicken möchte funktioniert diese nicht mehr.
Wie bekomme ich das hin das Seiten (Level_1) anklicken kann so das ich auf diese seite komme, aber es Trotzdem aufklappt ?!

Ich hoffe es ist verständlich was ich meine :/

MFG
Dome

 

[flugser]

Aktive Links werden im Contao-Navigationstemplate nicht als Link dargstellt, sondern nur mit einem span versehen. Kopiere am besten das "nav_default.html5"-Template (Contao3: system/modules/core/templates) in dein Templateverzeichnis.

Danach ändere folgende Zeilen ab:

<?php if ($item['isActive']): ?>
	<li class="active <?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>

 

[Daaron]

Ah. Du hast also in deiner Struktur Seiten in Level 1, die Inhalt haben, aber gleichzeitig Kind-Seiten in Level 2 haben? Das habe ich in meinem Code-Schnipsel natürlich nicht berücksichtigt. Außerdem GEHT so etwas auch nicht (mit einem Klick des Users). Sobald du einen Link anklickst und das reguläre Link-Event auslöst ("wechsle Seite"), dann brechen alle JavaScripts der aktuellen Seite ab.

Man könnte natürlich etwas zusammenfrickeln, bei dem der User 2x klicken muss: einmal um das Untermenü zu öffnen, ein zweites Mal um doch die Level1-Seite direkt zu öffnen. Das ist aber Schwachsinn, das versteht kein User.
Genau deshalb nimmt man ja für Popup-Untermenüs auch Hover - Lösungen und keine Click-Lösungen. Click = zu Seite wechseln, das erwartet jeder User.

Deine letzte Chance wäre noch, deine Templates (insbesondere fe_page) VOLLKOMMEN umzubauen und die Inhalte der Zielseite per AJAX in der aktuellen Seite darzustellen. Da gehört aber verdammt viel dazu, dass so etwas wirklich funktioniert (insbesondere hinsichtlich des Zurück-Button). Damit da alles konsistent ist musst du nicht nur die Navigation umschreiben sondern z.B. auch jedes Modul, dass eine Archiv->Item - Struktur hat wie die News oder Events. Oh, und wenn du dabei einen Fehler machst zerballerst du die Seite für Nicht-JS-Besucher, also insbesondere für Suchmaschinen.


Lösungen für dich:
1.) eine typische Suckerfish-Navigation mit :hover, dabei musst du aber leere Seiten vermeiden.
2.) spiel mit dem Start- und Stoplevel und blende Untermenüs erst ein, wenn du dich auf der entsprechenden Eltern-Seite befindest.
3.) Schreib ne Extension, die es dir im Seitenbaum ermöglicht, leere, nicht klickbare Containerseiten anzulegen. Es kann aber gut sein, dass du dafür gleichzeitig noch mod_navigation umschreiben musst, da die Templates wie "nav_default.html5" einen sehr begrenzten Spielraum an Variablen haben.

 

[toxic189]

Owe ich hätte nicht gedacht das es so schwer wird eine "einfache Navigation zu erstellen.
Also ist das relativ schwer?!....und anders ist das nicht lösbar außer :hover ?!


ich möchte eigentlich nix weiteres wie auf diese Seite abgebildet. (Navigation)

http://ixium.de/

 

[Daaron]

Also doch gefüllte Seiten bei denen, wenn sie aktiv sind, die Unterpunkte angezeigt werden. Das sollte eigentlich über die Start- und Stoplevels des Nav-Moduls lösbar sein.

Ist halt unpraktisch für den User. Wenn er von der Startseite gezielt eine Unterseite aufrufen will, muss er erst in die Zwischenseite rein. :hover - Lösungen sind viel intuitiver.

 

[toxic189]

Und wie mache ich das genau ich bin nun durcheinander und bekomme gerade garnix mehr auf die reihe -.-* :/

 

[Daaron]

Versuch dein Glück mal mit https://contao.org/de/extension-list/view/mootoolsnav.10000009.de.html
Ist zwar alt wie die Steinkohle, aber könnte trotzdem noch funktionieren.

 

[toxic189]

Also ich habe alles hinbekommen ohne Java oder Ajax oder einer anderen Extension
Ich hätte nur mal mit dem Start und Stop Level arbeiten müssen -.-*

habe mir Tagelang den Kopf zerbrochen und am ende war ich nur 2 Mausklicks entfernt um das Ergebniss zu bekommen das ich wollte das ist 1. Peinlich aber 2. habe ich mich einfach diese woche so verrannt in das Problem das ich nicht mehr über den Teller herausgeschaut habe.


Danke trotzdem für jede Hilfe )
Hat mir neue Erfahrungen gebracht, war also nicht umsonst )


MFG
Dome