Hallo,
ich hatte das so verstanden, dass steve wissen wollte, wie die spezielle Navigation erstellt wurde. Und das kann halt erst nach Durchsicht des Quelltextes beurteilt werden. Das dann nur eine schlichte, schulmäßige Navigation übrigbleibt ist nicht direkt erkennbar.
Wenn es nur um die Funktion geht würde ich eine viel schlichtere Grundstruktur bevorzugen. Die könnte so aufgebaut sein:
<nav id="zbv">
<article>
<p>Menüpunkt</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://..." alt="Beispielbild">
</div>
</article>
</nav>
Ein nav-Element, in dem sich für jeden Menüpunkt ein article-Element befindet.
Die p-Elemente werden durch beliebige Inhalte ersetzt. Durch den umschließenden div-Container gibt es kaum Einschränkungen des Inhalts und seiner Gestaltung.
Das Bild direkt vor dem schließenden div ist absolut positioniert und kann beliebig verschoben werden.
Keine unnötigen id und class. Viel übersichtlicher geht es wohl kaum.
Farben, Rahmen, Schatten, Abstände können flexibel angepasst werden. Ein Resposive Design ist problemlos möglich.
Das CSS ist nicht sehr aufwändig:
nav#zbv {
padding: 0;
border: 1px solid silver;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#zbv>:first-child {
background-color: Orange;
flex: 0 0 2rem;
}
#zbv>* {
display: block;
text-align: center;
position: relative;
padding: 0;
border: 1px solid orange;
margin: 0;
flex: 1 0 auto;
}
#zbv article :nth-child(1) {
display: block;
padding: 0.3rem 0;
margin: 0;
}
#zbv div {
min-height: 210px; /*Für die Beispielbilder*/
border: 1px solid silver;
border-top: 5px solid red;
display: none;
}
#zbv article:hover div {
text-align: left;
display: block;
position: absolute;
width: 300%;
}
#zbv article:nth-last-child(-n+3) div {
right: 0;
}
#zbv div img:last-child {
position: absolute;
right: 0;
bottom: 0;
}
Alles anzeigen
Die gesamte Navigation mit aktuellem HTML/CSS könnte zum Beispiel so erstellt werden:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Navigation 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
nav#zbv {
padding: 0;
border: 1px solid silver;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#zbv>:first-child {
background-color: Orange;
flex: 0 0 2rem;
}
#zbv>* {
display: block;
text-align: center;
position: relative;
padding: 0;
border: 1px solid orange;
margin: 0;
flex: 1 0 auto;
}
#zbv article :nth-child(1) {
display: block;
padding: 0.3rem 0;
margin: 0;
}
#zbv div {
min-height: 210px; /*Für die Beispielbilder*/
border: 1px solid silver;
border-top: 5px solid red;
display: none;
}
#zbv article:hover div {
text-align: left;
display: block;
position: absolute;
width: 300%;
}
#zbv article:nth-last-child(-n+3) div {
right: 0;
}
#zbv div img:last-child {
position: absolute;
right: 0;
bottom: 0;
}
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<nav id="zbv">
<article>
<p>H</p>
</article>
<article>
<p>Obst</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/food" alt="Beispielbild">
</div>
</article>
<article>
<p>Auto</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/transport" alt="Beispielbild">
</div>
</article>
<article>
<p>Stadt</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/city" alt="Beispielbild">
</div>
</article>
<article>
<p>Tier</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/animals" alt="Beispielbild">
</div>
</article>
<article>
<p>Vorname</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/people" alt="Beispielbild">
</div>
</article>
<article>
<p>Unternehmen</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/technics" alt="Beispielbild">
</div>
</article>
</nav>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
