Wie erstellt man so eine Navigation

Hallo zusammen,

kann man in Contao so eine Navigation erstellen? http://atelier-vier.de

Jeder Name soll auf eine Seite verlinken. Farbe und Font soll erhalten bleiben.

Hat jemand eine Idee?

Vielen Dank
Max

In jedem Fall solltest Du es über einen HTML Artikel lösen können. Dann kannst Du den Namen per CSS Schriften, Farben und so weiter zuordnen. Aber an einer einfacheren Lösung wäre ich auch interessiert!

Hallo Max,

vergebe jeder Seite = Menüpunkt eine CSS-Klasse; diese kannst Du dann via CSS entsprechend formatieren.

Verlinkt das dann auf jeweils eine Unterseite? Und soll das Menü dann auf den Unterseiten auch an der Position stehen?

Hallo Max,

ich würde die normale Navigation dafür nutzen. Beim Erstellen der Seiten im Seitenbaum kannst du jeweils eine CSS-Klasse angeben, die in der Navigation mit ausgegeben wird.

Über das CSS steuerst du dann die Ausgabe, z.B.:

Code:

---

.mod_navigation ul li.meineKlasse a { beliebiger-code:...; }

---

So kannst du die Menüpunkte individuell gestalten.

Viele Grüße
Daniel

@planepix
Die Unterseiten bekommen keine Navigation sondern nur einen Butten mit Link auf die Startseite.

Mein Problem sind die verschachtelten Texte in der Frutiger. Erstelle ich dann die Links als Bilder und positionier die im CSS als Background? Brauche ich dann nicht für jede >li< eine eigene Klasse? Wie bringe ich das Contao bei?
Bei einer statische Seite würde ich entweder eine map mit aereas anlegen, Slices in einer Tabelle anordnen oder als schlechteste Lösung das Menu in Flash anlegen.

Aber vielleicht habt Ihr Ideen, wie es einfacher geht.

Zitat:

---

Aber vielleicht habt Ihr Ideen, wie es einfacher geht.

---

Hallo Max,

du hast die einfachen Lösungen oben schon gelesen!
Nachdem planepix und dieselboy schon versucht haben, dich auf den richtigen Weg zu schieben, will ich es jetzt nochmal probieren. Vergiss Grafik, Flash, Map, Areas und auf jeden Fall auch Tabellen - wenige Zeilen CSS und die ganze normale Contao-Navigation sind der Schlüssel.

Hier das CSS:

Code:

---

.nav {
        margin: 0 0 0 20%;
        padding:100px 0;
        width:65%;
        line-height:2em;
}
.nav li {
        float:left;
        margin-right:10px;
        padding:0;
        list-style:none;
}
.nav a, .nav span.active {
        text-decoration:none;
        font-size:30px;
        font-weight:bold;
        color:#ffffff;
}
.nav .klein a, .nav .klein span {
        font-size:16px;
        letter-spacing: 4px;
}
.nav .gross a, .nav .gross span {
        font-size:40px;
        letter-spacing: 1px;
}
.nav .groesser a, .nav .groesser span {
        font-size:54px;
        letter-spacing: -2px;
}
.nav a:hover { color: #d20000; }
.nav span.active, .nav .trail { color:#65BCC4; }

---

Normale Seitenstruktur erstellen.

Ein Modul 'Navigationsmenu' erstellen.
Wenn das Menü nur auf der Startseite erscheinen soll, kannst du dieses Modul direkt in die Startseite als Inhaltselement einbinden. Dem Modul die CSS-Klasse .nav mitgeben.

Alternative: 2 Seitenlayouts erstellen. Eins mit Navgationsmenü für die Startseite, das zweite ohne Navigationsmenü für alle anderen Seiten.

Mit line-height:X.Xem; lässt sich das Menü mehr oder weniger - wie du es nennst - verschachteln.

.nav a - ist die Standardformatierung der Menüpunkte.

Menüpunkte, die im Menü klein, gross oder groesser erscheinen sollen, erhalten die entsprechende CSS-Klasse schon in der Seitenstruktur.

Getestet im Firefox, Opera, Chromium, Midora, Safari. Bin zur Zeit in einer MS freien Zone, deshalb nicht im IE gesehen.

Alles klar? Enjoy

@bizon
@dieselboy
@planepix

vielen Dank für Eure Tipps, du hast ja recht, bizon, ich habe einfach die Reichweite der Posts nicht erkannt. Es ist immer wieder erstaunlich, wie man mit wenigen klaren Anweisungen einen auf den richtigen Weg bringen kann.

Deine ausführliche Beschreibung, bizon, ist natürlich das i-Tüpfelchen. Damit versteht es auch der Pinsel in der Hand des Einfälltigen. Also ich.

Vielen Dank an Alle Ihr seid Spitze.
Max