 11 - Menü pseudo-aufklappen
Wenn sie innerhalb eines Menüs sehr viele Verweise einbinden möchten, wird der Anzeigebereich eines Bildschirms möglicherweise nicht ausreichen, alle Links untereinander anzuordnen. Einen unschönen Scrollbar möchten sie im Menüframe vermeiden.
|
|
Pseudo-Klappmenü bei Platzmangel
Screenshot:
pseudo-aufklappen
Mit CSS-Techniken könnte man Unterrubriken ein- oder ausblenden. Diese Technik wird hier nicht eingesetzt. Hier wird also nicht innerhalb einer Menüdatei aufgeklappt / eingeblendet. Vielmehr wird beim Anklicken eines Oberbegriffs eine andere Menüdatei geladen und angezeigt.
Es gibt also für jeden Oberbegriff eine Menüdatei. Da die Dateien vom Layout identisch sind, stellt man optisch keinen Unterschied zwischen 'aufklappen' und 'austauschen' fest. Durch die Anzeige / den Austausch einer anderen gleich gestalteten Menüdatei im Frameset, wird der Anschein eines 'Aufklappens' vermittelt. Wir täuschen und lügen, daher 'pseudo'.
Mit einem Klick auf den Menüpunkt "Allgemeines" im Hauptmenü, wird eine neue HTML-Datei aufgerufen. Alle Seitenelemente sämtlicher Menüdateien sind gleich angeordnet. So hat es den Anschein, als würde das Menü aufgeklappt.
Vorgehensweise zur Erstellung
Die Basis bildet das Hauptmenü. Dort werden lediglich die Hauptthemen angezeigt. Erst beim Anwählen eines Themas sollen unter dem Oberbegriff die Links für die Unterthemen angezeigt werden. Das entsprechende Untermenü soll 'aufklappen'. Zumindest soll das so aussehen.
Für jedes Thema muss also eine weitere, neue Navigationsdatei erstellt werden, die ich aber der Einfachheit halber einfach aus dem Hauptmenü kopiere und um die Unterpunkte erweitere.
In der Version 01:
Vor den Textlinks notiere ich eine Grafik:
    
Vor den Unterrubriken sogar eine weitere 2. Grafik, die damit auch für die Einrückung sorgt:
       
|
|
Oberbegriff
Oberbegriff
Oberbegriff
Unterrubrik
Unterrubrik
Unterrubrik
|
In der Version 02:
Vor den Textlinks notiere ich eine Grafik:
Die Einrückung der Unterpunkte wird durch CSS-Formatierungen erreicht.
margin-left:10px;
|
|
Oberbegriff
Oberbegriff
Oberbegriff
 Unterrubrik
Unterrubrik
Unterrubrik
|
Weitere 40 Grafiken in dieser Größe finden sie in meiner
 MINI-IMAGE-BOX - (Sitemap + Ordnersymbole).
Lassen sie sich nicht verwirren. Der Einsatz dieses Beispiels ist recht einfach, wenn sie meine Formatierungen ohne Änderungen übernehmen. Quelltext und Download des Menübeispiels oben im Kopfbereich.
Zur Anschauung habe ich das Menü in einen Frameset eingebunden und daraus eine HP-Vorlage erstellt. Ein Download mit sämtlichen Dateien dieser Homepage-Vorlage stelle ich als ZIP-Datei im Menü Downloads als HP-Vorlage Frames F11 zur Verfügung.
  Zu den Downloads (Menü anzeigen)
Beispiel der Version 01 ansehen  Beispiel der Version 02 ansehen
CSS-Anweisungen für das Menü
Die Zuweisung der Formatierung erfolgt über das Universalattribut 'id'. Dazu habe ich sämtliche Links innerhalb einer Tabelle mit nur einer einzigen Tabellenzelle plaziert. Der Schlüssel für die Format-Zuweisung liegt also im Universalattribut 'id' für die umschließende Tabelle, für das der Wert 'menue11' eingesetzt wurde. Damit sind die so deklarierten CSS-Anweisungen für alle Elemente innerhalb dieser Tabelle mit der ID 'menue11' gültig.
Beispiel für Links (a) innerhalb der Tabelle mit der ID 'menue11':
zur Verdeutlichung: die ID ist 'menue11' [ menue eins eins ]
#menue11 a{
font-family:Verdana,Arial,sans-serif;
font-size: 10px;
color: #000000;
text-align: left;
vertical-align:middle;
text-decoration:none;
padding:0px;
margin:0px;
display: block;
line-height:11px;
}
<table id="menue11"><tr><td>
<a href="dateiname.htm">Textlink</a>
<a href="dateiname.htm">Textlink</a>
<a href="dateiname.htm">Textlink</a>
</td></tr></table>
Die Links erhalten natürlich noch eine vorangestellte Grafik (oder auch zwei). Die Links werden auch ohne Zeilenumbruch <br> untereinander angezeigt. Das wird durch die Anweisung display:block; erreicht.
Es muss nicht zwangsläufig eine Tabelle sein die ihr Menü aufnimmt. Ein <div>-Bereich z.B. wäre auch geeignet. Ich benötige halt nur einen 'Container', dem ich eine ID zuweisen kann.
|
Home • CSS • Menüs • Menü 11