Ich suche eine Grafik zum aktiven Menüpunkt

Question

Ich möchte ein Häkchen zu einem aktiven Menüpunkt hinzufügen, aber ich kann nicht herausfinden, wie ich mit meinem aktuellen Code umgehen soll. Hier ist eine Grafik, was ich versuche das Häkchen hängen nach unten (zentriert zu erreichen (Hinweis).

Jede Hilfe wäre sehr dankbar

Sie können die aktuelle Seite sehen unter: http://www.redone.org/_dev/ski/menu2.html

Answer 1

auf dem Mouseover von unter Elemente

current_page_item

Änderung der Hintergrundbild für das ..// ein Bild mit dieser Farbe machen wie ausrufen

// dies ein Pseudo-Code wird wie dies in IE7 nicht funktioniert, so dass Sie jquery

li a:hover 

    { 
    background-image: url(images/callout.jpg); 
    } 

verwenden können

Answer 2

Ihr "aktuelles" Menüelement sollte eine zusätzliche Klasse (wie "aktuell") zugewiesen werden. Dann fügen Sie eine CSS-Regel für die Klasse "current" hinzu, die die zusätzliche Grafik am unteren Rand anzeigt.

Answer 3

Danke, dass Sie mich in die Richtung weisen. Hier ist, was für mich funktionierte:

#headerline { 
    overflow: visible; 
    border-bottom: 1px solid #2c5e93; 
    height: 40px; 
} 

#menu-main-menu li.current_page_item a{ 
    color: #014783; 
    background-color: #89cefa; 
} 

#menu-main-menu li.current_page_item { 
    height: 50px; 
    background-image:url(ski_tick.png); 
    background-position:center; 
    background-repeat:no-repeat; 
} 

Answer 4

Die Hintergrund-Bild-Lösung in den anderen Antworten vorgestellt ist der häufigste Weg, um dieses Problem zu lösen. Eine nette Alternative ist auch verfügbar, da diese spezielle Grafik, ein Dreieck, leicht in HTML + CSS erstellt werden kann; Keine Bilder, Canvas, SVG/VML oder Plugins erforderlich.

<div style=" 
    position:absolute; 
    width:0; 
    right:0; 
    border: 10px solid #fff; 
    border-top-color: #000; 
    "></div> 

Ich habe eine basic example of a menu using this technique erstellt. Polygone in CSS wurden mindestens bis zum Jahr 2001 von Tantek Çelik untersucht.