mobile menu

2026-03-10 08:21:20 +00:00 · 2019-09-24 18:32:27 +02:00
parent a754ad0e33
commit e5d69b51d3
6 changed files with 130 additions and 33 deletions
--- a/_includes/block-header-1.html
+++ b/_includes/block-header-1.html
@@ -12,6 +12,12 @@
          href="{{ nav_item.link }}">{{ nav_item.link_text }}</a></li>
      {% endfor %}
    </ul>
+    <select>
+      <option value="" selected="selected">Select</option>
+      {% for nav_item in section.navigation %}
+      <option value="{{ nav_item.link }}">{{ nav_item.link_text }}</option>
+      {% endfor %}
+    </select>
  </nav>

 </header>
--- a/_includes/block-irma-header-1.html
+++ b/_includes/block-irma-header-1.html
@@ -0,0 +1,27 @@
+  <div class="topnav" id="myTopnav">
+    <div class="block-header-1--logo">
+      <a id="logo" href="{{ section.url | relative_url }}">
+        <img src="{{ section.logo | relative_url }}" alt="{{ site.title }}">
+      </a>
+    </div>
+    <div id="menu">
+      {% for nav_item in section.navigation %}
+      <a class="refs" href="{{ nav_item.link }}">{{ nav_item.link_text }}</a>
+      {% endfor %}
+      <a id="toggle" href="javascript:void(0);" class="icon" onclick="myFunction()">
+        <img id="hamburger" src="{{ section.menu | relative_url }}" alt="Menu">
+      </a>
+    </div>
+  </div>
+
+
+  <script>
+    function myFunction() {
+      var x = document.getElementById("myTopnav");
+      if (x.className === "topnav") {
+        x.className += " responsive";
+      } else {
+        x.className = "topnav";
+      }
+    }
+  </script>
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <base href="{{ site.baseurl }}">
-    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
-    <meta name="author" content="{{ site.author }}">
-    <meta name="description" content="{{ site.description }}">
-    <link rel="stylesheet" href="/css/ubuild.css"/>
-    <link rel="stylesheet" href="/css/irma.css"/>
-  </head>
-  <body>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <base href="{{ site.baseurl }}">
+  <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+  <meta name="author" content="{{ site.author }}">
+  <meta name="description" content="{{ site.description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/css/ubuild.css" />
+  <link rel="stylesheet" href="/css/irma.css" />
+</head>
+
+<body>
--- a/css/irma.css
+++ b/css/irma.css
@@ -18,30 +18,96 @@ html {
  max-height: 4.0rem;
 }

-.block-header-1 {
-  padding: 0.5rem 2rem
-}
-
-header {
+/* Responsive navigation from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav */
+.topnav {
+  overflow: hidden;
+  background-color: #fff;
  border-bottom: 1px solid #000;
  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
  background-color: #fff;
  position: sticky;
  top: 0;
-  height: 90px
+  z-index: 999999;
 }

-.block-header-1--logo {
-  padding-right: 30px;
+.topnav a {
+  float: left;
+  color: black;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+  display: block;
 }

-.block-header-1 .nav-item {
-  font-size: 16px;
-  padding: 0.5rem 0;
-  font-size: 1.0rem
+.topnav .icon {
+  display: none;
+
 }

+#menu {
+  margin-top: 4px;
+  /* todo */
+}
+
+
+#hamburger {
+  max-height: 22px;
+  /* todo */
+}
+
+
+@media screen and (min-width: 600px) {
+  #menu {
+    float: right;
+    display: flex;
+    min-height: 90px;
+    align-items: center;
+  }
+}
+
+
+@media screen and (max-width: 600px) {
+  .topnav {
+    position: static;
+  }
+
+  .topnav .refs {
+    display: none;
+  }
+
+  .topnav a.icon {
+    float: right;
+    display: block;
+    margin-top: 22px;
+    /* todo */
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .topnav.responsive {
+    position: relative;
+  }
+
+  .topnav.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+
+  #menu a:not(#toggle):hover {
+    background-color: #ddd;
+  }
+}
+
+
 /* Scroll adjustment to make up for sticky header */
 .destination {
  position: absolute;
@@ -129,17 +195,10 @@ ul,
  color: #000000;
 }

-#myTopnav {
-  display: none;
-}

 /* Adjusting the size of elements */

@media screen and (min-width:700px) {
-  #myTopnav {
-    display: block;
-  }
-
  .block-hero-2 .column.text {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
--- a/index.md
+++ b/index.md
@@ -1,13 +1,15 @@
 ---
 layout: blocks
-title: Homepage
+title: IRMA app
 lang: en
 lang-ref: index
 date: 2017-11-22T23:00:00.000+00:00
 page_sections:
 - template: navigation-header
-  block: header-1
+  block: irma-header-1
  logo: "/uploads/non-free/irma_logo@1x.png"
+  menu: "/uploads/non-free/navigation-menu.png"
+  url: "/"
  navigation:
  - link: "/"
    link_text: IRMA
--- a/uploads/non-free/navigation-menu.png
+++ b/uploads/non-free/navigation-menu.png