Freitag, 19. Dezember 2014

Dropdown - Menü einbinden, Blogger.com.

Dropdown - Menü einbinden, Blogger.com, geht das auch einfach?


Leider ist es nicht so einfach ein Dropdown - Menü einzubinden denn es gibt kein Gadget dafür. 

Ein Dropdown-Menü ist wichtig wenn man, auf seinem Blog oder auch Webseite, mehrere Kategorien anbieten möchte. Ausserdem sieht es besser aus und bietet eine gute Übersicht. 


Screenshot eines Dropdown-Menüs auf einem Blog.
Wenn man jetzt nicht zufällig Programmierer ist oder sich sehr gut in HTML auskennt, hat man verloren. 
Um es dennoch hinzubekommen ein Dropdown Menü zu erstellen habe ich hier zwei Codes für Euch.

Dropdown - Menü einbinden, Blogger.com HTML-Code für das Gadget!

HTML-Code für ein Gadget in Eurem Blog (HTML und Javascript-Gadget an beliebiger Stelle im Layout hinzufügen und diesen Code einfügen):

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://LINK.com'>Home</a></li>
<li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->


Nicht erschrecken, jetzt sieht das Menü noch sehr fragwürdich und unsortiert aus. Das wird aber mit dem folgenden Css-Code behoben.  

Hier ein Nachtrag weil so viele von Euch mehr Subkategorien haben möchten:

  1. Für mehr Kategorien und sub-Kategorien, weiterhin diesen Code anwenden.. 
     
    <li><a href='LINK'>CATEGORY 3</a>
    <ul>
    <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
    <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
    </ul>
    </li>
     
  2. Um Sub-Kategorien anzulegen, diesen Code einfügen/nutzen
     
    <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1C</a></li>

 Anmerkung: Es existiert auch ein Video-Tutorial zu diesem Thema, den Link dorthin findet Ihr am Ende des Artikels!

Dropdown - Menü einbinden, HTML-Code für den CSS-Style-Manager!


Jetzt noch den Code in den Css-Style-Manager kopieren, damit das Dropdown-Menü auch ordentlich aussieht.  

Das geschieht im Dashboard unter:
Vorlage - Anpassen - Erweitert - Css

Code für den CSS-Style-Manager: 

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}



Wie das Ganze genau funktioniert erfahrt Ihr in meinem Video-Tutorial auf YouTube.

Hier der Link dorthin. Dropdown - Menü einbinden

Viel Erfolg 


27 Kommentare:

  1. Hallo,
    wie kann ich denn die Farbe der Kategorien verändern? Ich habe im CSS rumprobiert bekomme es aber nicht hin. Die Unterkategorien sind transparent, kann man dies ausstellen?
    Vielen Dank und liebe Grüße!

    AntwortenLöschen
    Antworten
    1. Hallo Rabea,
      Du gehst in den Vorlagen-Designer dann auf "Erweitert" und weiter auf "Tab-Hintergrund" dort kannst Du die Farbe ändern.

      Schönes Wochenende wünsch ich Dir.
      Gruß Susanne

      Löschen
  2. Hallo Susanne,
    erstmal vielen Dank für deine tollen Tips.Du hast mir bei meinen Blogstart sehr geholfen.
    Jetzt hab ich trotzdem noch eine frage.Wie schaffe ich es bei den SUB-CATEGORY noch eine SUB-CATEGORY dazu zu legen.Ich meine damit das die SUB-CATEGORY selber auch noch eine bekommt und so weiter und so weiter.Ich hoffe ich konnte mich richtig ausdrücken und du verstehst was ich meine.Ich bin nähmlich eine totale html Anfängerin.

    Vielen Dank und schöne Grüße

    Anna

    AntwortenLöschen
  3. Hallo Susanne,
    erstmal vielen Dank für deine ganzen Tips.Du hast mir bei meinem Blogstart sehr geholfen.Dann habe ich auch noch eine frage an dich.Wie verbinde ich meine SUB-CATEGORY in SUB-CATEGORY,so da ich immer wieder eine Seite auf machen kann.Ich hoffe ich habe es gut erklärt,denn ganz ehrlich ich bin eine totale html Anfängerin.
    Vielen Dank und schöne Grüße

    Anna

    AntwortenLöschen
    Antworten
    1. Hallo Anna, man kann soviele Kategorien einbauen wie man will. Allerdings könnte es dann auch wieder unübersichtlich aussehen.
      Danke Anna, das freut mich das Du mit meinen Video´s was anfangen kannst.
      Zu Deiner Frage: Man hat eine Hauptkategorie und mehrere Unterkategorien. Unten bei Elena (in der Fragestellung) habe ich beschrieben wie man noch mehr Kategorien unterbringen kann.
      Ich hoffe ich habe Deine Frage richtig beantwortet, ansonsten erkläre es mir bitte noch einmal etwas genauer. Lg. Susanne

      Löschen
  4. Hallo Susanne,
    die Frage von Anna S. stelle ich mir auch gerade. Kann ich zu den Unter-Kategorien noch zusätzliche Unter-Kategorien einbauen?
    Liebste Grüße
    Elena

    AntwortenLöschen
    Antworten
    1. Hallo Elena,
      ja, man kann soviele Kategorien einbauen wie man möchte. Kopiere dann einfach den "Platzhalter" Link aus dem HTML Code und füge ihn, unter die anderen Links, ein.
      Ebenso, wie man zuviele Kategorien löschen kann, kannst Du auch mehrere hinzufügen.
      Lg. Sue

      Löschen
  5. Ich bin übrigens heute zu deinem tollen Youtube Channel und dieser Seite gelangt. Super, super, super!!! Danke für die tollen Tipps und idiotensicheren Erklärungen und Anleitungen.
    LG
    Elena

    AntwortenLöschen
    Antworten
    1. Vielen Dank Elena, wenn Du mal Fragen hast kannst Du Dich gerne an mich wenden.
      Lieben Gruß zurück
      Susanne

      Löschen
  6. Erstmal DANKE für die tollen videos, sie haben mir sehr geholfen :D
    Ich habe ein kleines Problem mit dem CSS Code. Wenn ich es Einfüge und dann auf : Auf Blog anwenden klicke... ändert sich bei mir rein gar nichts .... es bleibt wie vorher wo nur HTML eingefügt wurde. Vielleicht kannst du mir ja irwie Helfen ... ich weiss echt nicht woran das liegt
    Lg
    Justine

    AntwortenLöschen
    Antworten
    1. Hallo Justine, vielen Dank. Ich freue mich wenn Dir meine Video´s weiterhelfen. Justine, welches Template/Vorlage benutzt Du denn? Wie heißt Deine Blog Addi? Vielleicht liegt es schon an der Vorlage..
      Sende mir doch mal die Daten dann guck ich mal.

      Ups, Wow, habe Deinen Blog gefunden (wer lesen kann ist klar im Vorteil was?) Der sieht ja toll aus, gefällt mir.
      Also Dein Design ist Awesome... ich meine damit gab es schon einmal Probleme. In dem Beispiel vom Video habe ich eine Simple Vorlage genommen damit geht es auf jeden Fall. Hast Du schon mal unterm Video die Kommentare gelesen? Da sind auch oft Antworten drin.
      Ich probiere es mal selber aus und meld mich dann nochmal, Okay?
      Lg. Susanne

      Löschen
    2. Vielen Dank für das Kompliment :D
      melde dich wenn du was mehr weisst :D .... ichvversuch mich auch nochmal daran vielleicht klappt es ja doch noch ;)

      Löschen
  7. Hallo liebe Susanne!!!
    Ich wollte dir nur bescheid sagen ..... ICH HABS GESCHAFFT!!!
    OHHHH man ich saß seit gestern und hab rumprobiert ... und endlich hat es geklappt :D
    falls du Lust hast kannst du mal vorbeischauen (buchfantasie.blogspot.com)
    Danke für deine tollen Videos :*
    Lg
    Justine

    AntwortenLöschen
  8. Hallo Susanne! Deine videos sind sehr toll und die haben mir, naturlich, sehr geholfen. Nur eine Frage... Ich habe alles gut mit drop-down menü gemacht, aber ich habe keine Idee wie kann ich mehrere texten unter eine Kategorie einfügen?

    AntwortenLöschen
    Antworten
    1. Hallo Aleksandra,
      das machst Du indem Du einfach auf der Seite weiterschreibst. Es ist nicht so gut für einen Blog mit zu vielen Kategorien und Unterkategorien zu arbeiten. Ein Blog ist ein fortlaufender Bericht, sozusagen. Eine Webseite ist anders aufgebaut.
      Ich würde einfach meine Artikel die zu einer Kategorie gehören untereinander weiterschreiben. Mit Überschrift usw. Aber alles auf eine Seite.
      Du kannst aber auch Labels anlegen und die Post´s /Artikel dort kategorisieren.
      Labels findest Du auch im Widget-Manager... Einfach ein Gadget öffnen und solange scrollen bis du Labels findest... Es gibt aber auch ein Video dazu. https://www.youtube.com/watch?v=8VFhywzFAuM Schau mal rein, vielleicht löst das Deine Probleme.
      Wenn nicht melde Dich nochmal
      Lg. Susanne

      Löschen
  9. Hallo Susanne! Deine Videos sind wirklich toll und sehr hilfreich... Bei mir funktioniert sehr gut drop-down menü (jetzt habe ich ihn gelöscht), aber ich habe keine ahnung wie kann ich mehrere texte unter eine kategorie einfügen. Ich habe es mehrmalls probiert, aber es geht einfach nicht. Können Sie mir das ein bisschen besser erklären? Ich habe gesehn dass Sie auf euerem Blog http://zimmerpflanzen-selber-pflanzen.blogspot.de/ haben auch nur ein Text unter eine Kategorie...

    (Ich schreibe Blog auf Deutsch um diese sprache zu üben)

    Mit freundlichen Grüssen,
    Aleksandra

    AntwortenLöschen
  10. Hallo Susanne,

    vielen Dank für diese wunderbaren Tipps. Kannst du mir vielleicht noch sagen, wie ich mehrere Posts in einer Hauptkategorie aufführen kann (also ohne Subkategorien)? Ich habe deinen Tipp mit "Leerzeichen Bindestrich Leerzeichen" bereits ausprobiert, nur leider scheint es bei mir nicht zu funktionieren. Oder wo genau setzt man die Leerzeichen und den Bindestrich? Hättest du ein Beispiel für mich? Vielen Dank im Voraus für deine Antwort. Viele Grüße

    AntwortenLöschen
  11. Hallo Susanne,

    danke erstmal für deine Mühe mit disem Beitrag, der erste Schritt hab ich geschafft und es hat alles soweit geklappt, doch sobald ich den CSS Code reinstelle, zerschiesst es mir das Layout. heisst, meine Sidebars verschiebt es total! Alles nach unten und noch mehr auf die Seite und ich kan es einfach nicht mehr ändern, egal was ich mache. Hast du vielleicht ne Idee woran es liegt und was ich machen kann das dies nicht passiert?

    Liebe Grüsse und danke schon mal für deine Antwort
    Alexandra

    AntwortenLöschen
  12. Hallo Susanne,
    erst einmal vielen Dank, das erste Tutoral, das ich kapiere :)

    Ich bekomme es auch im Testblog hin, aber ich habe noch zwei Fragen:

    1. Wie füge ich quasi eine Sub-Sub-Kategorie ein, also Kategorie 1 wäre z.B. "Meine Keisen", Sub-Kategorie "Teneriffa 2015 (ohne Link),
    Sub-Sub-Kategorie "Teneriffa, Tag 1, ... Also im Prinzip brauche ich eine weitere Ebene unten.

    2. Frage, Wie bekomme ich es hin, dass das "Teneriffa" kein Link ist, sondern nur eine Überschrift.

    Die Fragen sind bestimmt nicht sehr intelligent, aber ich bastle jetzt seit 2 Tagen und bin echt am Verzweifeln :(

    Viele liebe Grüße
    manu

    AntwortenLöschen
    Antworten
    1. Hallo Manuela,
      entschuldige das ich nicht geantwortet habe. Es liegt daran das ich nicht mehr so oft auf diesem Blog bin. Hätte nicht mit Kommentaren gerechnet :-)
      Hast du alles hinbekommen? Wenn du magst sende mir doch deine Url mal... so kann ich nicht so viel sagen.
      Viele Grüsse
      Susanne

      und nochmal entschuldigung... :-/

      Löschen
  13. Vielen Dank für deine Tipps. Sie sind bis jetzt alle sehr nützlich für mich gewesen. Und habe auch viel da zu gelernt.

    Grüß
    Klaus

    AntwortenLöschen
    Antworten
    1. Vielen Dank Klaus, so etwas höre ich immer gerne :-D
      Wenn mal was ist einfach melden. Am besten kriegt ihr mich wenn ihr direkt über Youtube Kommentiert da ich auf diesem Blog nicht mehr so viel mache.
      Gruß Susanne

      Löschen
  14. Hallo Susanne,
    super Tips und Beiträge die du da gibst. Ich bin auch ständig auf der Suche nach solch hilfreichen Dingen wie das Drop Down Menu oder die Kontakt Box.
    Auch Hallo Justine,
    Ich benutze auch die Awesome Vorlage und habe genau das gleiche Problem mit dem Menü. Eigentlich ist alles richtig angelegt. Hab mit dem Code schon einiges probierte.h. Wenn meine Gadgetleiste größer ist kann ich die Submenus sehen. Bei der Größe die jetzt eingestellt ist, krieg ich es nicht hin. Wie hast du es gemacht? Ach so...die Seite -> www.schwarze-husaren-Geistenbeck-1961.blogspot.de
    Wäre toll wenn mir jemand behilflich sein könnte. Ich Probier derweilen nö was rum
    Gruß
    Roland

    AntwortenLöschen
    Antworten
    1. Hallo Roland,
      ich glaube ich habe schon geantwortet oder? An Deinen Blog kann ich mich gut erinnern... ist jetzt alles geklärt wegen dem Drop-Down-Menü?
      Lg. Susanne

      Löschen
  15. Ein großes Danke, nach unzähligen Tutorials hats durch dich endlich geklappt, dass das ganze auch schön aussieht!
    Eine Frage bleibt aber (Ich glaube, Elena und Anna hatten eine ähnliche, oder gar die selbe?): Wie kann ich sub-sub-Kategorien anlegen? Also keine weitere Subkategorie, sondern eine weitere Ebene Also zb Afrika (Kategorie) --> Marokko (Subkategorie) --> Agadir (Subsubkategorie, die dann erst den endgültigen Link beinhaltet)?
    Wie also baue ich eine 3. oder 4. Ebene ein? Ich hoffe, du verstehst, was ich meine :)

    Vielen Dank jedenfalls!

    AntwortenLöschen
  16. Liebe Susanne,

    dein Tutorial ist super erklärt, aber wenn ich deinen Code kopiere, habe ich immer nur 1 Unterkategorie.
    Habe ich etwas falsch gemacht?

    AntwortenLöschen
    Antworten
    1. Hallo Svenja,
      eigentlich müssen es 3 sein. Das kannst du im Code oben erkennen Svenja. Im ersten Code kannst du 3 Supcategories erkennen.
      Normalerweise soll man aus einem Blog aber keine "Webseite" machen...Dropdown-Menü. Ein Blog soll fortlaufend wie ein Tagebuch sein, so möchte es Google. Blog unterscheidet sich absichtlich von feststehenden Webseiten.
      Versuche noch einmal den Code zu kopieren und einzufügen...sonst melde dich nochmal bei mir.

      Löschen