Design bei vertikaler Navigation

[ThomasG]

Hallo,

wer kann mir bitte helfen?
Ich habe auf unserer Vereinshomepage (www.musikverein-hirschzell.de) eine vertikale Navigation, welche im Prinzip soweit auch gut funktioniert. Jetzt hätte ich jedoch gerne noch eine Änderung am Design, die ich bislang nicht hinbekommen habe. Selbst per Google habe ich hierzu nichts passendes gefunden, vielleicht auch weil ich die falschen Suchbegriffe verwendet habe (css und HTML habe ich am Schluß beigefügt).
Bei dieser Navigation werden per hover die Navigationspunkte welche im Grundzustand einen blauen Hintergrund haben, mit einem orangen Hintergrund überlagert. Nun möchte ich gerne, dass dieser orange Hintergrund bei jeder einzelnen Webseite permanent ist, die gerade aktiv ist und zwar auch dann wenn kein Mauszeiger über dem Menüpunkt ist. Desweiteren soll beim Überfahren der einzelnen Menüpunkte weiterhin der orange Hintergrund erscheinen. Das Ganze ist dazu gedacht, dass die aktive Webseite optisch noch besser zu erkennen ist. Auf unserer Homepage ist mein Designwunsch zu simulieren (ist aber funktionell nicht richtig und dient nur als Designmuster) indem man eine Webseite per Navigation anklickt und danach eine 2. Webseite anklickt, danach den Button zurück vom Webbrowser klickt. Jetzt ist das Design zu sehen, welches ich mir vorstelle, aber nur solange bis ein Menüpunkt per Maus angeklickt wird.
Nun meine Frage: Ist dieses Design zu realisieren? Wenn ja, könnte mir bitte jemand mitteilen, wie so etwas zu implementieren ist.

Mit bestem Dank

Thomas

HTML ohne Untermenüpunkte

<ul id="menu">
    <li><a href="./index.php">Startseite</a></li>
    <li><a href="websites/mvhaktuell.php">Aktuell</a></li>
    <li><a href="websites/mvhtermine.php">Termine</a></li>
    <li class="submenu"><a href="websites/mvhkapelle.php">Musikkapelle</a></li>
    <li class="submenu"><a href="websites/mvjkapelle.php">Jugendkapelle</a></li>
    <li><a href="websites/mvhjmitglied.php">Mitglied werden</a></li>
    <li><a href="websites/mvhgalleries.php">Fotogalerien</a></li>
    <li><a href="websites/mvhpresse.php">Presseberichte</a></li>
    <li class="submenu"><a href="websites/mvpperisade.php">Musical Perisade!</a></li>
    <li><a href="websites/mvhonlineshop.php">Bestellung</a></li>
    <li><a href="websites/mvhweblinks.php">Web-Links</a></li>
</ul>

CSS

ul#menu {
background: transparent;
position: relative;
top: -1px;
left: -40px;
}

ul#menu li {
background: transparent;
padding: 0;
margin: 0;
list-style: none;
width: 192px;
top: -1px;
left: 1px;
}

ul#menu ul {
background: transparent;
padding: 0;
margin: 0;
}

ul#menu a {
font: bold 1.2em sans-serif;
text-decoration: none;
display: block;
padding: 30px 5px;
margin: 1px 0 0;
width: 192px;
}

ul#menu a:link, ul#menu a:visited {
color: #e0d0b1;
background: #004e80;
padding: 3px 4px;
border: 1px solid #0af;
}

ul#menu a:hover, ul#menu a:focus {
color: #ffedcd;
background: #804e00;
padding: 3px 4px;
border: 1px solid #fa0;
}

ul#menu a:link span, ul#menu a:visited span {
display: none;
}

ul#menu a:hover span, ul#menu a:focus span {
font-size: 1.5em;
line-height: 1.5em;
color: #804e01;
padding: 0.5em;
border-left: 2px solid #fa0;
margin: 0 0 0 192px;
height: 1em;
width: 660px;
display: block;
position: absolute;
top: -7px;
left: -7px;
}

ul#menu ul a {
display: block;
font: normal 1.05em sans-serif;
text-decoration: none;
padding-left: 20px;
text-indent: 20px;
}

ul#menu ul ul a {
display: block;
font: normal 0.5em sans-serif;
text-decoration: none;
padding-left: 20px;
text-indent: 20px;
}

ul#menu ul ul ul a {
display: block;
font: bold 0.95em sans-serif;
text-decoration: none;
padding-left: 45px;
text-indent: 45px;
}

ul#menu ul ul ul ul a {
display: block;
font: bold 0.90em sans-serif;
text-decoration: none;
padding-left: 60px;
text-indent: 60px;
}

span.childs {
cursor: pointer;
}

li.treeMenu_opened ul {
display: block;
}

li.treeMenu_closed ul {
display: none;
}

li.submenu:before {
content: '»';
float: right;
margin-right: -7px;
color: #e0d0b1;
font-size: 1.5em;
font-weight: bold;
}

[Matthias Apsel]

Om nah hoo pez nyeetz, ThomasG!

Auf unserer Homepage ist mein Designwunsch zu simulieren (ist aber funktionell nicht richtig und dient nur als Designmuster) indem man eine Webseite per Navigation anklickt und danach eine 2. Webseite anklickt, danach den Button zurück vom Webbrowser klickt.

kann ich nicht nachvollziehen.

Nachfrage: Du möchtest, dass die aktuelle Seite einen orangefarbenen Navigationsbutton besitzt?

Zudem möchtest du nicht auf die aktuelle Seite verlinken.

HTML ohne Untermenüpunkte

<ul id="menu">     <li><a href="./index.php">Startseite</a></li>     <li><a href="websites/mvhaktuell.php">Aktuell</a></li>

<li>Termine</li> <!-- Derzeit aktuelle Seite -->

<li class="submenu"><a href="websites/mvhkapelle.php">Musikkapelle</a></li>

#menu li {Hintergrundfarbe orange, sowie alle anderen Angaben}

#menu a {Hintergrundfarbe blau, sowie alle Unterschiede zu li }

#menu a:focus {alle Unterschiede zu a }

#menu a:hover {alle Unterschiede zu a und ggf. a:focus}

#menu a:active {alle Unterschiede zu a und ggf a:focus und a:hover}

Siehe Pseudoklassen

Matthias

[Gunnar Bittersmann]

@@ThomasG:

nuqneH

Ich habe auf unserer Vereinshomepage (www.musikverein-hirschzell.de)

Hast du seit damals nichts dazugelernt oder schon wieder alles vergessen?

Nun möchte ich gerne, dass dieser orange Hintergrund bei jeder einzelnen Webseite permanent ist, die gerade aktiv ist und zwar auch dann wenn kein Mauszeiger über dem Menüpunkt ist.

Auch darauf, die aktuelle Seite im Menü nicht zu verlinken, wurdest du bereits hingewiesen.

Dann kannst du li (Menüpunkt der aktuellen Seite), a (Menüpunkte zu anderen Seiten) und a:hover wie gewünscht stylen.

Qapla'