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


Es gibt viele verschiedene Wege ein Menü zu erstellen und ebenso viele verschiedene Arten es zu gestalten. Eine eigentlich relativ einfache Art werde ich euch im Folgenden zeigen.Wie das ganze fertig aussieht könnt ihr euch auf meinem Blog anschauen.



SCHRITT 1: DER CODE

Ersteinmal brauchen wir natürlich den CSS-Code, sprich die Basis für unsere Leiste.

/* Link-Balken
----------------------------------------------- */
#Line {
width: 100%;
height: 21px;
background: #eee;
position: fixed;
color: #ccc;
margin-top: 0px;
text-align: center;
word-spacing: 20px;
font-family: arial;
font-size: 12px;
line-height: 1.9em;
letter-spacing: 1px;
z-index: 100000;
}

Für die Leute, die sich damit nicht so gut auskennen werde ich euch den Code einmal übersetzen.
  • Width steht für die Position der Leiste. Bei 100% befindet sie sich zentriert. Mit 50% beispielweise links von eurem blog
  • Height zeigt die Größe eures Balkens
  • Background die Farbe des Hintergrundes. Andere Codefarben findest du beispielweise auf dieser Seite
  • Position sagt nur, dass die leiste fest oben auf eurem Blog bleibt und nicht mitscrollt
  • Margin-top bestimmt wie weit die Tabs von der oberen Kante eures Blogs entfernt ist
  • Text-align sagt wohin sich die einzelnen Tabs eures Menüs ausrichten sollen
  • Word-spacing zeigt, wie man schwer am Wort erkennt, was für ein Abstand zwischen den Tabs liegt.
  • Font-family bestimmt die Schrift
  • Font-size die Schriftgröße
  • Line-height sagt uns die Höhe der Leiste
  • und Letter-spacing wie weit die einzelnen Buchstaben voneinander entfernt sind.
Da könnt ihr einfach etwas herumprobieren, wie es euch am besten gefällt.

SCHRITT 2: EINSETZEN DES CODES

Zum Einsetzen gehen wir erstmal natürlich auf Vorlage und HTML bearbeiten. Sucht mit STRG+F nach /head fügt über ]]></b:skin>  unseren Code ein. Das sieht bei mir dann so aus:

(wundert euch nicht, ich habe meine Leiste natürlich so angepasst genau wie sie mir gefällt)


SCHRITT 3: LINKS EINFÜGEN

Wenn ihr jetzt auf Vorschau klickt, werdet ihr feststellen, dass euer Menü noch nicht angezeigt wird. Das liegt daran, dass ein CSS-Code nur angibt, wie was auszusehen hat. Aber das "was" ist noch nicht eingefügt. Das macht ihr dann mit HTML. Dies macht ihr wie folgt.

Gebt in der Strg+F Suchzeile ''</head>''. Und direkt darunter fügst du folgenden Code ein.

<div id='Line'>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
</div>
Das ist dann natürlich eure Entscheidung wie viele Links ihr dort angezeigt haben möchtet.
Für ''LINK'' setzt ihr nun den Link ein, zu dem euch der Klick darauf führen soll, und statt ''TEXT'' schreibt ihr dort hin, was euch dafür angezeigt werden soll.

Bei mir sieht das dann beispielweise so aus:


SCHRITT 4: VOLLENDUNG

Nun gehst du auf Vorschau, und schaust ob dir dein Menü so gefällt. Sollte das nicht der Fall sein, kannst du die oben genannten Teile des Codes verändern.
Sollte bei dir keine Leiste erscheinen, suchst du mit Strg+F noch einmal nach ''#Line'' und veränderst dort die Zahl bei ''margin-top''. Welche Zahl du dann dafür einsetzt musst du selbst ausprobieren, denn das hängt von deinem Design ab. Meistens ist es aber eine negative Zahl, beispielweise -25px. Gehe dann einfach immer wieder auf Vorschau, bis deine Leiste so sitzt wie du sie haben möchtest.

96 Kommentare

  1. Danke für das super Tutorial, hat prima funktioniert, bis auf eins:
    Die leiste ist dank 'fixed' zwar fixiert, doch wenn man runterscrollt verschwindet sie hinter den Posts...

    Irgendeine idee zur Lösung dieses Problems?

    xoxo Vanny ♥

    AntwortenLöschen
    Antworten
    1. Gebt dem Div-Container #Line noch einen Z-Index, dann wird die Nav über dem Blog-Gadget angezeigt (und nicht darunter, wie jetzt). Beispielsweise so:

      #Line {
      ....
      z-index: 9;
      }

      Der Wert 9 sollte ausreichen, dass die Nav über dem Blogger-Gadget kommt.

      Achtung: Die Blogger eigene Lightbox verwendet den Wert 12, d.h. wenn ihr die Lightbox verwendet, dürft ihr auf keinen Fall einen hören Wert als 12 nehmen, sonst wird die Nav quer im Bild stehen.

      Viel Erfolg, Oliver

      Löschen
    2. Danke für deine Ergänzung!
      Tolles Tutorial :)

      Löschen
  2. Ich hab das selbe Problem wie Vanny, da die Posts im Vodergrund angezeigt werden. Wie kann man das ändern?

    AntwortenLöschen
  3. Das ist Paulina´s Tutorial, hättest sie wenigsten verlinken können -.-

    AntwortenLöschen
    Antworten
    1. Sie haben beide die gleiche Quelle genutzt, von daher sind es zwei verschiedene Tutorials mit der gleichen Quelle. ;)

      Löschen
  4. Ich würde auch gerne wissen, wie man die Leiste ÜBER die Posts bekommt. (:
    Aber sonst, tolles Tutorial!
    Liebste Grüße.

    AntwortenLöschen
  5. Ehm, irgendwie sieht das bei mir total anders aus. Die beiden Wörter sind links oben ans Eck geklebt und egal was ich mache, da passiert nichts.

    AntwortenLöschen
  6. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  7. irgentwie bekomme ich es nciht hin

    AntwortenLöschen
  8. Ich hab immer noch die halte Leiste unter dem Header,aber auch nicht so schön wie bei dir.Sonst ist das Tutorial eigentlich ganz Gut!

    AntwortenLöschen
  9. Vielen Dank für das super Tutorial(;
    Hat super geklappt, auch mit der Hintergrundfarbe!
    Danke♥

    AntwortenLöschen
  10. Huhu wie geil :)
    kannst du mir da helfen oder nicht ??

    http://principessafashion.blogspot.de/

    AntwortenLöschen
  11. Genial!
    Hat alles gut geklappt und sieht toll aus, danke dafür :)

    AntwortenLöschen
  12. Danke für das Tutorial!
    was müsste man bei 'position' schreiben, wenn sie eben doch mitscrollen soll? :)

    AntwortenLöschen
    Antworten
    1. würde mich auch interessieren.

      Löschen
    2. einfach wegmachen das mit position :)

      Löschen
  13. kann mir mal einer verraten wie man die abstände zwischen den einzelnen posts ändert? :((

    AntwortenLöschen
  14. Einfach bei
    position:fixed;
    position:left; oder right/ center/ Wert :)
    eingeben...
    Dann müsst ihr aber den "negativen Wert" bei
    margin-top:
    in einen "positiven Wert" verwandeln!!

    AntwortenLöschen
  15. Habs grade probiert und hat auch alles geklappt, aber wenn ich meine navbar wegmache ist auch das menü weg und wird nicht mehr angezeigt o:

    AntwortenLöschen
  16. Super Tutorial, bei mir hat alles geklappt, aber meine Navbar ist direkt vor der leiste, dadurch kann man auch nicht auf die einzelnen Wörter raufklicken. Und irgendwie bin ich zu doof die Navbar zu entfernen, oder die Leiste unter die Navbar zu verschieben. Denn immer wenn ich bei margin-top das so eingebe, dass die Leiste weiter runter rutscht, verschwindet sie...
    Kann mir jemand helfen?

    AntwortenLöschen
    Antworten
    1. Geh in deinem "BloggerHauptmenü auf "Layout", dann auf Navbar(oben rechts). Dort kann man die Farbe der Navbar einstellen oder sie ganz unten auch ausschalten :-)

      Löschen
  17. Ich habe soweit alles gemacht, was ihr hier beschrieben habt, doch irgendwie klappt es nicht ganz. Ich sehe meine Links nicht?

    AntwortenLöschen
  18. bei mir hats auch ziemlich gut geklappt, nur leider schaff ich es iwie nicht ein follow me link einzufügen..(falls mich wer versteht) wär total nett wen mir jemand helfen könnte :)

    AntwortenLöschen
  19. http://moscow-paris.blogspot.de/

    Ich hab alles so gemacht,wie es da steht! :D
    Nur jetzt kann man die Links nicht anklicken :o
    Ich hab auch alles shcon 100 mal überprüft!

    AntwortenLöschen
    Antworten
    1. kann mir wer helfen? :)

      Löschen
    2. Wie hast du das Problem jetzt gelöst? ich hab das selbe Problem

      Löschen
  20. Klappt alles super bei mir nur die schriftfarbe bleibt wie bei allen links bei mir blau. wie kann ich die ändern ohne alles zu ändern? wisst ihr was ich meine :/

    AntwortenLöschen
    Antworten
    1. Hi,

      die Schriftfarbe von den Links änderst du so:

      Vorlagen-Designer > Eigene CSS

      #Line a{
      color: #d3ef4e
      }


      #d3ef4e ist ein Beispiel, du kannst natürlich jeden andere Hexfarbe nehmen.

      LG

      Löschen
    2. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
  21. es hat alles soweit geklappt, NUR man kann die einzelnen "links" nicht anglicken . Das menü kommt nicht mit runter, wenn ich runterscrolle UND ich will das menü größer haben , doch wenn ich es größer machen will , versteckt sich ganz oben hinter so einer anderen Leiste.

    was mache ich falsch ? ://

    bitte helfen , dankeschöön :))

    AntwortenLöschen
  22. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  23. bis jetzt hat alles geklappt nur was mich stört, ist das alles jetzt über meinem header steht und nicht UNTER meinem header, wie bekomm ich das denn hin? :/

    AntwortenLöschen
  24. heey:) ich suche schon eine weile nach einer Anleitung für so eine leiste!
    Ich probiere das gleich mal aus...
    Dankeschöön!

    AntwortenLöschen
  25. Hmm... irgendwie finde ich das /head nicht mehr...
    Bei mir gibt es da ewig viele Möglichkeiten & will nicht jede durchprobieren...
    Unter welchem Oberpunkt soll das ganze denn stehen?

    AntwortenLöschen
  26. irgendwie geht das immer noch nicht, es versteckt sich hinter den posts :/ hat da inzwischen jemand eine lösung für? sonst hat alles prima geklappt

    AntwortenLöschen
  27. Ich würd gern Bilder zum Anklicken einfügen anstellt von Text als Link, allerdings geht das mit dem üblichen img src=".." nicht, da kommt immer ein Fehler... kann ich da irgendwas machen? :/

    AntwortenLöschen
    Antworten
    1. Mach doch einfach rechteckige Bilder nebeneinander.

      Löschen
  28. Also ansich recht gutest Tut, ich habe auch eine Leiste..nur ich kann die Links nicht benutzen.. wie kommt das?

    lg.Wolkenmädchen.
    http://towards-the-sky.blogspot.com

    AntwortenLöschen
  29. hat eigentlich ganz gut geklappt, nur würde mich interessieren wie ich die inhalte in die seiten rein bekommen, bei drauf klicken erscheint nur "die seite dir ihr blog sucht ist nicht vorhanden."
    wie kann ich das ändern? hoffe du kannst mir da helfen (:

    AntwortenLöschen
    Antworten
    1. Dafür musst du bei Seiten ein paar Seiten erstellen und die Links dann da rein hauen :)

      Löschen
    2. danke, jetzt habe ich es (;

      Löschen
  30. Bei mir klebt die Leiste ganz oben links in der Ecke und lässt sich einfach nicht verändern! Was kann ich machen?

    AntwortenLöschen
  31. Bei mir klappt das nicht wenn ich auf vorschau drücke dan zeigt es nur ne skekunde an und verschwindet dann :(?

    biteeee HELFEN

    AntwortenLöschen
  32. Also bei mir klappt alles aber ich würde so gerne das das unter dem Header steht??
    Wie geht den das ich krieg das nicht hin
    Liebe Grüße,
    Stine
    http://stinechloe-awd.blogspot.de/

    AntwortenLöschen
  33. es klappt zar super, nur es ist nicht fixiert, also mitscrollend ://

    AntwortenLöschen
    Antworten
    1. ouh.. also ich meine das Menü oben soll immer an dieser stelle fixiert sein, wenn man tunterscrollt :))

      Löschen
  34. du hast mich gerettet, danke, daaaaaaaaaaaaaaaanke :)))♥

    AntwortenLöschen
  35. ich hab alles so gemacht, wie in der anleitung, aber wenn ich auf *vorschau* klicke, kommt bei mir nur weiß, kein blog mehr, keine leiste. beim ersten versuch aber, ist die leiste oben kurz aufgeblitzt. seitdem aber verschwunden wie der rest. was könnte der fehler sein?

    AntwortenLöschen
  36. Das Funktioniert bei mir auch nicht, wenn ich auf vorschau klicke kommt wie bei charlene entweder nichts oder default...

    AntwortenLöschen
  37. gibt es eine Möglichkeit das die Schrift nich ganz in der Mitte sondern etwas nach links verschoben ist,aber auch nicht ganz an der seite?

    (sonst hat alles aber sehr gut geklappt) :)

    AntwortenLöschen
  38. Hallo ich wollte mal fragen wie ich dieses Menü denn unter meinen Header bekomm? Das hab ich nämlich noch nicht rausbekommen:/

    Wäre dankbar für antworten, ansonsten klappt das sehr gut!:)

    Vlg Sabrina

    AntwortenLöschen
    Antworten
    1. Hey du musst einfach bei line-height die Zahl erhöhen, ich habe z. B. 40.7 em und jetzt ist das Menü bei mir unter dem Header und über den Posts :)

      Löschen
  39. Hallo, ich kann nicht auf die Links klicken. Wie kommt das? :-(

    AntwortenLöschen
  40. Fantastisch! Ich liebe meine neue Navi ♥ Danke!

    AntwortenLöschen
  41. Vielen Dank! es hat super geklappt, und sieht toll aus! Aber die Leiste Scrollt leider mit, obwohl Position:fixed da steht.... komishcerweise... wie geht es denn, dass das Menü oben bleibt, (an der gleichen stelle)??

    AntwortenLöschen
    Antworten
    1. einfach left eingeben und dann ist es fixiert...

      Löschen
    2. ersetz das "position:fixed;" durch "position: alsolute;",dann müsste sie oben stehen bleiben ohne mit zu scrollen :-)

      Löschen
  42. das ist ein wirklich tolles Tutorial (:
    Leider habe ich noch nicht ganz verstanden wie man dann alles verlinkt, so dass es auch angezeigt wird ?!

    kann mir da vielleicht jemand helfen ? (:

    Liebst,
    Aileen <3

    AntwortenLöschen
    Antworten
    1. Wie meinst du das? Ich hab bei dir nachgeschaut, sieht doch alles ganz gut und richtig verlinkt aus :)

      Löschen
  43. Ich habe das Problem, dass der Code nicht ausgeblendet wird, also oben mit da steht. Hat es damit zu tun, dass ich meinen Header entfernt habe ? Danke

    AntwortenLöschen
  44. Hat Jemand eine Idee wie man mir helfen könnte? Das Menü wird nicht angezeigt, egal was ich unternehme, und wie groß ich den abstand bei margin ändere.
    Könnte mir Bitte jemand helfen? Danke.
    Marie

    AntwortenLöschen
    Antworten
    1. Hast du die Codes an der richtigen Stelle eingesetzt?
      Vielleicht funktioniert es, wenn du den CSS-Teil unter Vorlage -> Anpassen -> Erweitert einfügst?

      Löschen
    2. dasselbe problem habe ich auch :/

      Löschen
  45. Hallo, wirklich klasse Tutorial!
    Wie bekommt man das Suchfeld in die Navigation, so, wie du es hast? Hab mir bei der Personalisierten Google-Suche jetzt eine Suchleiste erstellt, aber immer, wenn ich sie einfügen will, hängt sie unter der Navigationsleiste...

    Liebe Grüße :)

    AntwortenLöschen
  46. Ich habe leider auch das Problem, dass sich das menü links befindet :(
    Kann mir vielleicht jemand helfen ?

    AntwortenLöschen
  47. egal, was ich ändere, das menü ist immer oben links in der ecke ..

    AntwortenLöschen
  48. Bei mir kann man die Links auch nicht anklicken, bitte helft mir !!
    http://heavenlyunfabulous.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Du darfst den Code von Schritt 3 nicht zwischen den und < body> machen. Sowas darfst du niemals machen!

      Lies dir nochmal den Text in Ruhe durch, da steht die richtige Stelle, wo du es einfügen sollst.

      Löschen
    2. Hab deine Antwort aus versehen gelöscht, aber hier ist die Antwort:

      füg bei Schritt 1 noch z-index: 100000; hinzu, dann klappts :)

      Löschen
    3. es funktioniert, allerliebsten dank! :)
      find ich echt total lieb, dass du mir geantwortet hast :))

      Löschen
    4. okay, ich habe noch eine letzte frage .. irgendwie hört der balken bei mir schon links vor dem rand auf, was kann cih da noch ändern?
      http://heavenlyunfabulous.blogspot.de/

      Löschen
    5. Füg noch bei Schritt 1 das hier hinzu:
      margin-left: -40px;

      :)

      Löschen
  49. bei mir hat das tutorial auch geklappt :)
    nur heißt bei mir jetzt jede seite "TEXT"
    wie kann ich das ändern, damit die seiten home, contact und sowas alles heißen ?
    Danke schonmal ! :)
    http://flyingfaith-karina.blogspot.de/

    AntwortenLöschen
  50. Hat sich schon erledigt, ich bin zu blöd zum lesen :D
    Tolles Tutorial ! <3

    AntwortenLöschen
  51. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  52. klappt das mit dem neuen html auch noch? ich kann die stelle " ]]>"leider nicht finden :( und wenn ich es einfach so einfüge, dann wird der text des htmlcodes angezeigt

    AntwortenLöschen
  53. ich kann die stelle zum einfügen des ersten schrittes nicht mehr finde :(

    AntwortenLöschen
  54. Wenn ihr statt background &
    color das hier : '' background-image: url(http://sample.jpg); '' hinschreibt ist statt der farbe ein bild z.B auf meinem Blog : http://me-xenia.blogspot.co.at

    AntwortenLöschen
  55. Wenn ihr statt background &
    color das hier : '' background-image: url(http://sample.jpg); '' hinschreibt ist statt der farbe ein bild z.B auf meinem Blog : http://me-xenia.blogspot.co.at

    AntwortenLöschen
  56. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  57. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  58. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  59. Wie kann ich da die Schriftart in weiß verändern, wenn ich nämlich dass mit font-color: #FFFFFF , mach dann funkt es nicht :(

    AntwortenLöschen
  60. Bei mir wird das leider nur oben links in der Ecke angezeigt,....obwohl ich die Schritte einige Male überprüft habe :(

    AntwortenLöschen
  61. Mit Deiner Hilfe habe ich mir eine Menue-Leiste erstellt.
    herzlichen Dank
    Judika

    AntwortenLöschen
  62. HAllo!

    Vielen Dank für das Tutorial, was hab ich nach einer Möglichkeit gesucht, das Menü über den Header zu setzen ;-)

    Eine Frage habe ich allerdings dennoch:
    Wie kann ich die Schriftart auf "fett" setzen? Ich würde die Schriftart gerne dem Rest meines Blogdesigns anpassen, und da sind Überschriften alle fett.

    Für einen kurzen Tipp wäre ich seeeeehr dankbar!

    Liebe Grüße und macht weiter so,
    Katharina

    AntwortenLöschen
  63. Also bei mir sah es danach genau so aus wie davor. Hmm :/

    AntwortenLöschen
  64. Ich brauch hier mal dringend Hilfe. Bei mir fehlt ein Stück des Balkens auf der linken Seite. Ich bekomm den einfach nicht an den Blogrand. Wie kann ich das beheben?

    Maddie von http://maddietestethier.blogspot.de/

    AntwortenLöschen
  65. Hey! Ich kann die Stelle zum einfügen nicht finden... weiß jemand ob es noch andere Stellen gibt?

    AntwortenLöschen
  66. Danke für den Post! Ich verstehe nur das mit den Links nicht! Wie genau 'finde' ich den Link wenn ich eine Kategorie Mode haben möchte?:)

    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!