Ein Splitmenü lässt sich mit Joomla 1.5.x auch ganz ohne PHP oder JavaScript-Kenntnisse erzeugen. Alleine mit den Bordmitteln von Joomla sind diverse Varianten möglich.
Diverse Splitmenü-Varianten mit Joomla realisieren.
Ein Beispiel:
Sehr oft verwendet man ein horizontales Topmenü und ein vertikales Hauptmenü. Klickt man im Hauptmenü auf einen Menüpunkt, ist dieser aktiv und soll auch im Topmenü als Aktiv markiert sein. Dabei soll möglichst die bisherige CSS-Formatierung des verwendeten Templates für Haupt- und Topmenü beibehalten werden. Außerdem sollen im Topmenü keine Submenüeinträge angezeigt werden, sondern eben nur der Hauptpunkt. Umgekehrt soll beim Klick auf einen Menüpunkt im Topmenü der gleiche Menüpunkt auch im Hauptmenü aktiviert werden. Im Hauptmenü sollen aber auch die Untermenüpunkte mit aufklappen. Wie kann man das realisieren?
Als erstes kümmere ich mich mal um das Aussehen. Als Beispiel soll hier das Template Aha Edition White J15 dienen. Wer sich die ganze Arbeit hier sparen will, kann sich die neueste Version des Templates bei uns herunterladen. Da wurde diese Anpassung bereits integriert. Für alle anderen Templates, auch viele von anderen Designern, kann nach dieser Anleitung vorgegangen werden.
Achtung Update!!!
Inzwischen wurde in allen Ahadesign Templates ein Dropdown-Menü integriert. Die hier vorgeschlagenen Anpassungen bzw. Vorbereitungen für ein Splitmenü müssen also allenfalls noch bei Templates von anderen Anbietern gemacht werden.
Ich erweitere also die Datei template.css etwas. Keine Angst, das wird nicht schwierig und dürfte bei den allermeisten Templates genauso funktionieren. Ansonsten muss man gegebenenfalls etwas umdenken, aber das Prinzip bleibt gleich. Einmal gemacht, sehen dann alle möglichen Varianten des Splitmenüs wie gewünscht aus.
Ich öffne also mit einem Editor die Datei template.css. Sie ist zu finden unter ../templates/aha_editionwhitej15/css/
Ab Zeile 456 bis 496 sind die Einträge für das Topmenü zu finden wie hier gezeigt:
/************************************************************
ul#mainlevel-nav {
text-decoration: none;
list-style: none;
padding:0;
margin: 12px 18px 0 0;
float:right;
}
ul#mainlevel-nav li {
width:120px;
float:left;
font-size:0.9em;
height:43px;
line-height:43px;
margin:0;
padding:0;
display:inline;
background:none;
overflow:hidden;
}
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
font-weight:bold;
text-align:center;
white-space:nowrap;
display:block;
width:100%;
color: #A0A0A0;
margin:0;
padding:0;
background: url(../images/hornav.png);
}
ul#mainlevel-nav li a#active_menu-nav {
}
ul#mainlevel-nav li a:hover {
white-space:nowrap;
margin:0;
padding:0;
color: #585858;
background-position: -120px 0;
}
*********************************************************/
Ich mache es mir jetzt ganz einfach, kopiere das ganze und setze es einfach nochmal darunter. Jetzt hab ich es also doppelt. Nun ein paar wenige Anpassungen und der Käse ist auch schon gegessen.
Ich mache aus allen "ul#mainlevel-nav" einfach "ul.menu-nav". Außerdem muss das mit dem #active noch leicht verändert werden. Aus "ul#mainlevel-nav li a#active_menu-nav" mache ich "ul.menu-nav li.active a:link, ul.menu-nav li.active a:visited". Außerdem vergebe ich hier einfach die Farbe und die Hintergrundgrafik wie beim Hovereffekt, also
/*********************************************************
color: #585858; background-position: -120px 0;
**********************************************************/
Das kann man natürlich auch völlig anders machen, oder alles auch noch erweitern. Aber so sieht man dann später die Funktionsweise des Splitmenüs besser.
Beim Edition White J15 würde es dann so aussehen:
**********************************************************/
ul.menu-nav {
text-decoration: none;
list-style: none;
padding:0;
margin: 12px 18px 0 0;
float:right;
}
ul.menu-nav li {
width:120px;
float:left;
font-size:0.9em;
height:43px;
line-height:43px;
margin:0;
padding:0;
display:inline;
background:none;
overflow:hidden;
}
ul.menu-nav li a:link, ul.menu-nav li a:visited {
font-weight:bold;
text-align:center;
white-space:nowrap;
display:block;
width:100%;
color: #A0A0A0;
margin:0;
padding:0;
background: url(../images/hornav.png);
}
ul.menu-nav li.active a:link, ul.menu-nav li.active a:visited {
color: #585858;
background-position: -120px 0;
}
ul.menu-nav li a:hover {
white-space:nowrap;
margin:0;
padding:0;
color: #585858;
background-position: -120px 0;
}
*****************************************************/
Was hat das ganze jetzt gebracht? Tja, ab sofort kann auch für das Topmenü die viel bessere und modernere Einstellung "Liste" als Menütyp gewählt werden, welche ich später auch zwingend benötige für mein Splitmenü und das Menü behält dabei sein Aussehen trotzdem bei.
Achtung Update!!!
Die Vorbereitungen bis hierher müssen jetzt bei keinen Ahadesign Templates mehr gemacht werden, da inzwischen für alle Templates ein Dropdown-Menü eingebaut wurde.
Neben dem Menütyp muss auch das richtige Menü-Klassen-Suffix "-nav" verwendet werden, welches aber standardmäßig schon vorgegeben ist. Aber dazu weiter unten gleich mehr. Die erste Vorbereitung ist somit schon abgeschlossen. Das geht mit fast allen Templates so, weil fast alle Designer das Topmenü mit ul#mainlevel-nav formatieren. Bei unseren Templates ist es jedenfalls so und diese können also alle auf diese Weise angepasst werden. Natürlich könnte neben .active auch .parent noch zusätzlich formatiert werden oder sonstige Anpassungen vorgenommen werden. Hier kann jeder nach belieben kreativ werden. Für das Splitmenü reicht es so erst mal.
Jetzt begebe ich mich in das Joomla-Backend und suche unter Erweiterungen -> Module nach meinem vertikalen Hauptmenü und markiere dieses mit einem Häckchen.
Jetzt kann ich oben rechts auf den Kopieren-Button klicken und habe ein Duplikat des Hauptmenüs erzeugt.
Ich habe jetzt unter Module einen Eintrag "Kopie von Hauptmenü". Ich klicke auf den Namen dieser Kopie, damit ich sie editieren kann. Es öffnet sich also folgendes Fenster:
Details und Menüzuweisung
Ich ändere mal zuerst den Titel. Ich nenne es SplitHauptmenü. Dieses Menü soll ja anstelle des bisherigen Topmenüs erscheinen. Deshalb wähle ich bei Titel anzeigen "Nein". Bei Aktiviert natürlich "Ja", ist ja klar. Als Position wähle ich "user3". Das ist auch wieder bei fast allen Templates immer die Modulposition für das Topmenü. Für die Menüzuweisung lasse ich für mein Vorhaben die Markierung auf "Alle". So das war die linke Seite des Bearbeiten-Fensters. Auf der rechten Seite muss ich jetzt die Parameter richtig einstellen.
Die Modulparameter
mainmenu bei Menüname stimmt ja schon. Wie bereits erwähnt muss jetzt bei Menüstil "Liste" gewählt werden. Als nächstes kommen jetzt der Start- und Endlevel. Das ist erst seit Joomla 1.5.x möglich. Im deutschen Backend nennt es sich "Erste Ebene" und "Letzte Ebene". Was damit gemeint ist, dürfte klar sein. Die erste Ebene bekommt eine Null, die letzte Ebene eine Eins. Es wird also nur der oberste Menüpunkt angezeigt. Würde ich für beides die Null eintragen, wird einfach alles, also auch alle Submenüpunkte angezeigt. Würde ich für beides eine Eins eintragen, würden nur die ersten Submenüpunkte angezeigt und natürlich auch nur dort, wo welche vorhanden sind. Es sind also diverse Kombinationen möglich, also 1 und 3, 0 und 2 oder was auch immer.
Erweiterte Parameter
Weil es sich hier um die Kopie des Hauptmenüs handelt, steht unter Modul-Klassen-Suffix "_menu" drin. Das muss erst mal raus. Darüber, also bei Menü-Klassen-Suffix gehört "-nav" rein. Natürlich alles ohne Anführungsstriche. Der Rest ist jetzt nicht weiter wichtig für mich und ich kann mit Klick auf den Speichern-Button das Fenster verlassen.
Das will ich jetzt mal im Frontend sehen. Ich rufe also meine Seite im Browser auf und wähle mal einen Eintrag mit Untermenüpunkten.
Dabei ist es jetzt egal, ob ich den Button im Topmenü oder im Hauptmenü anklicke. Beide Buttons sind Aktiv und im Hauptmenü werden die Submenüpunkte angezeigt. Im Topmenü nicht. Also ganz so wie ich mir das vorgestellt habe. Für die Anzeige von Submenüpunkten im Topmenü müsste man das Menü und/oder das Template etwas anders mit CSS aufbauen, aber das ist ja hier nicht das Thema.
Auf diese Art und Weise sind also auch viele andere Varianten möglich. Ich könnte auch das alte Topmenü belassen und mein Splitmenü auf die rechte Seite schieben. Meist mit der Modulposition "right" und eben nicht mit "user3" für oben. In so einem Fall müsste gar keine Anpassung mit CSS vorgenommen werden. Man würde einfach nur das Hauptmenü kopieren und es an Position "right" setzen.
Wie beschrieben, kann mit dem Start- und Endlevel herumgespielt werden. Es könnten auch andere Suffixe verwendet werden und so diverse anders gestaltete Menüs erzeugt werden und und und. Hier ist also eine ganze Menge möglich, wenn auch nicht alles. Die Menüs sollten eben nur einen Bezug zueinander haben, also die gleichen Menüeinträge verwenden.
Bleibt mir noch, viel Spaß beim Ausprobieren zu wünschen.
