variante mit der pseudoklasse :target zum bedienen des menus

This commit is contained in:
example 2022-02-06 01:47:08 +01:00
parent 28c99ad5f1
commit 25bfc8d9a1
2 changed files with 186 additions and 256 deletions

View file

@ -27,58 +27,28 @@
<body> <body>
<a href="#space" <!-- head with banner and navigation ---------------------------------->
title="Springe zum Inhalt"
alt="Springe zum Inhalt">Zum Inhalt springen</a>
<!-- fixed elements --------------------------------------------------> <header>
<div id="space-status-div" class="flex-box-column">
<div id="space-status-icon-div" aria-hidden="true">
<img id="logo"
alt="Raumstatus"
src="./images/user-times.svg" />
</div>
<div id="space-status-text-div" class="flex-box-column">
<p class="hidden">Raumstatus:</p>
<div>C</div>
<div>l</div>
<div>o</div>
<div>s</div>
<div>e</div>
<div>d</div>
</div>
</div>
<!-- head with title and navigation ---------------------------------->
<div id="head-fix">
<div class="center-content max-width"> <div class="center-content max-width">
<div id="headline" class="flex-box-row"> <div id="headline" class="flex-box-row">
<header role="banner"> <div>
<h1>kraut.space</h1> <p>
<hr/> <a id="banner" href="#"
</header> role="banner"
title="Zum Seitenanfang">kraut.space</a></p>
<!-- navigation -->
<nav role="navigation" class="flex-box-column">
<label id="responsiv-navi-label"
for="responsiv-navi-checkbox"
role="button"
aria-hidden="true">
<div id="hamburger" class=flex-box-column>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
</div> </div>
</label> <div class="flex-box-row">
<input type="checkbox" <p>
aria-hidden="true" <a id="open-menu"
id="responsiv-navi-checkbox" /> href="#menu">Menu</a>
<ul id="navigation-menu" </p>
role="menu" <nav id="menu" class="flex-box-column">
class="flex-box-column"> <p>
<a id="close-menu"
href="#open-menu">Close</a>
</p>
<ul role="menu">
<li role="menuitem"> <li role="menuitem">
<a title="Was ist der Krautspace?" <a title="Was ist der Krautspace?"
href="#space">Krautspace</a> href="#space">Krautspace</a>
@ -105,12 +75,15 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<hr/> <a id="backdrop"
href="#open-menu"
tabindex="-1"></a>
</div> </div>
</div> </div>
</div> </div>
</header>
<!-- big image at the top, should be further a slider ---------------> <!-- big image at the top, should be further a slider ----------------->
<div id="start-image-container" aria-hidden="true"> <div id="start-image-container" aria-hidden="true">
<div class="center-content max-width"> <div class="center-content max-width">
@ -169,8 +142,8 @@
<ul> <ul>
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li> <li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
<li>Offene Runde</li> <li>Offene Runde</li>
<li>Jitsi: <a <li>Jitsi: <a href="https://kraut.space/chaostreff"
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li> >https://kraut.space/chaostreff</a></li>
</ul> </ul>
<ul> <ul>
@ -185,28 +158,35 @@
<h3>Kontakt</h3> <h3>Kontakt</h3>
<div class="sb-item"> <div class="sb-item">
<h4 class="aside">Matrix</h4> <h4 class="aside">Matrix</h4>
<p><a <ul class="aside">
href="https://matrix.to/#/#krautchan:matrix.kraut.space">#krautchan:matrix.kraut.space</a> <li><a href="https://matrix.to/#/#krautchan:matrix.kraut.space"
>#krautchan:matrix.kraut.space</a>
</li>
</ul>
</div> </div>
<div class="sb-item"> <div class="sb-item">
<h4 class="aside">Jabber</h4> <h4 class="aside">Jabber</h4>
<ul class="aside"> <ul class="aside">
<li>MUC: <a <li>MUC: <a href="xmpp:krautchan@chat.krautspace.de"
href="xmpp:krautchan@chat.krautspace.de">krautchan@chat.krautspace.de</a></li> >krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a <li>Webchat: <a href="https://kraut.space/chat">kraut.space/chat</a></li>
href="https://kraut.space/chat">kraut.space/chat</a></li>
</ul> </ul>
</div> </div>
<div class="sb-item"> <div class="sb-item">
<h4 class="aside">iCalendar</h4> <h4 class="aside">iCalendar</h4>
<p><a href="https://kraut.space/krautspace.ics" <ul class="aside">
>kraut.space/krautspace.ics</a> <li>
</p> <a href="https://kraut.space/krautspace.ics">kraut.space/krautspace.ics</a>
</li>
</ul>
</div> </div>
<div class="sb-item"> <div class="sb-item">
<h4 class="aside">Twitter</h4> <h4 class="aside">Twitter</h4>
<p><a href="https://twitter.com/krautspace">twitter.com/krautspace"</a> <ul class="aside">
</p> <li>
<a href="https://twitter.com/krautspace">twitter.com/krautspace</a>
</li>
</ul>
</div> </div>
</aside> </aside>
</div> </div>
@ -259,7 +239,7 @@
</p> </p>
<ul class="indent"> <ul class="indent">
<li>Hackspace Jena e.&#x202f;V.<li> <li>Hackspace Jena e.&#x202f;V.</li>
<li>Krautgasse 26</li> <li>Krautgasse 26</li>
<li>07743 Jena</li> <li>07743 Jena</li>
</ul> </ul>
@ -379,4 +359,5 @@
</div> </div>
</body> </body>
</html> </html>

273
style.css
View file

@ -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; padding: 0;
@ -13,10 +15,10 @@
html, body { html, body {
margin: 0; margin: 0;
font-size: 100%;
color: #333333; color: #333333;
background-color: #ffffff; background-color: #ffffff;
line-height: 150%; font-size: 100%;
line-height: 1.5;
} }
body { body {
@ -34,22 +36,26 @@ ul.indent {
} }
a { a {
color: #333333; color: inherit;
text-decoration: underline 1px dotted #333333; text-decoration: none;
} }
div.center-content { a:hover, a:focus {
margin: 0 auto; text-decoration: underline;
}
div.max-width {
max-width: 75em;
} }
.hidden, hr { .hidden, hr {
display: none; display: none;
} }
.center-content {
margin: 0 auto;
}
.max-width {
max-width: 72em;
}
.flex-box-row { .flex-box-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -57,158 +63,76 @@ div.max-width {
} }
.flex-box-column { .flex-box-column {
display: table; /* fallback IE<9 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
main section {
padding-left: 1em;
}
/*** head with navigation menu ***/
/**** fixed elements ****************************/ header {
/************************************************/
/**** 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 {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: #ffffff; color: #ffffff;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8); 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; 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 ****/ /**** startimage ****/
@ -282,7 +206,7 @@ ul.aside {
footer { footer {
padding: 0 5% 10% 5%; padding: 0 5% 10% 5%;
color: #ffffff; color: #ffffff;
background-color: #333333; background-color: rgba(0, 0, 0, 0.85);
} }
div#footer { div#footer {
@ -301,27 +225,52 @@ 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; display: none;
} }
ul#navigation-menu { nav#menu {
position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0;
padding: 0;
} }
ul#navigation-menu li { nav p {
padding: 0 0 0 1em; display: none;
} }
} nav#menu ul {
display: flex;
@media only screen and (min-width: 980px) { }
div.with-aside { div.with-aside {
flex-direction: row; flex-direction: row;