Improve menu.
authorAndre Noll <maan@tuebingen.mpg.de>
Sat, 11 Jan 2020 10:37:42 +0000 (11:37 +0100)
committerAndre Noll <maan@tuebingen.mpg.de>
Thu, 23 Jan 2020 14:20:40 +0000 (15:20 +0100)
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>
Introduction.m4
include/css/aple.css
include/m4/aple.m4

index 5742021..ce96e8e 100644 (file)
@@ -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»)
index 6ebecac..7b1d9d7 100644 (file)
@@ -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;
+}
index 2fc7af9..bcf5b93 100644 (file)
@@ -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