CSS Navigation

**BugFix**

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

PHP

.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;
    }

Alles anzeigen

html

PHP

<!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&uuml;_1</p></span>         <!-- aktiver Menüpunkt -->
        <span class="link"><a href="nav2.html"></a><p class="hidden" id="tl2">Men&uuml;_2</p></span>    <!-- Link Menü 2 -->
        <span class="link"><a href="nav3.html"></a><p class="hidden" id="tl3">Men&uuml;_3</p></span>    <!-- Link Menü 3 -->
        <span class="link"><a href="nav4.html"></a><p class="hidden" id="tl4">Men&uuml;_4</p></span>    <!-- Link Menü 4 -->
        <span class="item"><p id="active">Men&uuml;_1</p></span>                                        <!-- Text aktives Menü -->
    </div>
</body>
</html>

Alles anzeigen

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?

SgtIgram

howdy..

hab grad mal bissel rumgebastelt und dabei kam das raus..
ohne javascript.. so wie du es wolltest^^ wobei ich nicht ganz verstehe wieso.. javascript is doch toll

hier nochmal als code wobei der quelltext nicht so schwer aufzurufen sein sollte

HTML

<html>
	<head>
		<title>blubb</title>
		<style>
			#menu1:hover:before { content:"menu1"; }
			#menu2:hover:before { content:"menu2"; }
			#menu3:hover:before { content:"menu3"; }
		</style>
	</head>
	<body>
		<div id="menu1" style="position:absolute;top:5px;left:5px;z-index:3;"><br>button1</div>
		<div id="menu2" style="position:absolute;top:5px;left:5px;z-index:2;"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button2</div>
		<div id="menu3" style="position:absolute;top:5px;left:5px;z-index:1;"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button3</div>
	</body>
</html>

Alles anzeigen

//edit: code formatiert um keine schelle zu bekommen^^

mfg
sgtigram

**BugFix**

Zitat von SgtIgram

javascript is doch toll

:pinch:
Damit klar wird, was ich genau will, hier mal die Variante mit JS: http://bug-fix.info/test/nav_js1.html
Dadurch verbraucht man für die Navigation nur minimal Platz und bekommt doch problemlos alle Informationen.
Klar ist JS cool, weil man viel mit machen kann. Man kann aber auch viel Mist machen und deshalb wird es von vielen Benutzern sinnvollerweise deaktiviert.
Ich hätte halt gern gewußt, ob es irgendeinen Trick gibt um mit CSS ein analoges Verhalten zu generieren.