twigfiddle.com - Responsive Pure-CSS Menu

File

<!DOCTYPE html>
<html>
  <head>
{% block HEAD %}
  <title>{{ head.title }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
{% include "w3x.css.twig" %}
  </style>
{% endblock %}
  </head>
    <body>
{% block MENU %}
{% include "responsive_menu.twig" %}
{% endblock %}
        <h1>{{ head.title|e }}</h1>
        <img src="https://www.w3schools.com/images/colorpicker.gif">
        <p>{{ a_variable }}</p>
    </body>
</html>

File

/* michas menu extension */
.w3-css-menu a{text-decoration:none}
.w3-css-menu-content{padding:0px;margin:0px}
.w3-css-menu-hide,.w3-css-menu-show{display:none}
.w3-css-menu:target .w3-css-menu-content li{clear:left}
@media (max-width:600px){
  .w3-css-menu-hide,.w3-css-menu-show{display:block}
  .w3-css-menu-show{display:block;position:absolute;left:0px;z-index:1}
  .w3-css-menu:target .w3-css-menu-show{z-index:-1}
  .w3-css-menu-content {display:none}
  .w3-css-menu:target .w3-css-menu-content {display:block}
}
/* end michas menu extension */

File

<nav id="main-menu" class="w3-css-menu w3-bar w3-green">
      <a href="#main-menu" class="w3-css-menu-show"><div class="w3-button">���</div></a>
      <a href="#" class="w3-css-menu-hide"><div class="w3-button">���</div></a>
      <ul class="w3-css-menu-content w3-bar w3-animate-opacity">
        <li class="w3-bar-item w3-button"><a href="#home">Home</a></li>
        <li class="w3-bar-item w3-button"><a href="#google">Google</a></li>
      </ul>
    </nav>

Format

head:
    title: Michas Twig-Mülltemplate
navigation:
    1:
        href: http://www.michas-schrottseite.de
        caption: Schrott
    2:
        href: http://www.michas-muellseite.de
        caption: Müll
a_variable: Hallo Welt!