Aktiver Menupunkt dauerhaft farbig hinterlegen?

[SimplyFred]

Hallo,

ich habe ein Menu, in dem der Besucher sehen soll, wo er sich gerade befindet. Der Menu-Punkt soll dauerhaft in einer anderen Farbe unterlegt sein. So ähnlich wie mit "linksmenu a:active".
Dies wiederum funktioniert aber nur so lange, wie man die Maustaste drückt.

Hat jemand eine Idee? Ich tappe auf der Stelle ...

  
/* CSS Document */  
  
/*PAGE LAYOUT*/  
  
  
#linksmenu a{  
    float: right;  
    width: 183px;  
    height: 20px;  
    background-color: #FFFFFF;  
    border-left: solid 0px #CCCCCC;  
    border-bottom: solid 1px #CCCCCC;  
    font: arial;  
    font-size: 12px;  
    font-weight: ;  
    color: #000000;  
    text-decoration: none;  
    padding-top: 5px;  
    white-space: normal;  
    text-indent: 5px;  
}  
#linksmenu a:hover{  
    background-color:#CCCCCC;  
    color: #000000;  
}  
#linksmenu a:active{  
    background-color:#000000;  
    color: #FFFFFF;  
}  

index.html

  
  
    <div id="menu" align="right">  
      <div align="right" style="width:180px; height:10px;"></div>  
       <div id="linksmenu" align="left">  
         <a href="index.html" title="Home">Home</a>  
         <a href="./html/linkl.html" title="linkl.html">linkl.html</a>  
         <a href="./html/link2.html" title="link2.html">link2.html</a>  
         <a href="./html/link3.html" title="link3.html">link3.html</a>  
         <a href="./html/link4.html" title="link4.html">link4.html</a>  
  
  
       </div>  
    </div>  

[Encoder]

Selber machen, der Browser weiß wo die Maus gerade steht, aber er weiß nicht auf welcher Seite der User grad ist und welches Menü zu der gehört weiß er auch nicht.
Aber du weißt das doch. Gib dem passenden Menüpunkt das gewünschte Aussehen.
Also serverseitig
<a href="..." title="..." style="currentPageLink">...</a>

[Matthias Apsel]

Om nah hoo pez nyeetz, SimplyFred!

http://forum.de.selfhtml.org?t=208314&m=1416501#m1416501 f.

Eine Liste von Links ist eine Liste.

Matthias

[Vinzenz Mai]

Hallo,

ich habe ein Menu, in dem der Besucher sehen soll, wo er sich gerade befindet. Der Menu-Punkt soll dauerhaft in einer anderen Farbe unterlegt sein. So ähnlich wie mit "linksmenu a:active".
Dies wiederum funktioniert aber nur so lange, wie man die Maustaste drückt.

Hat jemand eine Idee? Ich tappe auf der Stelle ...

mit anderem HTML :-)

Dein Menü besteht aus einer Liste von Links, also zeichne sie als Liste aus.
Der "aktive" Menüpunkt ist die derzeit angezeigte Seite, in Deinem Beispiel ist das der erste Eintrag. Auf die derzeit angezeigte Seite sollte man sowieso nicht verlinken, also läßt Du dort ganz einfach das a-Element weg:

index.html

statt

<div id="linksmenu" align="left">
         <a href="index.html" title="Home">Home</a>
         <a href="./html/linkl.html" title="linkl.html">linkl.html</a>
         <a href="./html/link2.html" title="link2.html">link2.html</a>
         <a href="./html/link3.html" title="link3.html">link3.html</a>
         <a href="./html/link4.html" title="link4.html">link4.html</a>
       </div>

  
~~~html
<ul id="linksmenu">  
  <li>Home</li>  
  <li><a href="./html/linkl.html" title="linkl.html">linkl.html</a></li>  
  <li><a href="./html/link2.html" title="link2.html">link2.html</a></li>  
  <li><a href="./html/link3.html" title="link3.html">link3.html</a></li>  
  <li><a href="./html/link4.html" title="link4.html">link4.html</a></li>  
</ul>  

Dieses HTML mit CSS so zu stylen, dass es so aussieht, wie Du möchtest, bekommst Du bestimmt selbst hin.

Anmerkung: linksmenu ist keine besonders günstiger Wert für eine id. Vielleicht möchtest Du später das Menü rechts anzeigen ...

Freundliche Grüße

Vinzenz

[Matthias Apsel]

Ergänzung

Anmerkung: linksmenu ist keine besonders günstiger Wert für eine id. Vielleicht möchtest Du später das Menü rechts anzeigen ...

Ebenso das Wiederholen der Dateinamen im title-Attribut. Die Dateinamen sind dem Nutzer nämlich völlig wurscht.

Matthias

[Gunnar Bittersmann]

@@Vinzenz Mai:

nuqneH

Auf die derzeit angezeigte Seite sollte man sowieso nicht verlinken

s.a. Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

also läßt Du dort ganz einfach das a-Element weg:

Oder noch einfacher dessen @href-Attribut.

Anmerkung: linksmenu ist keine besonders günstiger Wert für eine id. Vielleicht möchtest Du später das Menü rechts anzeigen ...

Auch dann besteht da Menü doch noch aus Links. SCNR.

Qapla'

[SimplyFred]

Nachdem ich aufgefordert worden bin keine Doppelpostings zu machen, nun dies:

Hallo,

ich versuche es nun zum 2. Mal mit beiliegendem Code.
Ergebnis ist nun, sobald ich im HTML anfange, echte Links zu setzen, ist der aktive Menupunkt nicht mehr hinterlegt.
Beim Klick auf Link2-10 klappt es, aber bei Klick auf Home ist Home nicht hinterlegt. Wie bekomme ich das jetzt noch hin?

menu.css

  
<style type="text/css">  
  
#vertmenu {  
font: arial;  
font-size: 12px;  
width: 180px;  
padding: 0px;  
margin: 0px;  
}  
  
#vertmenu h1 {  
        display: block;  
        background-color: #CCCCCC;  
        margin: 0px;  
        width: 180px;  
}  
  
#vertmenu ul {  
list-style: none;  
margin: 0px;  
padding: 0px;  
border: none;  
}  
#vertmenu ul li a {  
        font: 12px arial;  
        display: block;  
        border-bottom: solid 1px #CCCCCC;  
        padding: 5px 0px 2px 20px;  
        text-decoration: none;  
        color: #000000;  
        width: 180px;  
        text-align: left;  
        white-space: normal;  
  
}  
  
#vertmenu ul li a:hover {  
        color: #E20074;  
        background-color: #CCCCCC;  
}  
#vertmenu ul li a:focus {  
color: #FFFFFF;  
        background-color: #000000;  
        border-bottom: solid 1px #000000;  
  
}  
</style>  
  
  

index.html

[code lang=html]
                            <div id="vertmenu" align="right">
                                <div align="right" style="width:180px; height:10px;"></div>
<ul>
<li><a href="index.html" tabindex="1">Home</a></li>
<li><a href="#.html" tabindex="2">link2</a></li>
<li><a href="#.html" tabindex="3">link3</a></li>
<li><a href="#.html" tabindex="4">link4</a></li>
<li><a href="#.html" tabindex="5">link5</a></li>
<li><a href="#.html" tabindex="6">link6</a></li>
<li><a href="#.html" tabindex="7">link7</a></li>
<li><a href="#.html" tabindex="8">link8</a></li>
<li><a href="#.html" tabindex="9">link9</a></li>
<li><a href="#.html" tabindex="10">link10</a></li>

</ul>
</div>

[Matthias Apsel]

Om nah hoo pez nyeetz, SimplyFred!

Du hast dich doch sicher für eine der 4 angebotenen Varianten entschieden. Dass du dann für jede der Seiten ein eigenes Menü machen musst, man also auf den aktuellen Menüpunkt nicht klicken will/soll/braucht und er bei einem hover nicht reagieren soll (zumindest nicht in derselben Weise wie die Links) ist dir auch klar? (siehe faq/quelltext auslagern)

Tabindex ist nur sinnvoll, wenn man von der Reihenfolge im Quelltext abweichen will.

Matthias