Wie kann ich ohne Javascript ein Menü in HTML erstellen?

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

Frage

Seit vielen Jahren ein GUI-Standard ist die Menüleisten von Anwendungen mit Menüs auftauchen, wenn Sie einen Eintrag in der Menüleiste klicken oder schweben. Einige Websites implementieren diese Funktion auch, aber sie sind mit Javascript, soweit ich sehen kann. Aus verschiedenen Gründen kann Javascript ein Problem sein, so die Frage: Ist dies möglich, ohne Javascript zu implementieren, nur HTML und CSS mit

War es hilfreich?

Lösung

Ich habe schon etwas getan, und es ist ein Trick, indem die Menüpunkte in Anker-Tags, mit Untermenü in versteckten Divs INSIDE diese Anker-Tags abgezogen. Der CSS-Trick ist, die innere div während des a erscheint. Hover-Ereignisses

Es sieht so etwas wie: 

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

Ihre Ergebnisse können variieren ...

EDIT: Internet Explorer 6 und unter unterstützt nicht die: pseudo-Klasse auf anderen Elementen neben A. In ‚modernem‘ Browser schwebt, ist es akzeptiert, in der Lage sein, diesen Trick mit LI zu verwenden, TD, DIV, SPAN und die meisten jeden Tag.

Andere Tipps

Hier finden Sie aktuelle CSS Menu Maker .

Best bekannte Technik ist die sucker Menüs . für die Suche wird in vielen interessanten Menüs führen. Es braucht nur Javascript in IE6 und niedriger.

Hier ist eine Liste von den Söhnen der sucker Menüs.

Beachten Sie die CSS-Methoden als Backup verwendet für, wenn JavaScript nicht verfügbar ist. JavaScript * eine bessere Benutzererfahrung für Menüs Drop-down bieten, weil Sie einige Verzögerungsfaktoren hinzufügen können Menüs sofort zu stoppen verschwinden, wenn die Maus kurz Bereich ihres schweben läßt. Pure-CSS-Menü kann manchmal ein bisschen pingelig sein, zu verwenden, vor allem, wenn die Hover-Ziele sind klein.

*: natürlich nicht alle Menüs Skripte tatsächlich die Mühe, dies zu tun ...

Sie können die Pseudoklasse verwenden: schweben ein Hover-Effekt zu erhalten

. 
a:link {
 color: blue;
}

a:hover {
  color: red;
}

Ich kann ein ausführlicheres Beispiel geben, aber nicht jetzt (muß die Kinder zum Zahnarzt zu bekommen).

Es gibt auch Eric Meyer 's Original-Artikel auf reine CSS-Menü .

Es gibt gebunden zu sein, viel robuste und moderner nimmt jetzt da draußen von anderen erwähnt, aber ich dachte, dass ich es für die Nachwelt erwähnen würde. :)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top