Wie erstelle ich ein Menü (Teil 5) ♥♥♥


Hey ihr da :) Ich bin Celina von La Fille Crue & heute schreibe ich mein erstes HTML Tutorial! Es könnte etwas wacklig sein & wenn ihr Fragen habt, beantworte ich sie euch gerne in den Kommentaren :)

Das Dropdown Menü



Wer kennt es nicht? Am Anfang, wenn man sich einen Blog erstellt, dann hat man erstmal nur diesen Blog mit der Startseite. Aber mit der Zeit kommen weitere Seiten dazu. Eine Seite über sich selbst, eine Seite über die Lieblingsblogs, dann eine Facebook Fanpage & ein Twitter Account. Und so geht es immer weiter. Aber wo soll man das alles in einem schlichten Design unterbringen? Blogger bietet ja bloß die Möglichkeit, mit Bildern auf die jeweiligen Links zu verweisen, oder die Links einfach untereinander aufzulisten.

Aber mit einem kleinen HTML Code & einem Gadget, könnt ihr nun ganz einfach die platzsparende Variante des Dropdown Menüs nutzen.

Zunächst öffnet ihr euren Editor und kopiert folgenden Text hinein:
<form action="../">

<select onchange="window.open

(this.options[this.selectedIndex].value,'_top')" style="font-size: 11px; text-align:left; font-family: arial;">

<option value="">My Pages</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>
</select></form>

Damit müsst ihr jetzt nur noch euer Menü ein bisschen gestalten.

So geht’s:

font-size: 11px – Damit stellt ihr ein, wie groß die Schrift in eurem Menü sein soll. Soll sie wie im Beispiel oben sein? Dann lasst 11px. Ansonsten könnt ihr jede beliebige Zahl vor das px einsetzen.

text-align:left – So könnt ihr eure Textausrichtung festlegen. Wenn euer Text linksbündig sein soll, lasst ihr es so. Wenn ihr ihn aber mittig bzw. rechtsbündig wollt, gebt ihr wahlweise right / center ein.

font-family: arial – Hiermit stellt ihr ein, welche Schriftart euer Menü haben soll. Auch hier ist Arial im Beispiel verwendet worden. Ich weiß nicht, welche Schriftarten alles gehen, aber das müsst ihr ausprobieren.

>My Pages< -- Wie soll euer Menü “heißen”? D.h , was soll oben immer stehen? Wie im Beispiel „My Pages“ steht, könnt ihr natürlich einsetzen, was ihr wollt. Nur, verletzt niemals die < > !!!

So, bevor ihr nun weiter werkelt, müsst ihr euch überlegen, wie viele verschiedene Links ihr eigentlich in das Menü packen wollt? 4? Dann reicht der Code aus. Falls ihr mehr wollt, kopiert ihr die Zeile

<option value="LINK URL HERE">LINK TITLE HERE</option>

Und fügt sie einfach VOR


</select></form>

...ein, so oft wie ihr sie braucht.


So, jetzt wird es eigentlich einfach.

LINK URL HERE – Wie der Name schon sagt, setzt ihr dort einfach den Link ein. Also z.B http://deinblog.blogspot.com/

LINK TITLE HERE -- Wie auch hier der Name schon sagt, setzt ihr ein, wie euer Link heißen soll. Also z.B „Startseite“

Wenn ihr also überall nun etwas eingesetzt habt, ist euer Dropdown Menü fertig. Nun müsst ihr es nur noch auf euren Blog bringen.



Das macht ihr in dem ihr vom Dashboard -> Design -> Gadget hinzufügen -> HTML / JavaScript und dann einfach euren fertigen Code in das Fenster hinein kopiert.
Speichern, richtig platzieren & fertig ist euer Dropdown Menü!





18 Kommentare

  1. Danke für das Tutorial!

    Habe es mal ausprobiert und es funktioniert wirklich ganz einfach!
    Werde es vielleicht in den nächsten Tagen auf meinem Blog einbauen!

    AntwortenLöschen
  2. Endlich das DropDown-Tut... vielen lieben herzlichen Dank...
    ich werde das morgen gleich mal testen ♥

    AntwortenLöschen
  3. habe mir vorgestern auch ein menü zugelegt nur leider gab es einen balken siehe hier http://shanenoreen.blogspot.com/ wie bringe ich den weg? ich hätte gerne hinter dem menü einfach den weissen hintergrund. lg noreen

    AntwortenLöschen
  4. sehr gutes Tut, werde es vielleicht demnächst mal anwenden.
    ganz super erklärt. Vielen Dank

    Liebe Grüße, krissii :)

    AntwortenLöschen
  5. Super Tutorial :)
    Werde es bestimmt bald in meinen Blog einfügen ;*

    AntwortenLöschen
  6. Wie immer, eigentlich sehr, sehr gutes Tutorial! :)

    AntwortenLöschen
  7. Eine Frage .. Bei mir sind jetzt aufeinmal zwei "meine Seiten" Kästchen da! Wie kriege ich es hin, dass nur eins dort ist??

    Liebe Grüße Lea. :*

    AntwortenLöschen
  8. Ahh, jetzt klappt es :) Danke, sehr einfach und gut :*

    AntwortenLöschen
  9. Funktioniert das auch mit Labels?
    Habe es auf einer Seite gesehen und möchte gern wissen, wie das funktioniert. :)
    Gruß
    Sabrina.

    AntwortenLöschen
  10. das ist toll und funzt - klasse vielen 1000 Dank genau was ich gebraucht habe für meine ganzen Challenges <3

    LG vom lama

    AntwortenLöschen
  11. Super!Hat auch bei mir gleich im ersten Anlauf funktioniert.

    Danke, Anja.

    AntwortenLöschen
  12. Also ich bekomme das mit dem neuen Blogger einfach nicht auf die Reihe.

    AntwortenLöschen
  13. Also ich bekomme das mit dem neuen Blogger einfach nicht auf die Reihe.

    AntwortenLöschen
  14. Wie bekommt man es denn hin, dass jedes einzelnde Drop-Down nebeneinander ist?

    AntwortenLöschen
  15. Ich suche ein richtiges Drop Down Menü wie es hier auf CPL oben zu sehen ist... geht das hier mit diesem Code?

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!