DropDown Menü

55 Kommentare


★ FROHES NEUES JAHR ★ 


Ich wünsche Euch ein gesundes, glückliches, buntes & kreatives neues Jahr 2016!
Das neue Jahr starten wir direkt mit einem kleinen, aber effektiven Blogputz. Heute zeige ich Euch, wie man ganz einfach ein Menü mit Unterpunkten (DropDown Menü) erstellt. Dazu muss man nur den Code einfügen, den ich hier zur Verfügung stelle. Anschließend wird ein Gadget erstellt und eigene Links einfügt - fertig.

Das neue DropDown Menü ist zentriert und oben fixiert, bleibt somit beim Scrollen immer oben sichtbar. Die Network Items sind im Menü bereits integriert und warten nur darauf, Eure Links verpasst zu bekommen!


Und so sieht das Menü aus:

Meinem eigenen ähnlich, aber ganz easy abzuändern (Schrift, Farben, Buttons usw).




Es gibt diesmal eine Änderung!

Die Stellen, die man zum Stylen bearbeiten kann, habe ich diesmal direkt im Code markiert /* So sieht das in der Zeile des Codes dann aus */. Die Zeilen, die keine Info haben /* Zur Erinnerung: So sieht eine Info aus */ lasst Ihr bitte unberührt, sonst funktioniert der Code nicht mehr. Hier in der Bloganleitung DropDown Menü zeige ich Euch trotzdem nochmal welche Teile man wie bearbeiten kann. Los geht's!



Ganz wichtig

Bevor Ihr mit Änderungen beginnt, macht bitte ein Backup Eures aktuellen Layouts:
Dashboard > Backup/Wiederherstellung > Vollständige Vorlage herunterladen



Blogger-Navbar ausschalten

Geht in das Layout: Gadget Navbar > ausschalten > speichern



CSS einfügen

Den CSS-Code komplett kopieren und wie im Bild im Vorlagendesigner einfügen:
Dashboard > Vorlage > Anpassen > Erweitert > CSS hinzufügen > Enter > Auf Blog anwenden > Zurück zu Blogger

CSS-Code: markieren > rechte Maustaste > kopieren und wie oben erklärt einfügen. Ganz am Ende hinter das letzte Zeichen klicken und "Enter" drücken nicht vergessen
 /* START: Fixiertes DropDown-Menü by Misses Cherry */   
  /* Hauptmenü Hintergrund-Einstellungen */   
  #centeredmenu {   
   clear:both;   
   float:left; top: 0; left: 0;   
   margin:0;   
   padding:0;   
   border-bottom:1px solid #ededed; /* Linie unter Menü/Gesamtbreite/Haupthintergrund */   
   width:100%;   
   height: 35px; /* Höhe des Menüs/Haupthintergrund */   
   background: #ffffff; /* weiß - Hintergrundfarbe des Menüs/Haupthintergrund */   
   font-family: 'Open Sans', Verdana, sans-serif; /* Schriftart */   
   font-size: 14px; /* Schriftgröße */   
   letter-spacing: 1px; /* Abstand der Buchstaben zueinander innerhalb eines Links */   
   z-index:1000;   
   position: fixed;   
  }   
  /* Hauptmenü Styling*/   
  #centeredmenu ul {   
   margin: 0;    
   padding: 0;   
   list-style: none;   
   float: right;   
   position: relative;   
   right: 50%;   
  }   
  #centeredmenu ul > li {   
   margin:0 0 0 1px;   
   padding:0;   
   float:left;   
   position:relative;   
   left:50%;    
  }   
  #centeredmenu ul > li a {   
   display:block;   
   margin:0;   
   padding-left: 35px; /* Linker Abstand zum Linktext/Hauptmenü */    
   padding-right: 35px; /* Rechter Abstand zum Linktext/Hauptmenü */    
   font-size: 14px; /* Schriftgröße/Hauptmenü */   
   line-height: 35px; /* Höhe/Hauptmenü */   
   background: #ffffff; /* weiß - Hintergrundfarbe/Hauptmenü/Tabs */   
   text-decoration: none; /* none;=kein Unterstrich, underline;=unterstrichener Link */   
   text-transform: uppercase; /* uppercase;=Großbuchstaben, none;=normale Darstellung der Buchstaben wie bei Eingabe */   
   font-family: 'Open Sans', Verdana, sans-serif; /* Schriftart/Hauptmenü */   
   color: #292929; /* dunkelgrau - Schriftfarbe/Hauptmenü */   
   letter-spacing: 1px; /* Abstand der Buchstaben innerhalb eines Links/Hauptmenü */   
   font-weight: 400; /* Schriftgrad/Hauptmenü, z.B. bold; 300; 400; 600; 700; etc. */   
   border-bottom: 1px solid #ededed; /* hellgrau - Linienfarbe/Hauptmenü/Tab */   
  }   
  /* A Hauptmenü-Tabs beim Drüberfahren mit der Maus. Genau wie B unten ändern, wenn Änderung gewünscht */   
  #centeredmenu ul > li a:hover {   
   background:#ffffff; /* weiß - Hauptmenü/Tabs/Hintergrundfarbe beim drüberfahren (hovern) */   
   color:#f3a8af; /* dunkelrosa - Hauptmenü/Tabs/Schriftfarbe beim drüberfahren (hovern) */   
   border-bottom: 1px solid #ededed; /* hellgrau - Linienfarbe/Hauptmenü/Tab */   
  }   
  /* B Hauptmenü-Tabs beim Drüberfahren mit der Maus. Genau wie A oben ändern, wenn Änderung gewünscht! */   
  #centeredmenu ul > li:hover a,   
  #centeredmenu ul > li.hover a { /* HIER FINGER WEG! Alle 3 weitere Zeilen ändern wie oben, zur einheitlichen Darstellung in verschiedenen Browsern! */   
   background:#ffffff; /* weiß - Hauptmenü/Tabs/Hintergrundfarbe beim drüberfahren (hovern) */   
   color:#f3a8af; /* dunkelrosa - Hauptmenü/Tabs/Schriftfarbe beim drüberfahren (hovern) */   
   border-bottom: 1px solid #ededed; /* hellgrau - Linienfarbe/Hauptmenü/Tab */   
  }   
 /* Unter-Menü Styling */   
  #centeredmenu ul ul {   
   display:none;   
   position:absolute;   
   top:100%;   
   left:0;   
   right:auto;   
   width:100%;   
  }   
  #centeredmenu ul ul li {   
   left:auto;   
   margin:0;   
   clear:left;   
   width:100%;   
  }   
  #centeredmenu ul ul li:hover ul {  
      left: 100%;  
      top: auto;  
      margin-top: -25px;  
 }  
 #centeredmenu li ul li ul {  
      position: absolute;  
      left: -9999px;  
 }  
  #centeredmenu ul ul li a,   
  #centeredmenu ul li.active li a,   
  #centeredmenu ul li:hover ul li a,   
  #centeredmenu ul li.hover ul li a {   
   padding-left: 10px; /* Linker Abstand zum Linktext/Untermenü */   
   padding-right: 10px; /* Rechter Abstand zum Linktext/Untermenü */    
   font-size:12px; /* Schriftgröße/Untermenü */   
   text-decoration:none; /* none;=kein Unterstrich, underline;=unterstrichener Link */   
   text-transform: uppercase; /* uppercase;=Großbuchstaben, none;=normale Darstellung der Buchstaben wie bei Eingabe */   
   font-family: 'Open Sans', Verdana, sans-serif; /* Schriftart/Untermenü */   
   color:#292929; /* Schriftfarbe/Untermenü */   
   font-weight: 400; /* Schriftgrad/Untermenü, z.B. bold; 300; 400; 600; 700; etc. */   
   background:#ffffff; /* weiß- Hintergrundfarbe/Untermenü/Tabs */   
   line-height:25px; /* Höhe des Untermenüs/Tabs */   
   border-bottom:1px solid #ededed; /* hellgrau - Linienfarbe/Untermenü/Tabs */   
  }   
  #centeredmenu ul li.active ul li a:hover,   
  #centeredmenu ul li:hover ul li a:hover,   
  #centeredmenu ul li.hover ul li a:hover {   
   background:#FFFAFA; /* hellrosa - Untermenü/Tabs/Hintergrundfarbe beim drüberfahren (hovern) */   
   color:#f3a8af; /* dunkelrosa - Untermenü/Tabs/Hintergrundfarbe beim drüberfahren (hovern) */   
  }   
  /* FINGER WEG! */   
  /* ACHTUNG! Ab hier keine Änderungen mehr vornehmen! */   
  /* Ändert die Anzeige des letzten Links, damit er im Menü bleibt */   
  #centeredmenu ul ul.last {   
   left:auto; /*Don't touch! reset left:0; value */   
   right:0; /* Don't touch! Set right value instead */   
  }   
     /* FINGER WEG! */   
  /* Lässt Untermenüs beim Hovern erscheinen */   
  #centeredmenu ul li:hover ul,  
  #centeredmenu ul li.hover ul { /*Don't touch! Benötigt für Internet Explorer 6 und niedriger */   
   display:block; /*Don't touch! Show the sub menus */   
  }   
  function addhover() {   
   var navli,i;   
   // loop through all elements in the nav   
   navli = document.getElementById('centeredmenu').getElementsByTagName('li')   
   for(i=0;i<navli.length;i++) {   
   // add the hover functions to the li onmouseover and onmouseout   
   navli[i].onmouseover=function(){hover(this,'hover');};   
   navli[i].onmouseout=function(){hover(this,'');};   
   }   
  }   
  function hover(o,sClass) {   
   if (o) {   
   o.className = sClass;   
   }   
  }   
  addhover();   
  /* END: Fixiertes DropDown-Menü by Misses Cherry */  


Auf Blog anwenden > Zurück zu Blogger nicht vergessen??
Prima! Du hast dem Blog soeben gesagt, dass da gleich ein DropDown Menü kommt und wie es funktionieren soll. Sehen kannst du jetzt noch nichts, denn das eigentliche Menü ist ja noch nicht da - das ändern wir jetzt.


Das Menü als Gadget einfügen

Kopiere dafür den unten angegebenen HTML-Code und füge ihn hier ein: Layout > Gadget hinzufügen > HTML/JavaScript anschließend speichern.

ACHTUNG WICHTIG: Das Gadget unbedingt rüber zu den Sidebar-Gadgets schieben! Man darf das Menü-Gadget NICHT unter dem Header platzieren, weil das Menü sonst durch Blogger blockiert wird. Da der Platz unter dem Header von Blogger vorab schon für die "Tabs" reserviert ist, will das dort eingefügte Gadget automatisch die Tabs-Formatierung annehmen und der Code kann nicht mehr richtig dargestellt werden. Also rüber in die Sidebar damit und anschließen Layout speichern.

HTML-Code DropDownMenü:

 <div id="centeredmenu">  
   <ul>  
    <li><a href="index.html">Home</a></li>  
    <li><a href="http://www.misses-cherry.blogspot.de/">Do it yourself</a>  
      <ul>  
       <li><a href="http://misses-cherry.blogspot.de/search/label/gen%C3%A4htes">Nähen</a></li>  
       <li><a href="http://misses-cherry.blogspot.de/p/plotter-dateien.html">Plotten</a></li>  
       <li><a href="http://misses-cherry.blogspot.de/p/blogger-anleitungen.html">Bloggen</a></li>  
      </ul>  
    </li>  
    <li><a href="http://misses-cherry.blogspot.de/2013/09/20-facts-about-me.html">About Me</a>  
      <ul>  
       <li><a href="http://misses-cherry.blogspot.de/p/kontakt.html">Impressum & Kontakt</a></li>  
      </ul>  
    </li>  
    </ul>   
    
   
   
 <div style="position: fixed; z-index: 1000; !important; top:0px; right: 50px; vertical-align:middle;">  
    
  <right>  
  <table border="0" cellspacing="0" cellpadding="2" height="32">  
   <tbody>  
   <tr height="32">  
    <td width="32"><a href="http://YOURFACEBOOK-Page" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-facebook-black.png" width="30" height="auto" valign="middle" title="Facebook"/></a></td>  
   
    <td width="32" ><a href="http://YOURINSTA-ID" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-instagram-black.png" width="30" height="auto" valign="middle" title="Instagram" /></a></td>  
   
    <td width="32"><a href="http://YOURPINTEREST-ID" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-pinterest-black.png" width="30" height="auto" valign="middle" title="Pinterest"/></a></td>  
   
    <td width="32" ><a href="http://YOURBLOGLOVIN-ID" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-bloglovin-black.png" width="30" height="auto" valign="middle" title="Bloglovin'"/></a></td>  
   
    <td width="32"><a href="http://YOURTWITTER-ID" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-twitter-black.png" width="30" height="auto" valign="middle" title="Twitter"/></a></td>  
   
    <td width="32"><a href="http://YOURG+ID" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-googleplus-black.png" width="30" height="auto" valign="middle" title="Google+"/></a></td>  
   
    <td width="32"><a href="mailto:YOUREMAIL" target='_blank'><img src="http://www.medienservice-marburg.de/Free%20Social%20Icons/Black/icon-mail-black.png" width="30" height="auto" valign="middle" title="E-Mail"/></a></td>  
   
   </tr>  
   </tbody>  
  </table>  
  </right>  
 </div>  
   
 </div>  
   
      
 <!--[if lt IE 7]><script type="text/javascript" src="iehoverfix.js"></script><![endif]-->  

Wenn du alles richtig gemacht hast, sollte das Menu nun am oberen Rand mittig angezeigt werden und beim Scrollen immer sichtbar bleiben. Probiere es gerne mal aus, als Platzhalter habe ich meine eigenen Links eingefügt, damit man es testen kann ;)


Eigene Links ins DropDown Menü einfügen

Öffne das Gadget wieder. Um dem Menü eigene Links zu verpassen, brauchen wir lediglich den ersten (oberen) Teil des grade eingefügten Gadgets (im unteren Bild rot markiert).


Erklärung Menüpunkt/Untermenüpunkt
Mit < ul > öffnet man das Menü für Menüpunkte, mit dem alleruntersten < /ul > schließt man es ab und sagt dem Code somit, dass alle Menüpunkte fertig sind, also abgeschlossen sind.

< li > öffnet einen Menüpunkt und mit < /li > schließt man diesen ab (Menüpunkt fertig).

Hat man nun Untermenüpunkte, dann werden diese in den Menüpunkt eingeschoben, also vor dem abschließenden < /li > als neues < ul > Element eingefügt, in das man dann die Untermenüpunkte mit < li > < /li > einfügt. Sind die Untermenüpunkte fertig, schließt man diese mit < /ul > bevor man den Menüpunkt mit < /li > schließt.
Ich hoffe, dass ich es anhand des Bildes unten nochmal verständlich erklären kann.


Hauptmenü: HOME, DO IT YOURSELFABOUT ME

sind die Hauptmenüpunkte (im Bild lila Markiert). Hat der Menüpunkt einen Untermenüpunkt, dann klappt dieser nur beim Drüberfahren mit der Maus aus (im Bild türkis markiert) und befindet sich innerhalb des Menüpunktes: NÄHEN, PLOTTEN, BLOGGEN sowie IMPRESSUM & KONTAKT.

HOME

besitzt keinen Untermenüpunkt, braucht es auch nicht.

DO IT YOURSELF

ersetze http://www.misses-cherry.blogspot.de mit deinem eigenen ersten Link, der Untermenüpunkte haben soll. Do it yourself ersetzt du mit dem Name des Menüpunktes, der im Menü erscheinen soll.

       Untermenü:

  • DO IT YOURSELF - UNTERMENÜPUNKT 1:
    Ersetze http://misses-cherry.blogspot.de/search/label/gen%C3%A4htes mit deinem eigenen Link, zu dem dieser Untermenüpunkt führen soll. Ersetze Nähen mit dem Name, der als 1. Untermenüpunkt angezeigt werden soll.
  • DO IT YOURSELF - UNTERMENÜPUNKT 2:
    Ersetze http://misses-cherry.blogspot.de/p/plotter-dateien.html mit deinem eigenen Link, zu dem dieser Untermenüpunkt führen soll. Ersetze Plotten mit dem Name, der als 2. Untermenüpunkt angezeigt werden soll.
  • DO IT YOURSELF - UNTERMENÜPUNKT 3:
    Ersetze http://misses-cherry.blogspot.de/p/blogger-anleitungen.html mit deinem eigenen Link, zu dem dieser Untermenüpunkt führen soll. Ersetze Bloggen mit dem Name, der als 3. Untermenüpunkt angezeigt werden soll.

ABOUT ME

Hier fährst du genauso fort: Menüpunkt bearbeiten, Untermenüpunkt bearbeiten.


Ergänzen & Löschen

Brauchst du mehr Links für dein Menü, kannst du einfach obere Zeilen kopieren und so dein Menü ergänzen. Für einen einzelnen Menüpunkt ohne Untermenüpunkt kopierst du z.B. die HOME-Zeile von einschließlich < li > bis einschließlich < /li >. Sieh dir dazu noch einmal das Bild an, die farbigen Kästen erklären es gut.

Braucht man einen weiteren Menüpunkt mit einem Untermenüpunkt, kopiert man den ganzen Inhalt des lila Kastens von < li > About me und fügt diesen über dem abschließenden < /ul > ein.

Braucht man mehrere Unterpunkte, dann kopiert man die türkisen < li > bis < /li > Zeilen und ergänzt somit das Untermenü usw.

Möchte man Menüpunkte/Untermenüpunkte entfernen, so löscht man diese einfach von < li > bis < /li >.

Bearbeitet immer nur einen Link, speichert dann und schaut im Blog, ob alles stimmt. Wenn ihr irgendwo einen kleinen Fehler habt und habt aber schon 2 oder 3 Links bearbeitet, dann ärgert ihr euch hinterher, wenn ihr von vorne anfangen müsst.

Ein Untermenüpunkt im Untermenü

Soll ein Menüpunkt einen Unterpunkt haben und dieser dann auch einen Unterpunkt, dass sieht das etwa so aus:
Den CSS-Code habe ich dafür am 6.1.2016 nochmal erneuert, wer also noch den alten hat und gerne auch mehrere Ebenen im Menü haben möchte, der ersetzt bitte den vorherigen CSS-Code einfach mit dem neuen.

Menü-Styling

Das Design des Menüs ändert man direkt im Vorlagendesigner unter CSS hinzufügen, dieser bietet manchmal leider keine zuverlässige Vorschau, deswegen öffne ich dafür meinen Blo in einem zweiten Browserfenster, um die Aktualisierung immer live zu kontrollieren.

Hinter den Stellen, die man bearbeiten kann, befinde sich jeweils eine Info
/* Zur Erinnerung: So sieht eine Info aus */
Findest du irgendwo keine dieser /* Infos */, dann lass bitte die Finger von diesem Teil des Codes und ändere dort nichts ab. Du kannst z.B. die Schriftart ändern sowie deren Größe, Farbe, Farbe beim Drüberfahren (hovern), Hintergrundfarben von Links/Tabs usw.

Beispiel:
color:#f3a8af; /* dunkelrosa - Hauptmenü/Tabs/Schriftfarbe beim drüberfahren (hovern) */
         CODE                                                    INFO DAZU

Zum obigen Beispiel: Zum Ändern der Schriftfarbe des Hauptmenülinks gibst du statt #f3a8af eine andere Farbzahl ein.

Farben kann man sich hier als Farbzahl umrechnen und diese kopieren: Colorpicker

Mehr Tipps, was man am "Styling" ändern kann, findet Ihr hier:




Bearbeiten der Network Items

Gehe wieder in dein > Layout und öffne das< HTML Gadget. Scolle bis ganz unten und du siehst die einzelnen Zeilen deiner Icons, im unteren Bild mit dem roten Pfeil markiert.


Du siehtst die Codes nun von oben nach unten in der Reihenfolge, in der sie im Blog von links nach rechts angezeigt werden. EIN Icon geht immer von <td width="32"> bis </td>. Solltest du eines der Icons nicht brauchen, so kannst du es einfach entfernen, indem du also den kompletten Icon-Code jeweils von <td width="32"> bis </td> (beides inklusive, nicht nur den Code dazwischen!) markierst und löschst.

Sollte Dir ein Icon fehlen, dann gib mir Bescheid und ich reiche es bei Gelegenheit nach ;)

Beim Einfügen der Links ist nun zu beachten, dass wirklich nur der Linktext ersetzt werden darf - alle :// oder Anführungszeichen müssen stehenbleiben!

Ersetzte nun YOURFACBOOK-Page mit deiner FB-IdYOURINSTA-ID mit deiner Instagram-ID und so weiter. Bei E-Mail ersetzt du einfach YOUREMAIL mit deiner normalen E-Mail-Adresse.

Anschließend speichern und fertig sind die Network Items/Social Icons.
Bearbeitet immer nur ein Icon, speichert dann und schaut im Blog, ob alles stimmt. Wenn ihr irgendwo einen kleinen Fehler habt und habt aber schon 2 oder 3 Links bearbeitet, dann ärgert ihr euch hinterher, wenn ihr von vorne anfangen müsst.


Sollte etwas nicht geklappt haben:

1. aktualisiert mal den Browser (F5). Wenn dann die Änderung immer noch nicht angezeigt wird, dann...
2. kontrolliert nochmal mit dem Originalcode hier im Tutorial, ob euch nicht doch vielleicht eine Klammer oder ein Gänsefüßchen o.Ä. flöten gegangen ist. Wurde der Code an der richtigen Stelle eingefügt? Stimmt eure FB-, Insta, oder Pinterest-Id?

Meist sind es nur solche Kleinigkeiten, die es nicht ganz funktionieren lassen.
Wenn es trotz allem nicht klappt , hat dein Blog mit Sicherheit schon Formatierungen, die diesen Code einfach blockieren. Zur Not kannst du hier nachfragen oder aber im Layout das Gadget einfach wieder löschen, wenn es wirklich nicht funktionieren will.

Bei Fragen

schreibt bitte hier ein Kommentar - so haben dann später alle was von meiner Antwort ;)


Viel Spaß!!




55 Kommentare

  1. Wie geil ist das denn?
    Wenn ich Zeit, Muse und einen Kreativschub habe werde ich mir das klauen :-)
    Dankeschön

    AntwortenLöschen
    Antworten
    1. Frohes neues Jahr Martina!
      Ich freu mich, wenn du mein Menü "anwendest". Klauen ist ja eigentlich falsch ausgedrückt - Es soll ja nachgemacht werden ;)

      GLG Daniela

      Löschen
  2. Dankeeeeschön! Ich suche seit Tagen nach einem guten Tutorial dafür und bei Dir hat es geklappt!!! Dankeeeee!!! Könntest Du noch ein Tutorial machen, indem Du erklärst wie man eine Slideshow unter den Header (als Postvorschau) macht? Ich bin da zu blöd für....
    Hab einen schönen Sonntag!

    AntwortenLöschen
    Antworten
    1. Frohes neues Jahr Harriet.
      Klar kann ich das, dauert aber noch ein Weilchen, weil schon einige andere Anleitungen in der Warteschleife stehen ;)

      GLG Daniela

      Löschen
  3. Alles Gute im neuen Jahr, liebe Daniela!
    Das ist ja eine tolle Anleitung, ganz herzlichen Dank!
    Wenn ich mir einen Nachmittag Zeit stehlen kann, werd ich mich damit hinsetzen ... Bin schon gespannt, ob ich es hinbekomme!
    Liebe Grüße
    Anneliese

    AntwortenLöschen
    Antworten
    1. Dir und deinen Süßen auch, liebe Anneliese ❤
      Ach klar kriegst du das hin. Ich sag immer: "Also wenn ich das schon schaffe, dann schafft's jeder." :)

      Ich Drück Euch ❤

      Löschen
  4. Frohes neues Jahr ^^
    Echt tolles Tutorial. Zwar hab ich schon ein Drop Down Menü, dennoch finde ich es cool, dass es jetzt auch eins auf Deutsch gibt. Wenn man englisch nicht gerade gut kann, ist es umso besser.

    Liebe Grüße :D

    AntwortenLöschen
  5. Liebe Daniela,
    Alles Liebd und Gute für 2016.
    Tolles Tutorial - alles was ich von Dir angewendet habe hat immer funktioniert . Danke !!
    Lg Simone

    AntwortenLöschen
  6. Hallöchen. (:

    Erst einmal vielen, vielen, vielen lieben Dank für dieses wundervolle Menü! Und die einfache Erklärung und Handhabung. (:

    Ich habe allerdings noch eine Frage. Wenn ich eine weitere Unterpunkt Liste erstellen will, öffnet sich nicht noch ein weiteres Fenster.
    Es bleibt im ersten Fenster und wird als Unterpunkt fast gar nicht erkannt.

    (Meine Challenges als Oberbegriff)
    (Hogwarts Challenge als 1. Unterpunkt)
    (Mitglieder & Punktestand als 2. Unterpunkt)

    Der zweite Unterpunkt wird direkt unter dem Challengenamen angezeigt und ich möchte lieber, dass sich da ein weiteres Fenster öffnet. Ist das noch irgendwie machbar?

    Liebe Grüße und im Voraus schon Danke für eine Antwort
    Sarah ♥

    AntwortenLöschen
    Antworten
    1. Hi Sarah,
      Danke für die Frage. Ich habe die Anleitung mal mit des Rätsels Lösung ergänzt ;)

      LG Daniela

      Löschen
    2. Vielen Dank! Das ging ja super schnell. Jetzt ist auch mein Menü perfekt. *____*

      Löschen
  7. Liebe Daniela,
    ich wünsche dir ein frohes neues Jahr :-)

    Jetzt zur Anleitung: ich suche schon seit Ewigkeiten eine Möglichkeit, ein Dropdown-Menü in meinen Blog zu integrieren doch die Anleitungen, die ich gefunden habe waren eher abschreckend. Da kommst du mal so locker easy peasy mit einem genialo Tutorial daher!?! Sehr sehr geil.
    Ich werde mich demnächst intensivst dran setzen.

    Vielen vielen Dank schonmal für deine Mühe!

    Dicken Knutsch
    Paola

    AntwortenLöschen
  8. Hallo !
    Erst mal echt geiler Beitrag ! Sowas hab ich schon lange gesucht!!
    Ich hätte allerdings ne Frage. Meine Untermenüs sind sehr zusammengepresst. Kann man die Breite etwas erweitern? Ich habe Texte wie "Gerüchteküche" im Untermenü und ich möchte gerne das das Wort gerade Horizontal angezeigt wird und nicht automatisch (falsch) getrennt und untereinander angezeigt wird. Geht das? Falls ja wie????

    Schon mal Danke ^^

    AntwortenLöschen
  9. Hallöchen Daniela.
    Genau so einen Post und so eine verständliche Anleitung habe ich immer gesucht.
    Vielen Dank, dass Du Dein Wissen teilst.
    Mein Blog sieht dank Dir nun etwas besser aus ;-)
    Nehme Dich nun in meinem Blogroll auf.

    Beste Grüße
    Sanra

    AntwortenLöschen
  10. Ein wirklich toller und hilfreicher Artikel! <3

    Ich mag deinen Blog total, weiter so!


    xx
    Vanessa
    http://www.thetrendique.com

    AntwortenLöschen
  11. Hallo Daniela!

    Da ich gerade am Planen für ein Neudesign für meinen Blog bin, bin ich dabei auf deinen gestoßen. Wirklich tolle Tutorials hast du hier! Ich denke ich werde mir davon einige abgucken und sobald es ernst wird auf meinem Blog einbinden.

    Vielen, vielen Dank für diese tollen und sehr einfach gehaltenen Tutorials!
    Bleibe gleich mal auch als Follower hier, damit ich auch in Zukunft nichts verpasse :D

    Falls sich bei mir noch Schwierigkeiten oder Fragen hierzu ergeben sollten melde ich mich noch mal ;)

    Liebe Grüße,
    Lena von Tiny Hedgehog

    AntwortenLöschen
  12. Große Klasse! Ich suche schon lange nach verständlichen Tutorials zum nachbauen, habe mich aber bisher nie an was heran getraut. Deine Tutorials sehen durch den Farbeinsatz, den hilfreichen Erklärungen und Info-Blöcken echt "easy" aus - jetzt werde ich mich auch mal herantrauen und endlich das Blogdesign nach meinen Wünschen und Anforderungen anpassen. Ich freue mich schon darauf! :)

    LG, nossy

    AntwortenLöschen
  13. Hallöchen Misses Cherry
    Ich wollte dir hier einfach mal danke sagen! Danke für die tollen Blog-Tutorials!!! Mein Blog besteht praktisch aus deinen Tipps!!! Ohne dich sähe bei mir wohl das meiste stümperhaft aus...

    Ich habe nur eine Frage: Ich habe gestern das fixierte Drop-Down Menu erstellt, jetzt funktioniert aber meine mobile Ansicht nicht mehr. D.h. Man kann da nicht zwischen den verschiedenen Menüs wechseln... kannst du mir weiterhelfen? Habe ich was falsch gemacht?

    Liebe Grüsse
    Annie

    AntwortenLöschen
    Antworten
    1. Hi Annie,

      stell doch mal einfach bei deiner Vorlage die "Mobile Ansicht" aus, dann wird der Blog (und somit auch das Menü) am Handy genauso wie am Computer angezeigt.

      Liebe Grüße
      Daniela

      Löschen
  14. Huhu,

    Nun habe ich das Menü seit einiger Zeit auf meinem Blog eingebaut und es gefällt mir sehr gut! Allerdings habe ich das Problem, dass bei verringerter Seitenbreite die Social Media-Buttons über das Menü rutschen :( Gibt es da vielleicht eine Lösung für?

    Danke schon mal für das tolle Tutorial!
    Liebste Grüße,
    Lena von Tiny Hedgehog

    AntwortenLöschen
  15. Hallöchen
    Leider passiert auf meinem Blog überhaupt nichts, wenn ich die Codes speichere. Kann das evtl. daran liegen, dass ich ein gekauftes Template installiert habe und es so blockiert wird? :( Ich hätte so gerne endlich ein Dropdown Menü. Schade!
    Liebe Grüße
    Janet

    AntwortenLöschen
    Antworten
    1. Hi Janet,

      ja, das liegt an deinem Template. Dein Menü & Searchbar sind im Code verschachtelt, sorry.

      Liebe Grüße
      Daniela

      Löschen
    2. Danke für die Antwort, Daniela. Gibt es also keine Möglichkeit das bei mir zum Laufen zu kriegen? :-(

      Löschen
    3. Schon, aber dafür sollte man wirklich richtig Ahnung vom Code, dessen Aufbau und natürlich auch vom Template haben. Ich empfehle, dort bitte nicht rum zu basteln ;)

      LG Daniela

      Löschen
  16. Dankeschön Misses Cherry, du hast mir wirklich sehr geholfen.

    LG, Bianca

    AntwortenLöschen
  17. Hallo Daniela,
    herzlichen Dank für das leicht verständliche Tutorial.
    Sowas habe ich schon lange gesucht. :-)
    Liebe Grüße
    Sigi

    AntwortenLöschen
    Antworten
    1. Habe ich gerade vergessen
      http://sigis-augenblicke.blogspot.de/

      Löschen
  18. Hallo, ich mache gerade eine Homepage für meinen Mann und deine Anleitung hat mir sehr geholfen. Die erste, die ich wirklich gut und einfach umsetzen kann. Nun wäre es noch viel schöner, wenn die ganze Zeile UNTER dem Header (ein Foto)stehen würde. Der Rest unverändert, also zentriert, fixiert, dropdown usw., nur eben unter dem Header. Kannst du mir da weiter helfen?
    Liebe Grüße
    Jutta

    AntwortenLöschen
    Antworten
    1. Liebe Jutta,

      dafür müsste ich leider den kompletten Code eurer Webseite kennen und das sprengt hier den Rahmen.

      LG Daniela

      Löschen
  19. Hallo! Erst einmal ein großes Lob für diese Anleitung. Nach einigem rumgefriemel im Testblog habe ich es einigermaßen hinbekommen. Jetzt möchte ich gerne das Menü nicht centered sondern links haben und die Social Media Buttons rechts. Wo änder ich das im CSS. Außerdem sind einige meiner Unterpunkte wie "Organisation" zu lang und werden auf zwei Zeilen gesplittet, wie kann ich das ändern? Schau mal: https://angelofberlintest.blogspot.de

    AntwortenLöschen
    Antworten
    1. So ich habe es jetzt mal im richtigen Blog www.angelofberlin.com eingefügt und würdendun gerne auch, dass die Leiste in der Mobilen Ansicht angezeigt wird. Hast Du dafür auch einen Tipp?

      Löschen
    2. Versuche bei den zu langen Untermenüpunkten bitte erstmal die Schriftart & -Größe an das Hauptmenü anzupassen. Oft reicht das schon aus.

      Auf dem Handy wird die Menüleiste nur angezeigt, wenn die mobile Ansicht im Dashboard deaktiviert ist.

      LG Daniela

      Löschen
  20. Hallo, ich möchte mich ganz herzlich für deine ausführliche Anleitung bedanken. Auf der Suche nach einem Tutorial für Dropdown Menü bin ich auf deiner Seite gestoßen und bin überglücklich. Allerdings habe ich jetzt festgestellt, dass die Kommentare zu meinen Posts nicht mehr da sind, obwohl Kommentare fregeschaltet sind. Ich sehe einfach keine Kommentarbox. Hast du eine Idee woran es liegen könnte?

    Ich bedanke mich ganz herzlich im Voraus.

    Liebe Grüße von Olvia from the Blog ;-)

    http://me-myself-mybeauty.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Hi Oivia,
      Verstehe ich jetzt nicht so ganz. Deine Kommentarbox ist doch da.

      Löschen
  21. So, jetzt hab ich es auch endlich geschafft! Bin total glücklich :D
    Es hat nun bei meinen Kenntnissen etwas über acht Stunden gedauert - ABER jetzt hab ich es - vielen lieben dank :)

    AntwortenLöschen
    Antworten
    1. WOW! Und es ist absolut perfekt geworden. Super gemacht!

      Löschen
  22. Na also, ich hab es dann auch mal geschafft. Ich stell mich aber auch manchmal blöd an. ^-^
    Danke für die liebe Erklärung und das bereitstellen des Codes. Es macht echt Freude daran herumzuprobieren.

    AntwortenLöschen
  23. Erst mal herzlichen Dank für dein wirklich gut erlärtes Tutorial. Für meine Webversion hat das alles prima geklappt. Aber wie schaffst du das, dass es dir diese Menü auch in der Mobilen Smartphone Version anzeigt? Hast du mir da einen heißen Tip? Das würde mir wirklich sehr weiterhelfen :-) Danke im Voraus. Liebe Grüße Christina

    AntwortenLöschen
    Antworten
    1. Hi Christina,

      das freut mich und es sieht echt gut aus in deinem Blog.
      Auf dem Handy wird die Menüleiste angezeigt, wenn die mobile Ansicht im Dashboard deaktiviert ist. Dann zeigt das Handy einfach ganz normal die Webversion mit Menü an.

      Die Mobile Version ist in dem Code noch nicht enthalten, vielleicht schiebe ich die aber mal hinterher, wenn ich ganz viel Zeit habe :)

      Liebe Grüße
      Dnaiela

      Löschen
    2. Hallo Daniela,
      danke für deine schnelle Antwort. Also mich würde es natürlich seeeeeehr freuen, wenn du den Code dementsprechend anpasst ;-) Ich würde das dann auf jeden Fall umsetzen. Ich bleibe an deinem Blog dran. Du machst das wunderbar. Danke :-)
      Liebe Grüße
      Christina

      Löschen
  24. Danke für deinen großartigen Blog. Endlich habe ich es geschafft ein vernünftiges und schönes Menü einzufügen.
    Ich würde mich wirklich freuen wenn du auch einen Post für Mobile Geräte machen könntest. Dort sieht mein Blog nämlich immer noch ziemlich fade aus ;)

    Und könntest du mir vielleicht verraten wie du youtube als Widget in die Menüleiste getan hast?

    Nochmal danke und 'keep up the grest work' :)

    AntwortenLöschen
    Antworten
    1. Hi Katrin,
      ich habe grade mehrere Tutorials in Arbeit und kann noch garnicht genau sagen, in welcher Reihenfolge sie dann erscheinen werden ;)

      YouTube fügst du genauso ein, wie die anderen Buttons. Such dir einfach das Icon (da gibts ja zig kostenlose Downloads für im Netz) und verwende als Link einfach die Adresszeile deines YouTube Kanals.

      Liebe Grüße,
      Daniela

      Löschen
  25. Der Post war super hilfreich! Und wie ist es mit Weheartit?
    Lg Jennifer

    AntwortenLöschen
    Antworten
    1. Kannst du genauso einfügen, wie in der Anleitung beschrieben. Einfach den Button googeln und loslegen ;)

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

    AntwortenLöschen
  27. Hey und Hallo, danke für das tolle Tutorial. Ich bin zwar erst neu auf dem Gebiet aber habe es hinbekommen dein Menü unter den header zu bekommen. War ne ganz schöne Arbeit.Kannst ja mal gucken.LG

    https://meinbuecherregalundich.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Sollte man aber eigentlich die Finger von lassen, wenn man sich nicht genau mit auskennt. deswegen ist diese Anleitung hier auch nicht aufgeführt (und bei dir sah da Menü heute Morgen auch noch anders aus als jetzt, ich hatte schon nach deinem letzten - gelöschten - Kommentar geschaut^^).

      Je nachdem, welches Template man hat, kann man sich nämlich schnell den Blog schrotten, wenn man Kleinigkeiten nicht beachtet... ;)

      Löschen
    2. Soll ich dir trotzdem mal die BLogseite schicken wo ich das Tutorial für das einstellen unter dem Header gefunden habe? Ist gerade für dich vielleicht sehr interessant. :-)

      Löschen
    3. Nein brauchst du nicht, danke *zwinker*.
      Ich weiß, wie das funktioniert, möchte das aber nicht hier auf meiner Seite haben, weil jemand, der sich gar nicht damit auskennt leicht seinen Blog abschießen kann mit solchen Spielchen - Ich habe diese Hilferufe wöchentlich in meinem Postfach, weil von irgendeiner anderen Seite Sachen ausprobiert wurden.

      Man kann das einfacher und sicherer machen, die Anleitung dauert aber noch ein Weilchen, weil ich diese Sachen anders und sicherer erkläre.

      P.S.: Im Übrigen können Admins auch gelöschte Kommentare lesen ;)


      LG Daniela

      Löschen
  28. Vielen, vielen Dank für diesen wunderbaren Post! Er ist super erklärt und sehr umfangreich! Sitze gerade selbst daran und wende es auf meinen Blog an. Wäre es möglich, wenn du ein Icon für Goodreads hinzufügst?
    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Such dir doch am besten das Icon bei Google und füge es genauso ein, wie die anderen ;)

      Löschen
  29. Hallo, ich möchte mich bedanken. Ich bin blutige Anfängerin und habe mich getraut! Dank deiner genialen Anleitung ist es auch gelungen.
    Tausend Dank!
    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Hi Birgit,
      das sieht prima aus!
      Nur müsstest du die unteren "Programmiertest"-Links noch entfernen/austauschen *zwinker*

      LG Daniela

      Löschen
  30. Liebe Daniela,

    ich bzw. wir sind erst seit kurzer Zeit dabei mit unserem Reiseblog https://passportpirates.blogspot.de.
    Irgendwie hatten wir uns die ganze Gestaltungsarbeit ein wenig leichter vorgestellt, denn bei so viel zeitaufwändiger Arbeit mit HTML und co kommt man besonders als Laie kaum noch dazu, auch mal einen neuen Beitrag zu schreiben :D

    Aber du mit deiner übersichtlich und liebevoll gestalteten Seite machst uns mit deinen tollen Tipps und Tricks Hoffnung, dass auch wir das irgendwie hinbekommen können. Danke für die vielen tollen Blog-Tutorials, die es selbst uns Anfänger ermöglichen, einn halbwegs ansehnlichen Blog auf die Beine zu stellen.
    Und vielleicht haben wir dann, mit mehr Erfahrung und ganz viel fleißiger HTML-Arbeit, irgendwann auch mal so eine wundervolle Seite, wie du.

    Alles Liebe und Tausend Dank,

    Kathi

    AntwortenLöschen
  31. Ich kann dir gar nicht genug danken, für deine tolle Vorlage und Anleitung!! Ich hab Vielen lieben Dank!!
    Vielleicht bin ich irgendwann in der Lage, mir so einen tollen 'Thanks for reading' Button zu machen. Das finde ich viel schöner und persönlicher, als nur meinen doofen Namen drunter zu schreiben :)

    Und ich finde deine Seite soooooo schön!!!! Du hast da echt super tolle Arbeit geleistet!!


    Danke!
    Ganz liebe Grüße
    Patrizia

    AntwortenLöschen

Danke für deine Nachricht!

Das könnte dich auch interessieren

Copyright

Der Inhalt dieser Seiten ist mein Eigentum und unterliegt dem deutschen Urheberrecht. Die Kopie, Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen vorab meiner schriftlichen Zustimmung.
© www.misses-cherry.de 2009-2017

Kontakt

Name

E-Mail *

Nachricht *