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