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. :D


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. :)



16 Kommentare

  1. 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!

    AntwortenLöschen
    Antworten
    1. Wenn man hier schon kritisiert, dann sollte man das nicht anonym machen...

      Löschen
    2. 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.

      Löschen
    3. 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 :D Alles ist schön strukturiert, nachvollziehbar, und mit Myriams Hilfe hab ich schon das ein oder andere geschafft und bin wirklich froh!

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

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

    AntwortenLöschen
  3. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  4. 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

    AntwortenLöschen
  5. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  6. Vielen Vielen Dank, danach hab ich schon gesucht :-)

    AntwortenLöschen
  7. 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 ;))

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

    AntwortenLöschen
  9. 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) :-)

    AntwortenLöschen
  10. 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) :-)

    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!