Navigation - Mehrspaltig --> wie?? (Frontend jQuery aktiv, nicht mootools)

[daje]

Hallo allerseits.

Nach langer Suche und im Web, kann ich mich nicht richtig entscheiden, jetzt versuche ich bei euch etwas inspirierendes herauszuholen!

Folgendes Menüstruktur wollte ich erreichen.



Ich habe im Frontend nicht beide Bibliotheken einsetzen wollen (jQuery und mootools).
So habe ich nicht auf einige Contao Erweiterungen zugreifen können - doch eigentlich ist es auch kein Megamenu.

Ich möchte, dass das Ganze relativ einfach zum handeln ist, so will ich keine Eigenbauten als HTML-Bausteine.

Folgende Idee hatte ich, so frage ich mich, was ihr so darüber denkt...
(die Semantik leidet etwas drunter!):

1. Dienstleistungen ist eine selbstständige Seite im Backend.
2. Für jede der Spalten erstelle ich einen zusätzliche Seite (z.B. Spalte1, Spalte2, Spalte3 - wie auch immer)
3. Unter die Seiten Spalte1, Spalte2..usw. packe ich dann die Seiten: Böden, Fenster, Elektro...
4. Die Namen der Seiten Spalte1... blede ich per CSS aus und den Knoten "span.active" lösche ich per jQuery
5. Per CSS biege ich alles so hin, als wäre dort oben nie ein Eintrag gewesen :-)

Vorteile:

• Einfach zu handeln --> die Unterseiten lassen sich einfach verschieben, neu anordnen...
• Muss kein neues Navigationstemplate erstellen
• Muss keine Erweiterungen installieren...
• --> ich weiss mir im Moment nicht anders zu helfen :-)

Nachteile:

• Semantik flötet etwas
• Bei reaktivierten JS erscheinen die Knoten im DOM (doch visuell sollte nichts sichtbar sein - sollte!)

Anregungen?
Ideen?

Merci im Voraus!

[psren]

Wieso gibtst du nicht den einzelnen li's eine feste breite,
dem ul.level_2 die breite der li-elemente*3
und lässt die li-elemente nach links floaten?

Das sollte den gewollten Effekt erreichen ohne irgendwelche weiteren Hürden.(ungetestet)

Viele Grüße
psren

[daje]

Das wäre der weitere Ansatz... feste Breiten...

Hi psren

Merci für deinen Input...

Wieso gibtst du nicht den einzelnen li's eine feste breite,
dem ul.level_2 die breite der li-elemente*3
und lässt die li-elemente nach links floaten?

..klar, jedoch die Bedingung ist, dass das Mutterelement --> ul.level_2 auch eine feste Breite hat!

Mal sehen!

[daje]

egentlich...

...ist das Ganze doch etwas komplizierter - wenn man die Webseite und den Umgang mit ihr etwas einfacher gestalten möchte! Echt!

Sonst noch jemand, der Inputs hat!

[psren]

..klar, jedoch die Bedingung ist, dass das Mutterelement --> ul.level_2 auch eine feste Breite hat!!

Was spräche hiergegen?

...ist das Ganze doch etwas komplizierter - wenn man die Webseite und den Umgang mit ihr etwas einfacher gestalten möchte! Echt!

Was genau meinst du?

[daje]

Frage an die Guru's

Gibt es die Möglichkeit, irgendwie den einzelnen Menüelementen (z.B. UL level_2 noch die Klasse ".dreiSpaltig") eine CSS-Klasse zuweisen zu können?
(Beispiel bei Dienstleistungen)

...oder kann man das Navigationstemplate so anpassen, dass dierekt die Klasse des Mutterelements eingefügt wird: .dienstleistungen ?

<div id="mainnav" class="mod_navigation block">

<a class="invisible" href="boeden.html#skipNavigation1">Navigation überspringen</a>

<ul class="level_1">
<li class="first"><a class="first" title="Startseite" href="http://www.dhg.ch/cms/index.php">Startseite</a></li>
<li class="submenu"><a class="submenu" title="Unternehmung" href="unternehmung.html">Unternehmung</a>
	<ul class="level_2">
	<li class="first"><a class="first" title="Umweltschutz" href="umweltschutz.html">Umweltschutz</a></li>
	<li><a title="Referenzen" href="referenzen.html">Referenzen</a></li>
	<li class="last"><a class="last" title="Geschichte" href="geschichte.html">Geschichte</a></li>
	</ul>
</li>
<li class="active submenu dreispaltig"><span class="active submenu">Dienstleistungen</span>
	<ul class="level_2 dreispaltig">
	<li class="active first"><span class="active first">Böden</span></li>
	<li class="sibling"><a class="sibling" title="Elektro" href="elektro.html">Elektro</a></li>
	<li class="sibling"><a class="sibling" title="Fenster" href="fenster.html">Fenster</a></li>
	<li class="sibling"><a class="sibling" title="Gipser / Malerei" href="gipser-malerei.html">Gipser / Malerei</a></li>
	<li class="sibling"><a class="sibling" title="Hausdienste" href="hausdienste.html">Hausdienste</a></li>
	<li class="sibling"><a class="sibling" title="Küchen" href="kuechen.html">Küchen</a></li>
	<li class="sibling"><a class="sibling" title="Rennovation / Sanierungen" href="rennovation-sanierungen.html">Rennovation / Sanierungen</a></li>
	<li class="sibling"><a class="sibling" title="Sanitär" href="sanitaer.html">Sanitär</a></li>
	<li class="sibling last"><a class="sibling last" title="Schreinerei" href="schreinerei.html">Schreinerei</a></li>
	</ul>
</li>
<li class="submenu last"><a class="submenu last" title="Kontakt" href="kontakt.html">Kontakt</a>
	<ul class="level_2">
	<li class="first"><a class="first" title="Ansprechpartner" href="ansprechpartner.html">Ansprechpartner</a></li>
	<li class="last"><a class="last" title="Anfrageformular" href="anfrageformular.html">Anfrageformular</a></li>
	</ul>
</li>
</ul>

<a class="invisible" id="skipNavigation1">&nbsp;</a>

</div>

[daje]

Was spräche hiergegen?



Was spräche hiergegen?

Nichts (ausser das unten) , diesen Ansatz möchte ich ergreifen!

Was spräche hiergegen?



Was genau meinst du?

Ich brauche eine zusätzliche CSS Klasse, mit der ich die merhspaltigen Menüs ergreifen könnte.
Eine klasse .submenu genügt mir nicht ideal wäre, wenn ich die Klasse des Mutterartikels noch "fetch"-en könnte,

<li class="submenu dienstleistungen dreispaltig"...

...oder ähnlich, es muss sich einfach von anderen unterscheiden (von ein- und zweispaltigen)...

Merci

[psren]

<li class="submenu dienstleistungen dreispaltig"...

...oder ähnlich, es muss sich einfach von anderen unterscheiden (von ein- und zweispaltigen)...

Dann gib die Klasse doch einfach in der Seitenstruktur mit, oder verstehe ich dich falsch?

[daje]

Dann gib die Klasse doch einfach in der Seitenstruktur mit, oder verstehe ich dich falsch?

...im Gegenteil, du verstehst das sehr richtig!

Das war der Hinweis den ich suchte...

Mega-Merci!

[psren]

...im Gegenteil, du verstehst das sehr richtig!
Das war der Hinweis den ich suchte...

Da bin ich aber froh, weil ich war mir kurz nicht sicher ob ich dich richtig verstanden habe.
Freut mich, dass ich helfen konnte :-D

[Acta]

Cool wäre, wenn du sofern das Menü steht ... mal zeigst wies aussieht... und vor allem wie du es erreicht hast.

THX

[daje]

Cool wäre, wenn du sofern das Menü steht ... mal zeigst wies aussieht... und vor allem wie du es erreicht hast.

THX

Die Webseite sollte in ca. 3 Wochen stehen, dann werde ich sie hier pubilzieren..

Gruss..

[Carino]

3 Wochen sind um. Uuuuund? :-)