Responsive 1-Level Menu ✤✤(✤)

Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.

A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.

See the Pen responsive 1-Level Menu by Myri (@bekreatief) on CodePen.

English Deutsch

Um die responsive Version zu sehen, schiebt euer Browserfenster zusammen oder verändert die Variable $menu_collapse in einem Wert der grösser ist als eure Browserbreite.

To see the responsive version, just resize your browser window or change the variable 1menu_collapse into something bigger than your screen resolution.

Markup

Das markup ist simpel. Einfach eine Navigation der Links platziert werden. Für den responsiven Teil brauchen wir noch Triggerliks zum schliessen und öffnen der Navigation. Wir platzieren zwei davon. Einen innerhalb des Menüs und einen ausserhalb. Diese versehen wir dann mit icons. Ich verwende dafür Font Awesome.

The markup is simple. Just a nav in which we place some links. Also we need some triggering for the responsive part, so I did add two toggles. One within the nav and one outsiet of it. And then I just used some icons for it. I used Font Awesome for that.

    <a href='#menu' class="toggle_link">
        <i class="fa fa-navicon"></i> Menu
    </a>
    <nav class="main_menu" id="menu">
        <a href='#menu' class="toggle_link">
            <i class="fa fa-close"></i>
        </a>
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
        <a href="#">Item 4</a>
        <a href="#">Item 5</a>
    </nav>

JS

Was Javascript angeht schreiben wir etwas jquery, das unserem menu die Klasse active gibt, wenn wir den toggle-link klicken. Stellt aber sicher, dass ihr jQuery in eurer Seite integriert habt.

For the javascript we just write a little jQuery to give our menu the class active once the toggle link is clicked. Make sure to integrate jQuery for this.

$(document).ready(function () {
    $(".toggle_link").click(function () {
        $("#menu").toggleClass("active");
    });
});

Sass

Für die Styles verwenden wir flexbox. So müssen wir bloss die eine zeile ändern und unsere Menupunkte sind untereinander. Das Menu verstecken wir mit einer transform. Wenn das dann active ist, transformieren wir das Menu erneut, indem wir es in den content "reinschlittern" lassen.

For the styles we use flexbox, so we only have to change one line and the menu items are underneath each other. in responsive mode we hide the menu with a transform. And once the active class is triggered, it will slide back in.

$menu_collapse: 500px;

.main_menu{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
      
    @media screen and (min-width: $menu_collapse){
        flex-direction: row;
        justify-content: space-between;
        max-width: 800px;
        .toggle_link{
            display: none;
        }
    }

    @media screen and (max-width: $menu_collapse){
        flex-direction: column;
        justify-content: flex-start;
        background: darken(white, 10%);
        z-index: 100;
        width: 320px;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        transition: .3s all linear;
        box-sizing: border-box;
        padding: 10px;
        transform: translateX(-320px);

        &.active{
            transform: translateX(0px);
        }
        .toggle_link{
            align-self: flex-end;
        }
    }
}

.toggle_link{
    @media screen and (min-width: $menu_collapse){
        display: none;
    }
}

CSS

Die entstandene CSS sieht dann wie folgt aus:

The compiled CSS will look as follows:

.main_menu {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 500px) {
  .main_menu {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 800px;
  }
  .main_menu .toggle_link {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .main_menu {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background: #e6e6e6;
    z-index: 100;
    width: 320px;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: .3s all linear;
            transition: .3s all linear;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    padding: 10px;
    -webkit-transform: translateX(-320px);
        -ms-transform: translateX(-320px);
            transform: translateX(-320px);
  }
  .main_menu.active {
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);
  }
  .main_menu .toggle_link {
    -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
  }
  .toggle_link {
    display: none;
  }
}