Improve menu.

The grey bar was not very intuitive to use, and it does not work with
all browsers. While elinks ignores the css and renders the menu at
the top of the page, at least one popular cell phone browser neither
shows the bar nor the menu, making it impossible to navigate the pages.

This commit reworks the css and html code to always show an hamburger
icon at the top left corner of the page. Moving the pointer on the
icon opens the menu.

Suggested-by: Sanja Jasek <S.Jasek@exeter.ac.uk>
Tested-by: Maša Lenuzzi <masa.lenuzzi@tuebingen.mpg.de>

diff --git a/Introduction.m4 b/Introduction.m4
index 574202103198779566afb6a7e9d6a242dadfd2f7..ce96e8e5e512589fb0bd7dc078833f63130c7332 100644 (file)
--- a/Introduction.m4
+++ b/Introduction.m4
@@ -7,8 +7,8 @@ OVERVIEW(«
        This practical training course covers basic and advanced Unix
        and Linux topics. It targets scientists, programmers and system
        administrators. Readers will find plenty of material and exercises
-       of varying difficulty. Move the pointer to the grey bar at the left
-       to open the navigation menu.
+       of varying difficulty. Move the pointer to the icon at the top left
+       corner to open the navigation menu.
 »)
 
 SECTION(«About»)

diff --git a/include/css/aple.css b/include/css/aple.css
index 6ebecacdc7103346ba5172edb76be0ebff68d49b..7b1d9d75f3b70cc8bd006dbc26f985dba099b7fe 100644 (file)
--- a/include/css/aple.css
+++ b/include/css/aple.css
@@ -32,28 +32,6 @@ svg {
        float: left;
 }
 
-#menu
-{
-       position: fixed;
-       left: -40%;
-       width: 40%;
-       top: 0%;
-       height: 100%;
-       background: #ccc;
-       margin: 0px 0px 0px 15px;
-       padding: 200% 0px 0px 0px;
-       transition: 0.5s;
-}
-
-#menu:hover {
-       top: 0em;
-       left: 0em;
-       margin: 0em 0em 0em 0em;
-       padding: 0em 15px 0em 15px;
-       background: #aaa;
-       overflow: auto;
-}
-
 #title
 {
        vertical-align: middle;
@@ -94,3 +72,20 @@ dt {
 #chapter_list {
        font-size: 120%;
 }
+
+.dropdown {
+       position: fixed;
+       top: 0; /* Position the navbar at the top of the page */
+       left: 0;
+}
+
+.dropdown-content {
+       display: none;
+       background-color: #8aa;
+       min-width: 300px;
+       padding: 12px 12px;
+}
+
+.dropdown:hover .dropdown-content {
+       display: block;
+}

diff --git a/include/m4/aple.m4 b/include/m4/aple.m4
index 2fc7af9bcb49173d70c54da9066f7a5887accf02..bcf5b93d57c77921a005f79ddc60fa70e2126524 100644 (file)
--- a/include/m4/aple.m4
+++ b/include/m4/aple.m4
@@ -78,30 +78,41 @@ define(«HEADER», «
 define(«TITLE», «
 HEADER(«$1», «$2», «$3»)
 <hr>
-<div id="menu">
-       <h3> Chapter </h3>
-       <ul id="chapter_list">
-               <li> TOC_ENTRY(«Introduction», «$2») </li>
-               <li> TOC_ENTRY(«Unix_Concepts», «$2») </li>
-               ifelse(PUBLIC(), «false», «
-                       <li> TOC_ENTRY(Command_Line_Utilities, «$2») </li>
-               »)
-               <li> TOC_ENTRY(Networking, «$2») </li>
-               <li> TOC_ENTRY(LVM, «$2») </li>
-               <li> TOC_ENTRY(«Filesystems», «$2») </li>
-               <li> TOC_ENTRY(OS-Level_Virtualization, «$2») </li>
-               ifelse(PUBLIC(), «false», «
-                       <li> TOC_ENTRY(Gridengine, «$2») </li>
-                       <li> TOC_ENTRY(Git, «$2») </li>
-                       <li> TOC_ENTRY(Bash, «$2») </li>
-                       <li> TOC_ENTRY(Debugging, «$2») </li>
-               »)
-       </ul>
-       <h4> Section </h4>
-       <ul>
+<div class="dropdown">
+<svg
+       height="35" width="30"
+       xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+       <rect fill="black" height="3" width="20" x="5" y="5" rx="2"/>
+       <rect fill="black" height="3" width="20" x="5" y="11" rx="2"/>
+       <rect fill="black" height="3" width="20" x="5" y="17" rx="2"/>
+</svg>
+       <div class="dropdown-content">
+               <h3> Chapter </h3>
+               <ul id="chapter_list">
+                       <li> TOC_ENTRY(«Introduction», «$2») </li>
+                       <li> TOC_ENTRY(«Unix_Concepts», «$2») </li>
+                       ifelse(PUBLIC(), «false», «
+                               <li> TOC_ENTRY(Command_Line_Utilities, «$2») </li>
+                       »)
+                       <li> TOC_ENTRY(Networking, «$2») </li>
+                       <li> TOC_ENTRY(LVM, «$2») </li>
+                       <li> TOC_ENTRY(«Filesystems», «$2») </li>
+                       <li> TOC_ENTRY(OS-Level_Virtualization, «$2») </li>
+                       ifelse(PUBLIC(), «false», «
+                               <li> TOC_ENTRY(Gridengine, «$2») </li>
+                               <li> TOC_ENTRY(Git, «$2») </li>
+                               <li> TOC_ENTRY(Bash, «$2») </li>
+                               <li> TOC_ENTRY(Debugging, «$2») </li>
+                       »)
+               </ul>
+               <h4> Section </h4>
+               <ul>
 divert(«1»)
 </ul>
 </div>
+</div>
 divert(«2»)
 »)
 divert(«0»)dnl