Simplified CSS menu code

samdutton · May 4, 2018 · df6bcd4 · df6bcd4
1 parent 59ef883
commit df6bcd4
Showing 1 changed file with 95 additions and 72 deletions.
diff --git a/cssmenu/index.html b/cssmenu/index.html
@@ -20,89 +20,112 @@
 
 <head>
 
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    window.dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-  gtag('config', 'UA-33848682-1');
-</script>
-
-<meta charset="utf-8">
-<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
-<meta name="author" content="//samdutton.com">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
-<meta itemprop="image" content="/images/icons/icon192.png">
-<meta id="theme-color" name="theme-color" content="#fff">
-
-<link rel="icon" href="/images/icons/icon192.png">
-
-<base target="_blank">
-
-<title>CSS-only menu</title>
-
-<link rel="stylesheet" href="../css/main.css">
-
-<style>
-menu a {
-  display: block;
-  line-height: 2em;
-}
-.onclick-menu {
-  outline: none;
-  position: relative;
-  display: inline-block;
-}
-.onclick-menu:focus {
-  pointer-events: none;
-}
-menu {
-  background-color: white;
-  margin: 0;
-  opacity: 0;
-  padding: 20px 20px 10px 0;
-  position: absolute;
-  transition: visibility 0.5s;
-  visibility: hidden;
-  width: 60px;
-  z-index: 1;
-}
-.onclick-menu:focus menu {
-  opacity: 1;
-  pointer-events: auto;
-  visibility: visible;
-}
-.onclick-menu svg {
-  height: 25px;
-  cursor: pointer; 
-  width: 25px;
-}
-</style>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      window.dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'UA-33848682-1');
+  </script>
+
+  <meta charset="utf-8">
+  <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
+  <meta name="author" content="//samdutton.com">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
+  <meta itemprop="image" content="/images/icons/icon192.png">
+  <meta id="theme-color" name="theme-color" content="#fff">
+
+  <link rel="icon" href="/images/icons/icon192.png">
+
+  <base target="_blank">
+
+  <title>CSS-only menu</title>
+
+  <link rel="stylesheet" href="../css/main.css">
+
+  <style>
+    menu a {
+      display: block;
+      line-height: 2em;
+    }
+
+    menu div {
+      background-color: white;
+      margin: 0;
+      opacity: 0;
+      padding: 20px 20px 10px 0;
+      position: absolute;
+      transition: visibility 0.5s;
+      visibility: hidden;
+      width: 60px;
+      z-index: 1;
+    }
+
+    menu:focus div {
+      opacity: 1;
+      pointer-events: auto;
+      visibility: visible;
+    }
+
+    menu {
+      outline: none;
+      position: relative;
+      display: inline-block;
+      padding: 0
+    }
+
+    menu:focus {
+      pointer-events: none;
+    }
+
+    menu svg {
+      height: 25px;
+      cursor: pointer;
+      width: 25px;
+    }
+    menu svg#close {
+      display: none;
+    }
+    menu:focus svg#close {
+      display: block;
+    }
+    menu:focus svg#open {
+      display: none;
+    }
+  </style>
 
 </head>
-  
+
 <body>
-  
+
   <div id="container">
-
-    <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> CSS-only menu</h1>
 
-    <div tabindex="0" class="onclick-menu">
-      <svg>
+    <h1>
+      <a href="../index.html" title="simpl.info home page">simpl.info</a> CSS-only menu</h1>
+
+    <menu tabindex="0">
+      <svg id="open">
+        <title>Open menu</title>
         <path d="M0 0h24v24H0z" fill="none" />
         <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-      </svg>      
-      <menu>
+      </svg>
+      <svg id="close">
+        <title>Close menu</title>
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+        <path d="M0 0h24v24H0z" fill="none" />
+      </svg>
+      <div>
         <a href="../index.html">About</a>
         <a href="../index.html">Contact</a>
         <a href="../index.html">FAQ</a>
         <a href="../index.html">Terms</a>
-      </menu>
-    </div>
+      </div>
+    </menu>
 
     <p>Morbi porttitor posuere massa, nec facilisis eros malesuada a. Vestibulum pharetra vestibulum sapien non dapibus. Nam
       eu massa sit amet dolor mattis egestas id in ante. Praesent hendrerit diam ac leo consequat facilisis non ut ipsum.