Ich hatte bereits in einer Website eine horizontale Navigation erstellt bestehend aus Button und nebenstehend einem Textfeld. Im Textfeld ist standardmäßig der Titel des aktiven Menüs zu sehen. Beim Hover über den Links zu den anderen Menüs, wird deren Text im Textfeld angezeigt. Den Austausch des Textes im Container habe ich per Javascript vorgenommen.
Nun habe ich mich daran versucht, eine rein CSS-basierte Lösung zu finden. Allerdings klappt das nicht genau so, da ich nur begrenzt auf andere Elemente zugreifen kann.
Ich lasse daher beim Hover den Text oberhalb der Navigationsbutton anzeigen und zeige dauerhaft den Text des aktiven Menüs daneben an (hier).
css
.navigation {
position: absolute;
top: 50px;
left: 30px;
}
.navigation a {
width: 20px; /* Link wird auf Quadrat abgebildet, kein Text, nur BG-Color */
height: 20px;
background-color: #FFFF00;
border-bottom: 1px solid rgba(255, 255, 255, .2); /* dünner Rand unten+rechts, leichte Transparenz ==> wirkt dadurch plastischer */
border-right: 1px solid rgba(255, 255, 255, .2);
border-radius: 20px; /* Radius mit gleichem Wert, wie Höhe/Breite ==> ergibt Kreis */
display: inline-block; /* für horizontale Anordnung Anzeige als inline-block */
box-shadow: inset 0 0 2px 2px #B6B6B6; /* innenliegender Boxschatten, kein Versatz, andere Farbe */
}
.navigation a:hover {
background-color: #FFC000;
box-shadow: inset 0 0 2px 2px #B6B6B6;
}
.navigation strong {
width: 20px;
height: 20px;
background-color: #4F65E0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, .2);
border-radius: 20px;
display: inline-block;
box-shadow: inset 0 0 2px 2px #B6B6B6;
}
.navigation span { /* alle Elemente der Navigation, Button und Text */
padding-left: 10px;
}
.hidden { /* Text der nur beim :hover eingeblendet wird */
visibility: hidden;
}
#tl1, #tl2, #tl3, #tl4 {
position: absolute;
top: -45px;
left: 45px;
color: #FFC000;
}
#active {
position: absolute;
left: 150px;
top: -15px;
color: #4F65E0;
font-weight: bold;
}
.link:hover > p { /* Text zum Link über ausgeblendetem Text anzeigen */
visibility: visible;
}html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="nav.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="navigation">
<span class="nolink"><strong></strong><p class="hidden" id="tl1">Menü_1</p></span> <!-- aktiver Menüpunkt -->
<span class="link"><a href="nav2.html"></a><p class="hidden" id="tl2">Menü_2</p></span> <!-- Link Menü 2 -->
<span class="link"><a href="nav3.html"></a><p class="hidden" id="tl3">Menü_3</p></span> <!-- Link Menü 3 -->
<span class="link"><a href="nav4.html"></a><p class="hidden" id="tl4">Menü_4</p></span> <!-- Link Menü 4 -->
<span class="item"><p id="active">Menü_1</p></span> <!-- Text aktives Menü -->
</div>
</body>
</html>
Damit kann ich zur Not leben, aber weiß evtl. jemand, wie man eine derartige Navigation, wie am Anfang beschrieben, mit reinem CSS lösen kann?
