From 25bfc8d9a12a578e8b8315302f3b6cb931326f81 Mon Sep 17 00:00:00 2001 From: example Date: Sun, 6 Feb 2022 01:47:08 +0100 Subject: [PATCH] variante mit der pseudoklasse :target zum bedienen des menus --- index.html | 167 ++++++++++++++------------------ style.css | 275 ++++++++++++++++++++++------------------------------- 2 files changed, 186 insertions(+), 256 deletions(-) diff --git a/index.html b/index.html index 32f9349..03cb9a0 100644 --- a/index.html +++ b/index.html @@ -27,90 +27,63 @@ - Zum Inhalt springen + - - -
- -
- -
C
-
l
-
o
-
s
-
e
-
d
-
-
- - - -
+
-
-

kraut.space

-
-
- - - - -
+
+

+

+
+
+

+ Menu +

+ + +
-
+ - + @@ -259,7 +239,7 @@

@@ -379,4 +359,5 @@ + diff --git a/style.css b/style.css index 887f70e..5c54fb5 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,10 @@ -/* style.css für kraut.space */ +/* file: style3.css + * date: 2022-02-06 + * user: bernd@nr18.space + */ -/********** allgemein ***************************/ -/************************************************/ +/*** general ***/ * { padding: 0; @@ -13,10 +15,10 @@ html, body { margin: 0; - font-size: 100%; color: #333333; background-color: #ffffff; - line-height: 150%; + font-size: 100%; + line-height: 1.5; } body { @@ -34,22 +36,26 @@ ul.indent { } a { - color: #333333; - text-decoration: underline 1px dotted #333333; + color: inherit; + text-decoration: none; } -div.center-content { - margin: 0 auto; -} - -div.max-width { - max-width: 75em; +a:hover, a:focus { + text-decoration: underline; } .hidden, hr { display: none; } +.center-content { + margin: 0 auto; +} + +.max-width { + max-width: 72em; +} + .flex-box-row { display: flex; flex-direction: row; @@ -57,158 +63,76 @@ div.max-width { } .flex-box-column { - display: table; /* fallback IE<9 */ display: flex; flex-direction: column; justify-content: space-between; } -main section { - padding-left: 1em; -} +/*** head with navigation menu ***/ -/**** fixed elements ****************************/ -/************************************************/ - -/**** space status ****/ - -div#space-status-div { - position: fixed; - top: 0; - left: 0; - width: 3em; - height: 3em; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 1.5em; - border-bottom-right-radius: 1.5em; - overflow: hidden; - background-color: #ffffff; - z-index: 10; - display: none; -} - -div#space-status-div:hover { - height: 12em; -} - - -/**** fixed header ****/ - -div#head-fix { +header { position: fixed; top: 0; left: 0; width: 100%; - background-color: #ffffff; - box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8); + color: #ffffff; + background-color: #333333; + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.6); + z-index: 50; +} + +div#headline { + padding: 0 1em 0 1em; +} + +a#banner:hover, +a#banner:focus { + text-decoration: none; +} + +nav#menu { + /* 'height: 100%' geht nur mit 'position: fixed'. mit 'position: absolute' + * wird nur der teil innerhalb der headline angezeigt. dann muß 'height: + * 100%' entfernt werden und das menu nimmt sich den platz, den es + * braucht. */ + position: fixed; + top: 0; + right: 0; + height: 100%; + display: none; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; + padding: 0 1em 2em 2em; +} + +nav#menu ul { + margin: initial; + padding: 0; + text-align: right; +} + +nav#menu li { + padding: 1em; + border-top: 1px solid #999999; +} + +nav#menu a { + color: #ffffff; +} + +/* changed by clicking menu button */ + +nav#menu:target { + display: flex; + overflow-x: hidden; + overflow-y: scroll; + background: black; + background: rgba(50, 50, 50, 0.85); z-index: 100; } -#headline { - margin: 0; - padding: 1em; - align-items: center; -} - -header { - align-self: flex-start; - flex-grow: 1; -} - -h1 { - margin: 0; - padding: 0; -} - -/**** fixed navigation ****/ - -nav { - height: 100%; - align-items: flex-end; - flex-grow: 2; -} - -label#responsiv-navi-label { - width: 1.5em; - height: 1.5em; - display: flex; - cursor: pointer; -} - -input#responsiv-navi-checkbox { - display: none; -} - -div#hamburger { - width: 100%; - height: 100%; - justify-content: space-around; -} - -.hamburger-scheibe { - width: 100%; - height: 20%; - background-color: #333333; -} - -/* -#hamburger-menu:after { - content: 'Menu'; - position: absolute; - top: 0; - right: 0; -} -*/ - -ul#navigation-menu { - justify-content: space-between; - align-items: flex-end; - list-style: none; - display: none; - margin: 0; - padding: 0; - z-index: 5; -} - -ul#navigation-menu > li { - padding: 0.5em 0 0 0; - z-index: 5; -} - -ul#navigation-menu li a { - color: inherit; -} - -#responsiv-navi-checkbox:checked ~ ul#navigation-menu { - display: flex; -} - - -/**** go-to-top ****/ - -div#go-to-top { - position: fixed; - right: 2%; - bottom: 2%; - width: 2em; - height: 2em; - border-radius: 0.5em; - background-color: #ffffff; - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); - z-index: 10; -} - -img#to-top { - width: 100%; - height: 100%; - padding: 0; -} - - -/**** flexible elements *************************/ -/************************************************/ /**** startimage ****/ @@ -282,7 +206,7 @@ ul.aside { footer { padding: 0 5% 10% 5%; color: #ffffff; - background-color: #333333; + background-color: rgba(0, 0, 0, 0.85); } div#footer { @@ -301,31 +225,56 @@ a.link-footer { } -/**** media querys ******************************/ -/************************************************/ +/**** go-to-top ****/ -@media only screen and (min-width: 680px) { +div#go-to-top { + position: fixed; + right: 2%; + bottom: 2%; + width: 2em; + height: 2em; + border-radius: 0.5em; + background-color: #ffffff; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); + overflow: hidden; + z-index: 10; +} - label#responsiv-navi-label { +img#to-top { + width: 100%; + height: 100%; + padding: 0; +} + + +/* media query für breitere screens */ +/************************************/ + +@media screen and (min-width: 768px) { + + a#open-menu { display: none; } - ul#navigation-menu { + nav#menu { + position: relative; display: flex; flex-direction: row; + margin: 0; + padding: 0; } - ul#navigation-menu li { - padding: 0 0 0 1em; + nav p { + display: none; } -} - -@media only screen and (min-width: 980px) { + nav#menu ul { + display: flex; + } div.with-aside { flex-direction: row; - justify-content: space-around; + justify-content: space-around; } }