Tipps & Tutorials, tutorial

Wie erstelle ich ein Menu: Responsives 1-Level-Menu (Teil 10)

Hallo zusammen 🙂

Hier ist mal wieder Myri und ich möchte euch heute ein einfaches responsives Menü vorstellen. Und damit ihr sehen könnt, wie das Ergebnis aussieht, habe ich ein klitzekleines (tonloses) Video für euch, was euch das Ergebnis gleich mal demonstriert.

1. Das Template

Okay, damit das ganze funktioniert und Sinn ergibt, braucht ihr natürlich erstmal ein responsives Template. Ich habe schon mehrere Tutorials geschrieben, wie ihr ein responsives Template selber schreiben könnt (I, II, III) falls ihr euch das aber nicht zutraut, kann ich auch noch ein paar frei von mir zur Verfügung gestellte Templates verlinken. Diese erfordern ein bisschen Codearbeit, aber zu Weihnachten habe ich Minima Responsive geschrieben, welches komplett mit dem Vorlagendesigner personalisierbar ist und keinerlei Kenntnisse – was Code angeht – erfordert. Dieses Template habe ich für dieses Tutorial verwendet und dieses empfehle ich jetzt einfach mal.
Also ladet euch das Template herunter und installiert es auf eurem Blog.

Dieses Tutorial kann zwar eigentlich nicht euren Code kaputt machen, ich würde es trotzdem in einem Testblog ausprobieren, ehe es auf den Blog kommt, aber das ist in diesem Fall nicht dringend.

2. HTML

Zu Beginn, der HTML-Code. Das ganze ist eine Navigation, also beginnen wir mit nav-tags in die wir einen Liste packen, deren Punkte Links sind.

Der Aufbau eines Menüpunktes sieht wie folgt aus:

<li><a href="URL">LINKTEXT</a></li>

Diese Listenpunkte kommen in beschriebenes Markup:

<nav class="barmenu">
    <ul>
        <li><a href="http://bekreatief.blogspot.com">Home</a></li>
        <!-- [...] -->
    </ul>
</nav>

Was noch fehlt ist der “Menu”-Text mit dem Pfel, den man sehen soll, sobald das Menü einklappt und über das man hovern muss, um das Dropdown zu betätigen.
Das kommt jetzt noch hinzu.

Unser fertiger Code sieht also so aus:

<nav class="barmenu">
    <ul>
        <li class='hidden'><span style='opacity: 0.5'>&#8595;</span> Menu</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Follow</a></li>
    </ul>
</nav>

Jetzt können wir zur CSS übergehen.

3. Das Dropdown

Wie immer bei etwas, das responsive sein soll, arbeitet man sich hoch, man beginnt also bei der kleinen Version. In unserem Sinne: das Dropdown.
Wir beginnen also damit, das wir das Dropdown definieren. Die CSS ist so geschrieben, das solche Dinge wie Schriftart und Farbe durch den Vorlagendesigner definiert werden. Was allerdings in der CSS vorhanden ist, ist die Hintergrundfarbe des Dropdowns, sowie hover-Farbe und Balkenhintergrund beim hover. Entsprechende Stelllen markiere ich mit Kommentaren.

.barmenu{
    width: 100%; 
    position: relative;
    top: 0;
    left: 0; 
    padding: 5px 0px; 
    z-index: 10; 
}

.barmenu ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.barmenu li {
    margin: 0 5px 5px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.barmenu a {
    padding: 3px 6px;
    text-decoration: none;
    line-height: 100%;
}

.barmenu .hidden{
    display: none; 
}

.barmenu a:hover {
    color: #2e2e2e; /* Schriftfarbe bei hover */
    background: rgba(0,0,0,.1); /* Balkenhintergrundfarbe bei hover */
}

.barmenu {
    position: relative;
    min-height: 40px;
    font-size: 150%; 
} 
    
.barmenu ul {
    width: 180px;
    padding: 5px 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFFFF0; /* Hintergrundfarbe DropDown */
    z-index: 10; 
}

.barmenu li {
    display: none;
    margin: 0;
}
 
.barmenu .hidden {
    display: block; 
}
 
.barmenu a {
    display: block;
    padding: 5px;
    text-align: left;
}

.barmenu ul:hover li {
    display: block;
    margin: 0 0 5px;
}

.barmenu ul {
    left: 50%;
    margin-left: -90px;
}

Nach diesem Schritt steht schon die mobile Ansicht. 😀

4. Das Barmenu

Als nächstes die CSS, die für das Menü verwendet wird. Ein Teil davon ist schon in der oberen CSS drin, das ist der Teil, der gleich ausserhalb der Media Queries stehen wird, also nicht verwirrt sein.

.barmenu{
    width: 100%; 
    position: relative;
    top: 0;
    left: 0; 
    padding: 5px 0px; 
    z-index: 10; 
}

.barmenu ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.barmenu li {
    margin: 0 5px 5px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.barmenu a {
    padding: 3px 6px;
    text-decoration: none;
    line-height: 100%;
}

.barmenu .hidden{
    display: none; 
}

.barmenu{
    text-align: center; 
}

.barmenu a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.35em;
}

.barmenu a:hover,
.barmenu a:focus {
    text-decoration: none;
}

.barmenu a:before,
.barmenu a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.barmenu a:after {
    width: 40px;
    height: 40px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.barmenu a:hover:before,
.barmenu a:hover:after,
.barmenu a:focus:before,
.barmenu a:focus:after {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

5. Media Queries

Und nun kommen wir zu den Media Queries. Hie wird definiert, wann gewechselt wird. Also ab welchem Punkt das Dropdown angezeigt wird. Bei mir habe ich eine Breite von 700px definiert. Die ganze CSS sieht dann also so aus:

.barmenu{
 width: 100%; 
 position: relative;
 top: 0;
 left: 0; 
 padding: 5px 0px; 
    z-index: 10; 
}

.barmenu ul {
 margin: 0;
 padding: 0;
 text-align: center;
}

.barmenu li {
 margin: 0 5px 5px 0;
 padding: 0;
 list-style: none;
 display: inline-block;
}

.barmenu a {
 padding: 3px 6px;
 text-decoration: none;
 line-height: 100%;
}

.barmenu .hidden{
 display: none; 
}

@media screen and (max-width: 700px) {
 .barmenu a:hover {
  color: #2e2e2e;
  background: rgba(0,0,0,.1);
 }

 .barmenu {
  position: relative;
  min-height: 40px;
  font-size: 150%; 
 } 
    
 .barmenu ul {
  width: 180px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFFFF0; 
  z-index: 10; 
 }

 .barmenu li {
  display: none;
  margin: 0;
 }
 
 .barmenu .hidden {
  display: block; 
 }
 
 .barmenu a {
  display: block;
  padding: 5px;
  text-align: left;
 }

 .barmenu ul:hover li {
  display: block;
  margin: 0 0 5px;
 }

 .barmenu ul {
  left: 50%;
  margin-left: -90px;
 }
}

@media screen and (min-width: 699px) {
    .barmenu{
        text-align: center; 
    }

    .barmenu a {
        position: relative;
        display: inline-block;
        outline: none;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.35em;
    }

    .barmenu a:hover,
    .barmenu a:focus {
        text-decoration: none;
    }

    .barmenu a:before,
    .barmenu a:after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70px;
        height: 70px;
        border: 2px solid rgba(0,0,0,0.1);
        border-radius: 50%;
        content: '';
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
        transform: translateX(-50%) translateY(-50%) scale(0.2);
    }

    .barmenu a:after {
        width: 40px;
        height: 40px;
        border-width: 6px;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
        transform: translateX(-50%) translateY(-50%) scale(0.8);
    }

    .barmenu a:hover:before,
    .barmenu a:hover:after,
    .barmenu a:focus:before,
    .barmenu a:focus:after {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
        -moz-transform: translateX(-50%) translateY(-50%) scale(1);
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

6. Einbau

Der Einbau ist sehr simpel. In Minima Responsive gibt es unter der Template-Ansicht einen Balken, der extra für Navigationen vorgesehen ist, wenn das Menu also über den Vorlagendesigner gestaltet werden soll, dann fügt das HTML-Gadget dort ein.

Der Inhalt des Gadgets ist die HTML sowie die CSS in Style-Tags.

<nav class="barmenu">
    <ul>
        <li class='hidden'><span style='opacity: 0.5'>&#8595;</span> Menu</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Follow</a></li>
    </ul>
</nav>

<style>
.barmenu{
 width: 100%; 
 position: relative;
 top: 0;
 left: 0; 
 padding: 5px 0px; 
    z-index: 10; 
}

.barmenu ul {
 margin: 0;
 padding: 0;
 text-align: center;
}

.barmenu li {
 margin: 0 5px 5px 0;
 padding: 0;
 list-style: none;
 display: inline-block;
}

.barmenu a {
 padding: 3px 6px;
 text-decoration: none;
 line-height: 100%;
}

.barmenu .hidden{
 display: none; 
}

@media screen and (max-width: 700px) {
 .barmenu a:hover {
  color: #2e2e2e;
  background: rgba(0,0,0,.1);
 }

 .barmenu {
  position: relative;
  min-height: 40px;
  font-size: 150%; 
 } 
    
 .barmenu ul {
  width: 180px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFFFF0; 
  z-index: 10; 
 }

 .barmenu li {
  display: none;
  margin: 0;
 }
 
 .barmenu .hidden {
  display: block; 
 }
 
 .barmenu a {
  display: block;
  padding: 5px;
  text-align: left;
 }

 .barmenu ul:hover li {
  display: block;
  margin: 0 0 5px;
 }

 .barmenu ul {
  left: 50%;
  margin-left: -90px;
 }
}

@media screen and (min-width: 699px) {
    .barmenu{
        text-align: center; 
    }

    .barmenu a {
        position: relative;
        display: inline-block;
        outline: none;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.35em;
    }

    .barmenu a:hover,
    .barmenu a:focus {
        text-decoration: none;
    }

    .barmenu a:before,
    .barmenu a:after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70px;
        height: 70px;
        border: 2px solid rgba(0,0,0,0.1);
        border-radius: 50%;
        content: '';
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
        transform: translateX(-50%) translateY(-50%) scale(0.2);
    }

    .barmenu a:after {
        width: 40px;
        height: 40px;
        border-width: 6px;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
        transform: translateX(-50%) translateY(-50%) scale(0.8);
    }

    .barmenu a:hover:before,
    .barmenu a:hover:after,
    .barmenu a:focus:before,
    .barmenu a:focus:after {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
        -moz-transform: translateX(-50%) translateY(-50%) scale(1);
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}
</style>

Speichern und das Menü sollte fertig sein.

Abschliessende Worte

Und das ist es, ein einfaches 1-Level-Menü, das responsive ist und meiner Meinung nach funktionaler und ansprechender ist, als die mobile Ansicht, die Blogger-Seitenlisten bieten.
Wie immer stehe ich bei Fragen zur Verfügung und antworte auf Kommentare. 🙂

14 Comments

  1. Anonym

    29. December 2013 at 10:23

    1) Ich finde es gut, dass hier mal wieder sinnvoller Content produziert wird
    2) Der Post ist meiner Meinung nach schlecht erklärt. Es wird kurz der Code hingehauen, 2 Sätze dazu gesagt und basta. Es kommt mir immer so vor, als würdest du nur zeigen wollen, was du kannst. Das ist schade!
    3) Ich finde das Dropdown eher ungünstig, da das Menü beim Ausklappen Teile des Textes überdeckt und dabei noch rechts/links was vom Post zu sehen ist. Ist nicht wirklich benutzerfreundlich. Vielleicht hier das Menü genauso breit machen wie der Posting-Bereich und die Unterkante deutlich vom Content abgrenzen (box-shadow, border, andere Farbe,…). Ist wesentlich angenehmer für's Auge.

    Trotz allem DANKE Myri, dass du dieser ewigen non-sense-bloggerei ein Ende bereitet hast!

    1. Flottelotta Blau

      29. December 2013 at 17:12

      Wenn man hier schon kritisiert, dann sollte man das nicht anonym machen…

    2. Myriam Kreatief

      29. December 2013 at 18:39

      Wenn du meine anderen Tutorials kennen würdest, dann wüsstest du, dass es mir nicht darum geht zu zeigen was ich kann. Da es sich hier um ein Tutorial von Level 3 handelt und ich diese Art von HTML und CSS einem Level 2 zuordne, sehe ich keinen Bedarf weiter zu erläutern, als nötig ist, mir wurde oft genug gesagt, dass ich zu lang und breit erkläre, also gehe ich auf dieses Feedback ein.
      Die Hintergrundfarbe ist frei wählbar, wenn jemand findet, dass es sich nicht genug abhebt, kann er gerne die Farbe ändern und auch die Breite anpassen. Ich gebe keine fertige Lösung an, die man nicht mehr personalisieren darf sondern eine Version, die mich am meisten anspricht.

    3. Natascha Haubner

      16. October 2014 at 21:16

      Um mich auch mal kurz dazu zu äußern:

      Myriam macht das super, sie nutzt ihre Freizeit, um Neulingen oder uns komplett überforderten HTML/CSS Nichtskönnern das ganze zu erklären. Und das auch noch so, dass selbst ICH es verstehe! Und langsam auch dazu lerne 😀 Alles ist schön strukturiert, nachvollziehbar, und mit Myriams Hilfe hab ich schon das ein oder andere geschafft und bin wirklich froh!

  2. Flottelotta Blau

    29. December 2013 at 17:10

    Liebe Myri, lieben Dank, du hast das wieder toll erklärt! Danke für das Tutorial! LG Lotta.

  3. Anonym

    3. January 2014 at 3:21

    Hey!
    Super easy, danke!
    Wie ist es, wenn ich Unterpunkte bei manchen haben will?

    Und.. warum sieht euer Kommentarbereich hier so schön aus, wie macht ihr das? 🙂

    LG Liz

    1. Myriam Kreatief

      3. January 2014 at 11:28

      Das ist ein 1-Level-Menu, also keine Unterpunkte. Wenn du ein responsives Menü mit Unterpunkten haben willst, sieh dir mal Dieses Tutorial an.

      Und wie man Kommentare styled, kannst du hier nachlesen ^^

      Grüsse
      Myri

  4. MsBuchfreak

    11. January 2014 at 16:59

    Hach genau das, nachdem ich gesucht habe, nur lässt sich das für mich schwer anwenden, weil mein Ausgangsmenü ein Sidebarmenü ist, das ich ungern aufgeben würde. Kann so etwas auch für ein Sidebarmenü machen? 🙂

    LG Celine

  5. Majka

    31. January 2014 at 0:41

    bei der Minima Responsive krieg ich irgendwie keine sidebar hin.
    ist das so gewollt, weil auf den demos sieht es schon nach welchen aus

    ♥♥♥
    lg,
    Majka

    1. Myriam Kreatief

      2. February 2014 at 10:47

      Du musst die Widgets in die unterste Box ziehen. Da das Template responsive ist und bei der Grösse der Box-Ansicht die Widgets unterhalb des Hauptteils liegen, musst du sie dort hinziehen, das äussert sich dann ab der richtigen Breite in einer Sidebar.

      Liebe Grüsse
      Myri

  6. LovisiLeni

    14. February 2014 at 7:15

    Vielen Vielen Dank, danach hab ich schon gesucht 🙂

  7. Hermine on walk

    10. April 2014 at 15:34

    Hey Leute !! Ich brauche dringend Hilfe …Ich hab gerade das Template auf meinem Blog installiert und jetzt schaut alles ganz komisch aus ;( Wie kann man wieder rückgängig machen bzw. löschen ??
    Vielen Vielen Dank für Hilfe ;))

  8. Vjosa Maxhuni

    8. January 2016 at 10:11

    Super Tutorial, hat sofort geklappt! Aber wie schaffe ich es meine Posts so zu schreiben, dass diese in eines der Menüspalten zu sehen ist? (zum Beispiel, dass man auf "about" klickt und dann ist etwas "über mich" zu sehen) 🙂

  9. Vjosa Maxhuni

    8. January 2016 at 10:35

    Super Tutorial, hat sofort geklappt! Aber wie schaffe ich es meine Posts so zu schreiben, dass diese in eines der Menüspalten zu sehen ist? (zum Beispiel, dass man auf "about" klickt und dann ist etwas "über mich" zu sehen) 🙂

Leave a Reply