Horizontales Untermenü einrücken / Untern Hauptmenüpunkt zentrieren

Hallo,

ich habe eine horizontale Navigation mit Hauptmenüpunkten. Direkt darunter kommt das horizontale Untermenü, das nach einem Klick auf einen Hauptmenüpunkt erscheint.

Standardmäßig wird das Untermenü linksbündig angeordnet, ist also vertikal mit dem ersten Hauptmenüpunkt bündig.

Ich möchte nun einer der beiden Möglichkeiten realisieren:

1. die Untermenüpunkt so weit einrücken, dass der erste Untermenüpunkt bündig mit dem aktiven Hauptmenüpunkt ist.

und/oder

2. die Untermenüpunkte zentriert unter dem aktivem Hauptmenüpunkt anordnen.

Mir fehlt da gerade der Ansatz und wäre über einen Tipp dankbar. :)

Viele Grüße
Raynaldo

Hallo Raynaldo,

hast Du mal einen Link zum "lebenden Projekt"?
Das würde die Sache erleichtern.

Viele Grüße
MiTsch

Hallo,

ich gehe mal davon aus, dass ein Screenshot reicht...

http://www.ray.mynetcologne.de/navigation.jpg

Es soll so wie auf dem Bild aussehen. Das Untermenü fängt hier auf Höhe des aktiven übergeordneten Menüpunktes an.

Klickt der Besucher dann auf den Menüpunkt "Consulting", dann soll das Untermenü auch bündig mit diesem Menüpunkt anfangen.

Im Moment fängt das Untermenü bei mir immer bündig mit "Home" an, ist ja links ausgerichtet.

Danke und viele Grüße
Raynaldo

Zitat:

---

Zitat von Raynaldo

ich gehe mal davon aus, dass ein Screenshot reicht...

Es soll so wie auf dem Bild aussehen. Das Untermenü fängt hier auf Höhe des aktiven übergeordneten Menüpunktes an.

---

Sorry, anhand dieses Screenshots kann ich nicht nachvollziehen, was Du willst. Die beiden Zeilen schauen aus wie zwei von einander unabhängige Menüleisten oder auch eine Gruppe einzelner Links. Wo ist denn da ein Submenü-Container?

Ah, ok. Sorry.

Das Hauptmenü (blauer Hintergrund) ist die erste Menüebene in einem eigenen DIV (mit eigener ID "topmenue").

Darunter ist in einem eigenen DIV die nächste Menüebene, die in der Seitenstruktur unter den Hauptmenüpunkten angelegt ist. Auch mit eigenem DIV (ID "submenue").

Also zwei unabhängige Container untereinander, die beide am linken Rand anfangen.

Hilft das weiter mir zur helfen? ;)

Vielleicht mal den Code dazu:

HTML:

HTML-Code:

---

<div class="mod_navigation block" id="topmenue">
<ul class="level_1">
<li class="sibling first"><a href="start.html" title="Home" class="sibling first">Start</a></li>
<li class="active"><span class="active">Sport &amp; Events</span></li>
<li class="sibling"><a href="consulting.html" title="Consulting" class="sibling">Consulting</a></li>
<li class="sibling"><a href="promotion.html" title="Promotion" class="sibling">Promotion</a></li>
<li class="sibling last"><a href="event-werbung.html" title="Event-Werbung" class="sibling last">Event-Werbung</a></li>
</ul>
</div>

<div class="mod_navigation block" id="submenue">
<a href="sport-events.html#skipNavigation6" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="organisation.html" title="Organsation" class="first">Organisation</a></li>
<li><a href="vermarktung.html" title="Vermarktung">Vermarktung</a></li>
<li class="nonavlink last"><a href="referenzen.html" title="Referenzen" class="nonavlink last">Referenzen</a></li>
</ul>
</div>
</div>

---

CSS:

Code:

---

#header #topmenue
{
        width:895px;
        margin-left:140px;
        background-color:#003366;
        border:1px solid #003366;
        font-size:1.1em;
        border-radius: 4px 4px 4px 4px;
}

#header #topmenue ul
{
        margin:0;
        padding-left:2em;
}

#header #topmenue li
{
        display:inline;
        padding-right:0.7em;
        padding-left:0.5em;
        list-style: none outside none;
}

#header #topmenue a,
#header #topmenue a:link,
#header #topmenue a:visited
{
        padding-left:1.2em;
        text-decoration:none;
        color:#FFFFFF;
}

#header #topmenue a:hover,
#header #topmenue a:active,
#header #topmenue a:focus,
#header #topmenue a.trail
{
        padding-left:1.2em;
        text-decoration:none;
        color:#99CC00;
}

#header #topmenue a.active,
#header #topmenue li.active
{
        padding-left:1.7em;
        text-decoration:none;
        color:#99CC00;
}

#header #submenue {
    background-color: #FFFFFF;
    border-style: none;
    color: #99CC00;
    font-size: 0.9em;
    margin-left: 185px;
    width: 890px;
}

#header #submenue ul {
    margin: 10px 0pt 0pt 15px;
    padding-left: 0em;
}

#header #submenue li
{
        display:inline;
        list-style: none outside none;
        margin-right: 2em;
}

#header #submenue a,
#header #submenue a:link,
#header #submenue a:visited
{
        padding-right:0.5em;
        padding-left:0.5em;
        text-decoration:none;
        color:#99CC00;
}

#header #submenue a:hover,
#header #submenue a:focus,
#header #submenue a:active,
#header #submenue a.trail,
#header #submenue li.trail
{
        padding-right:0.5em;
        padding-left:0.5em;
        background-color:#99CC00;
        text-decoration:none;
        color:#FFFFFF;
}

#header #submenue a.active,
#header #submenue li.active
{
        margin-left:0;
        padding-right:0.5em;
        padding-left:0.5em;
        background-color:#99CC00;
        color:#FFFFFF;
}

---

Okay, jetzt hab ich es zumindest teilweise verstanden. Unklar ist noch dies:
1. Soll es nur eine Subebene geben?
2. Wird die Subebene in der 2. Zeile nur bei Fokus auf einen Topmenüpunkt angezeigt oder ist irgendeine, z. B. die zum ersten Hauptpunkt gehörige permanent sichtbar?
3. Welches Navi-Modul verwendest Du (z. B. MenuMatic)?
4. Was genau ist das Problem, wofür Du bisher noch keine Lösung hast.

Vielen Dank für Deine Mühe :)

Zitat:

---

Zitat von soweit_ok

1. Soll es nur eine Subebene geben?

---

In diesem Bereich ja.
Bei manchen Menüpunkten wird weiter unten im Inhaltsbereich ein weiteres vertikales Menü als eigenes Modul angezeigt, je nachdem welcher Submenüpunkt angeklickt ist. Aber das ist ja eigentlich nicht relevant für die oberen beiden Zeilen.

Zitat:

---

Zitat von soweit_ok

2. Wird die Subebene in der 2. Zeile nur bei Fokus auf einen Topmenüpunkt angezeigt oder ist irgendeine, z. B. die zum ersten Hauptpunkt gehörige permanent sichtbar?

---

Die Subebene wird nur angezeigt, wenn ein Hauptmenüpunkt angeklickt wurde. Klickt der Besucher z.B. auf Home ist kein Submenü sichtbar.

Zitat:

---

Zitat von soweit_ok

3. Welches Navi-Modul verwendest Du (z. B. MenuMatic)?

---

Das "Navigationsmenü" aus der Auswahl, wenn man ein neues Modul in Contao erstellt. Also keine Erweiterung oder so. Das Template dazu ist nav_default.tpl.

Zitat:

---

Zitat von soweit_ok

4. Was genau ist das Problem, wofür Du bisher noch keine Lösung hast.

---

Das Problem ist, dass sowohl Topmenü als auch Submenü linksbündig ausgerichtet sind. D.h. das alle Submenüpunkte immer auf Höhe von "Home" anfangen; auch wenn ich z.B. Consulting anklicke.

Ich würde es aber gerne haben wie es auf dem obigen Bild gezeigt wird: klickt man einen Hauptmenüpunkt an, so fängt das Submenü auch erst auf Höhe des aktiven Hauptmenüpunktes an.

IST-Zustand: http://www.ray.mynetcologne.de/ist.jpg

SOLL-Zustand: http://www.ray.mynetcologne.de/navigation.jpg

Sorry für die Umstände. Wenn man gedanklich tief in einem Projekt ist, nimmt man an, dass Dinge selbstverständlich sinf und vergisst, dass für Außenstehende die Welt anders aussieht. ;)

Danke nochmals für die Hilfe. :)

Okay, den Submenüpunkten mit den CSS-Anweisungen position:relative und left:Xpx links einen zusätzlichen Abstand relativ zu ihrer Normalposition zu verpassen, würde Deine Anforderung lösen. Dafür musst Du das Template nav_default.tpl anpassen (bzw. updatesicher die importierte Kopie), um ihm den richtigen Wert für diesen Zusatzabstand mitteilen. Könntest Du z. B. so machen:

Zur Ausgabe der Listenpunkte werden zwischen dem HTML-Code an den relevanten Stellen mittels PHP-Schnipseln wie üblich mit dem Befehl "echo" die jeweiligen Variableninhalte ausgegeben. Du müsstest an der Stelle, wo die Klasse eingefügt wird, noch eine zusätzliche Klasse reinpacken. Der Klassenname ist am besten der Name des Menüpunkts, denn da bist Du wenigstens sicher, dass er im Schleifendurchlauf der Submenüeinträge immer parat ist. Ich vermute, Du könntest den Wert von $item['title'] dafür nehmen. Sollte das nicht passen, kannst Du ja mit showTemplateVars() mal gucken, was Du sonst noch hast.

Wenn dann also der Menüpunkt-Name als zusätzliche Klasse im HTML-Code ausgegeben wird, kannst Du auf diese Weise jeden einzelnen Menüpunkt per CSS damit ansprechen. So, und in die CSS-Anweisung schreibst du einfach den Wert der zum jeweiligen Topmenüpunkt passenden Verschiebung nach rechts für position:relative rein. Dieser relative Wert ist ja für alle Submenüpunkte der Gruppe identisch, weshalb Du in der CSS-Datei mit einer einzigen Zuweisung an die kommaseparierte Klassenliste auskommst ...
.organisation, .vermarktung{position:relative;left:Xpx;}
Falls Du nicht sicher bist, ob Menüpunkte desselben Namens webseitenweit womöglich mehrfach an unterschiedlichen Positionen vorkommen könnten, musst Du für die Eindeutigkeit den Selektor halt in Verbindung mit der PageID verwenden.

Vielleicht findet sich auch ein eleganterer Weg, evtl. über den verknüpften Hauptmenüpunkt. Guck halt mal und teste, irgendwas Geeignetes findest Du bestimmt. Alternativ könntest Du auch was mit Inserttags im Template bauen.

Eine zweite Möglichkeit ohne solche Verrenkungen könnte evtl. auch in der Einbindung der MooTools MenuMatic-Navigation sein. Hier mal der Link zu einem Community-Tutorial, wie Du sie einbindest:
http://de.contaowiki.org/Mootools_Au...3%BC_MenuMatic
Da sitzen die Submenücontainer nämlich schon automatisch immer an der zum jeweiligen Hauptmenüpunkt passend richtigen Position, wobei Du im CSS noch feintunen kannst, ob Du es bündig magst oder etwas versetzt. Auch den Abstand des Submenücontainers vom Topmenü kannst Du einstellen. Mit Änderung zweier Parameter im Javascript kann es außerdem horizontail und vertikal verwendet werden. Wobei die Submenüs wahlweise nach links, rechts, oben oder unten ausklappen können. Somit also auch im Footer verwendbar. Probiers mal aus, bei mir läuft MenuMatic gut. Allerdings könnte es sein, dass es etwas knifflig wird, die Submenüpunkte dazu zu bringen, nebeneinander statt untereinander anzeigen zu lassen. Mal eben bloß ein display:inline oder float:left reinhauen, zeigt vielleicht nicht auf Anhieb die gewünschte Wirkung. Das MenuMatic CSS ist ein wenig komplexer und das Javascript stellt sich ebenfalls bei manchen Dingen mädchenhaft an. Und ich kann Dir nicht garantieren, ob die Umstellung auf MooTools 1.3 und Contao 2.10 keine unerwünschten Nebeneffekte zeigt, um die man sich dann wieder kümmern muss.

Unterm Strich denke ich, falls Du MenuMatic auch anderweitig mal gut brauchen könntest, kann ein Test nicht schaden. Weil Dein Menü aber bis auf das Positionierungsproblem aber schon gut funktioniert, würde ich es wahrscheinlich erstmal mit Templateanpassung probieren.

Vielen herzlichen Dank für Deine ausführliche Antwort. :)

Es scheint zu klappen, hab das gerade mal mit einem Menüpunkt ausprobiert. Als Variable zur Bestimmung der Klassen setze ich {{env:: parent_title}} ein. Das setze ich als Klasse in <ul> des Submenüs und schiebe das in der CSS per margin-left: XYpx nach rechts. position: relative brauche ich dabei noch nicht mal.

Sehr schöne Idee, hast mir sehr weiter geholfen. Recht herzlichen Dank nochmals. :)

Korrektur: ich nehme {{env::main_alias}} weil im Hauptmenüpunkt Leerzeichen auftauchen.

BTW: kann man seine Beiträge nicht editieren?

Fein, das freut mich. Ich ging auch davon aus, es so lösen zu können, weil ich bereits verschiedene Formatierungs-Sonderwünsche auf vergleichbare Weise per Zusatzklasse im jeweiligen Template erfolgreich umsetzen konnte. Wenn man sich mal angeschaut hat, wie die Selektoren in den Templates generiert werden, liegt das ja auch nahe. Anderenfalls hätte ich den Tipp weniger ausführlich erläutert. Ja, an irgendeinen Wert des Parent-Datensatzes dachte ich ebenfalls - deshalb fügte ich noch hinzu, die Codeergänzung viell. mit einem Inserttag vereinfachen zu können.

Die Kreativität, anhand des grundlegenden Lösungsansatzes die kompakteste Möglichkeit zu finden, hab ich Dir natürlich zugetraut und erwartet, keine Musterlösung liefern zu müssen. :)

Doch, Du kannst Deine Beiträge auch nachträglich editieren. Siehst Du ja an diesem Posting, mache ich nämlich gerade. Die Option dafür musst Du allerdings in Deinen Profileinstellungen setzen. Kann sein, es geht es aber nicht von Beginn an, sondern erst ab einer Mindestanzahl von Postings. Gemäß des Flurfunks liegt die wohl so bei 20 herum, eine offizielle Angabe dafür gibt´s meines Wissens nicht.

Schönes Wochenende!
HG Andreas