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>
<a href="#space"
title="Springe zum Inhalt"
alt="Springe zum Inhalt">Zum Inhalt springen</a>
<!-- head with banner and navigation ---------------------------------->
<!-- fixed elements -------------------------------------------------->
<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">
<header>
<div class="center-content max-width">
<div id="headline" class="flex-box-row">
<header role="banner">
<h1>kraut.space</h1>
<hr/>
</header>
<!-- 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>
<p>
<a id="banner" href="#"
role="banner"
title="Zum Seitenanfang">kraut.space</a></p>
</div>
</label>
<input type="checkbox"
aria-hidden="true"
id="responsiv-navi-checkbox" />
<ul id="navigation-menu"
role="menu"
class="flex-box-column">
<div class="flex-box-row">
<p>
<a id="open-menu"
href="#menu">Menu</a>
</p>
<nav id="menu" class="flex-box-column">
<p>
<a id="close-menu"
href="#open-menu">Close</a>
</p>
<ul role="menu">
<li role="menuitem">
<a title="Was ist der Krautspace?"
href="#space">Krautspace</a>
@ -105,12 +75,15 @@
</li>
</ul>
</nav>
<hr/>
<a id="backdrop"
href="#open-menu"
tabindex="-1"></a>
</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 class="center-content max-width">
@ -169,8 +142,8 @@
<ul>
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
<li>Offene Runde</li>
<li>Jitsi: <a
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li>
<li>Jitsi: <a href="https://kraut.space/chaostreff"
>https://kraut.space/chaostreff</a></li>
</ul>
<ul>
@ -185,28 +158,35 @@
<h3>Kontakt</h3>
<div class="sb-item">
<h4 class="aside">Matrix</h4>
<p><a
href="https://matrix.to/#/#krautchan:matrix.kraut.space">#krautchan:matrix.kraut.space</a>
<ul class="aside">
<li><a href="https://matrix.to/#/#krautchan:matrix.kraut.space"
>#krautchan:matrix.kraut.space</a>
</li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">Jabber</h4>
<ul class="aside">
<li>MUC: <a
href="xmpp:krautchan@chat.krautspace.de">krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a
href="https://kraut.space/chat">kraut.space/chat</a></li>
<li>MUC: <a href="xmpp:krautchan@chat.krautspace.de"
>krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a href="https://kraut.space/chat">kraut.space/chat</a></li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">iCalendar</h4>
<p><a href="https://kraut.space/krautspace.ics"
>kraut.space/krautspace.ics</a>
</p>
<ul class="aside">
<li>
<a href="https://kraut.space/krautspace.ics">kraut.space/krautspace.ics</a>
</li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">Twitter</h4>
<p><a href="https://twitter.com/krautspace">twitter.com/krautspace"</a>
</p>
<ul class="aside">
<li>
<a href="https://twitter.com/krautspace">twitter.com/krautspace</a>
</li>
</ul>
</div>
</aside>
</div>
@ -259,7 +239,7 @@
</p>
<ul class="indent">
<li>Hackspace Jena e.&#x202f;V.<li>
<li>Hackspace Jena e.&#x202f;V.</li>
<li>Krautgasse 26</li>
<li>07743 Jena</li>
</ul>
@ -379,4 +359,5 @@
</div>
</body>
</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;
@ -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,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;
}
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;