From 1c808a8091f078b71884cf58c8006abfd61a7dba Mon Sep 17 00:00:00 2001 From: Andre Noll Date: Sat, 11 Jan 2020 11:37:42 +0100 Subject: [PATCH] Improve menu. MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit 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 Tested-by: Maša Lenuzzi --- Introduction.m4 | 4 ++-- include/css/aple.css | 39 ++++++++++++++------------------ include/m4/aple.m4 | 53 ++++++++++++++++++++++++++------------------ 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/Introduction.m4 b/Introduction.m4 index 5742021..ce96e8e 100644 --- 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 6ebecac..7b1d9d7 100644 --- 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 2fc7af9..bcf5b93 100644 --- a/include/m4/aple.m4 +++ b/include/m4/aple.m4 @@ -78,30 +78,41 @@ define(«HEADER», « define(«TITLE», « HEADER(«$1», «$2», «$3»)
-