Donnerstag, 3. Januar 2008

Pulldown Menues in Blogspot

Nachdem der Versuch die Navigation durch die Themen zu vereinfachen mit den TOC durch Java- Script gescheitert war und mir die Lösung die Themen per Hand durch Linklisten zu erstellen zu lang war, entschied ich mich dazu, Pulldown- Menues zu erstellen. Wie so oft besuchte ich Peter Chens Seite um zu sehen, ob das überhaupt geht, und siehe da, ich wurde fündig. Das war wieder ne Menge Leserei auf englisch und somit ein Grund für mich hier auf deutsch etwas nachzuhelfen, falls Bedarf besteht. Eines war jedenfalls klar, ich brauchte einen so genannten Menue- Generator. Nach meinen Misserfolgen mit den TOC per Java, bemühte ich mich natürlich um CSS- Scripts, damit meine labile Seele nicht wieder enttäuscht wird. Doch das ganze hatte viele Tücken, z.B. durch die grösseren Abstände im IE. Nach mehreren Versuchen mit anderen Menue- Generatoren entschied ich mich für diesen, gefunden auf der Seite der MWS-Design in der Schweiz. Hier ist also der Pulldown Menügenerator. Auf den ersten Blick sieht es aus, als wäre die Anzahl der Einträge begrenzt, aber das ist in so fern nicht der Fall, als das man weitere Einträge direkt in den Code, bzw Script schreiben kann. Der erste Menüeintrag, bzw der erste Link der eingetragen wird, ist sozusagen der Name des Pulldown Menüs, was sich darin äussert, dass es dabei um eine Rücksprungadresse handelt. Nachdem auf einen beliebigen Eintrag im Menü geklickt wurde, steht dieser Eintrag wieder oben. Seine Adresse wird aber nicht aufgerufen. Also trug ich dort den Namen des Blogthemas und die Startadresse meines Blogs ein.
Nachdem ich den Code generierte, kopierte ich den unten angezeigten Script und fügte ihn per Seitenelement/HTML-Code ein.
ACHTUNG.
Ich vergab keinen Titel, denn den habe ich ja schon als ersten Menüeintrag. Das erschwert nur leicht das Sortieren, spart aber eine Menge Platz auf der Seite. Hier trage ich zum Aktualisieren immer die neuesten Einträge per Hand nach. Das hat z.B. den Vorteil, das immer der Name der Seite eingetragen ist, was beim Lesen im Counter viel übersichtlicher ist als die vorher angezeigte Archivadresse aus der nie hervorging um welchen Beitrag es sich handelte. Die nächste Feinheit ist der Name des erstellten Scripts. So sieht die erste Zeile ungefähr so aus:
form name="jump"
Wenn ich ein zweites Pulldown Menue erstelle, hat dieses den gleichen Namen, was dazu führt, dass keines mehr funktioniert. Ich muss also den Namen JUMP durch einen anderen ersetzten. Der Name erscheint zwei Zeilen tiefer noch zwei mal, also alle umschreiben! So habe ich dann für jedes Thema eine Pulldown Menue, wobei ich dem ersten einen Titel gab, damit alle Menüs beschrieben sind.

Wie ich die "Pulldowns" farbig anpasse, erfuhr ich im Buch: "Der CSS Problemlöser", von Rachel Andrew. Hier mein Script ohne die geschweiften Klammern. Ich habe es bei mir unter Vorlagen/HTML bearbeiten zwischen "profile" und "footer" geschrieben.

/* ----- Pulldownfarben verändern
-----------------------------------------------------*/

form
background-color: ##C3D9FF;
padding: 3px 3px 3px 3px;

input
color: #000000;
background-color: ##C3D9FF;
border: 1px solid #000000;

Select
width: 95%;
float: left;
color: #000000;
background-color: ##C3D9FF;
border: 1px solid #000000;

textarea
width: 95%;
heigh: 40px;
float: left;
color: #000000;
background-color: ##C3D9FF;
border: 1px solid #000000;

Leider warten hier neue Fallstricke, denn der ":-(*grrrr*, *verd....* IE kann nämlich nicht eine geänderte Farbe des Rahmens interpretieren, was dazu führt, dass immer ein weisser Streifen um dass Pulldown- Menue bleibt. Es ist definitiv nicht möglich diese Standartform der Pulldown vollständig farbig zu verändern. "Opfer müssen gebracht werden", sagen die SchachspielerInnen. Mir haben die Menüs viel gebracht, denn das Navigieren im Blog ist jetzt wesentlich einfacher, was für mich das allerwichtigste ist. Naja, und über Geschmack lässt sich ja bekanntlich streiten.
Ich weise an diese Stelle darauf hin, dass es sich hier um eine grobe Beschreibung meines Vorgehens handelt und ich keine Garantie auf Funktion gebe. Eigeninitiative ist nötig.

Kommentar veröffentlichen

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.