<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Menu Parallelogramm 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import 'https://fonts.googleapis.com/css?family=Roboto';
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
/*box-sizing: border-box;*/
min-width: 0;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
padding: 0 0.25rem 0.5rem 0.25rem;
border-top: 0.01px solid transparent;
margin: 0;
}
}
/*Schriften 01*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0.25rem 0 0.25rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0.25rem 0 0.25rem;
}
p, li, dl, dt, address {
font-family: 'Roboto', 'Sans-Serif';
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0.25rem 0 0.25rem;
}
a {
color: blue;
text-decoration: none;
outline: none;
margin: 0;
}
figcaption {
font-family: 'Roboto', 'Sans-Serif';
font-size: 0.9rem;
margin: 0;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 0;
max-width: 100%;
margin: 1rem 0 0 2rem;
}
img {
/*text-align: bottom;*/
min-width: 0;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
nav {
margin: 1rem 1rem 1rem 3rem;
display: flex;
flex-wrap: wrap;
}
nav a {
background: darkblue;
color: white;
text-decoration: none;
outline: none;
position: relative;
transform: skew(-45deg);
padding: 1rem 2.5rem;
margin-right: 0.5rem;
display: flex;
}
nav a:hover {
background-color: darkred;
}
nav span {
transform: skew(45deg);
}
nav a:first-child {
padding-left: 0;
}
nav a:last-child {
padding-right: 0;
}
nav a:first-child::before,
nav a:last-child::after {
content: "";
background-color: darkblue;
position: absolute;
z-index: -1;
transform: skew(45deg);
width: 3.5rem;
height: 100%;
margin-top: -1rem;
margin-left: -1.6rem;
}
nav a:first-child:hover::before,
nav a:last-child:hover::after {
background-color: darkred;
}
nav:last-of-type {
background-color: gold;
}
nav:last-of-type span {
background-color: green;
}
nav:last-of-type a::before,
nav:last-of-type a::after {
background-color: hsla(0, 0%, 80%, 0.8);
}
}
@media only screen and (max-width: 1350px) {
nav {
width: 35rem;
}
nav a:nth-child(1n+5) {
margin-top: 0.5rem;
}
nav a:nth-child(5) {
padding-left: 0;
}
nav a:nth-child(4) {
padding-right: 0;
}
nav a:nth-child(4)::after,
nav a:nth-child(5)::before {
content: "";
background-color: darkblue;
position: absolute;
z-index: -1;
transform: skew(45deg);
width: 3.5rem;
height: 100%;
margin-top: -1rem;
margin-left: -1.6rem;
}
nav a:nth-child(4):hover::after,
nav a:nth-child(5):hover::before {
background-color: darkred;
}
nav:last-of-type a:nth-child(5)::before,
nav:last-of-type a:nth-child(4)::after {
background-color: hsla(0, 0%, 80%, 0.8);
}
}
/*Flexbox für IE*/
/*-ms-flex-preferred-size: calc(50% - 1rem);*/
/*Vorlage für das gesamte CSS*/
@media all {
}
/*Vorlage zum Kopieren für Media Queries - Mobile first*/
@media only screen and (min-width: 0px) {
}
/*Vorlage zum Kopieren für Media Queries - Desktop first*/
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
<h1>Menu Parallelogramm</h1>
</header>
<main>
<h2>Problem</h2>
<p>Ein Menu soll in Form eines Prallelogramms dargestellt werden.</p>
<h2>Bild zum Problem</h2>
<figure>
<!-- <img src="https://www.html.de/attachments/menu-gif.4510/"> -->
<!-- <img src="2016_11_30_bdt600_menu_parallelogramm_img_01.jpg"> -->
<img src="index04_img_01.jpg">
<figcaption>Bild zum Problem</figcaption>
</figure>
<h2>Lösung</h2>
<nav>
<a href=""><span>Banane</span></a>
<a href=""><span>Orange</span></a>
<a href=""><span>Kiwi</span></a>
<a href=""><span>Birne</span></a>
<a href=""><span>Zwetschke</span></a>
<a href=""><span>Mandarine</span></a>
<a href=""><span>Heidelbeere</span></a>
</nav>
<p>Da die Abstände und Positionen recht genau aufeinander abgestimmt sind muss bei schmalen Fenstern das Menulayout mittels Media Queries im Griff behalten werden. Das ist heutzutage aber sowieso üblich. Ich habe mal eine Media Query eingebaut.</p>
<p>Und noch mal etwas bunter um die einzelnen Elemente hervorzuheben:</p>
<nav>
<a href=""><span>Banane</span></a>
<a href=""><span>Orange</span></a>
<a href=""><span>Kiwi</span></a>
<a href=""><span>Birne</span></a>
<a href=""><span>Zwetschke</span></a>
<a href=""><span>Mandarine</span></a>
<a href=""><span>Heidelbeere</span></a>
</nav>
<p>Durch das <i>transform</i> und <i>position: absolute</i> ragen einige Elemente über den umgebenden nav-Container hinaus. Das ist das ganz normale Verhalten und muss durch passende Abstände angepasst werden, sofern der nav-Container eine Hintergrundfarbe erhalten soll.</p>
</main>
<footer>
<p>Originaldiskussion: <a href="https://www.html.de/threads/css-menue.56774/">https://www.html.de/</a></p>
</footer>
</body>
</html>
