Eine einfache Liste der Schaltflächen kann besser aussehen als gewöhnliche HTML5 Links, aber manchmal, Ihre Seite braucht eine komplexere Navigationsschema zu haben. Zum Beispiel können Sie ein Menüsystem zu erstellen, um die Benutzer zu helfen, die Struktur Ihrer Website zu sehen.

Der Aufbau einer verschachtelten Liste

Beginnen Sie mit einem System von verschachtelten Listen ohne CSS überhaupt zu schaffen.

Kein CSS Styling ist an Ort und Stelle noch nicht, aber die Liste hat seine eigene Komplexität:

• Die primäre Liste hat drei Einträge. Dies ist tatsächlich eine mehrschichtige Liste. Die oberste Ebene gibt Kategorien, die nicht unbedingt Links.

• Jedes Element in der Top-Liste hat seine eigene sublist. Eine zweite Schicht von Links hat verschiedene Links in den meisten Elementen.

• Das Web-Entwicklungselement hat eine weitere Schicht von Sublisten. Das allgemeine Layout dieser Listeneintrag entspricht einer komplexen Hierarchie von Informationen - wie die meisten komplexen Websites.

• Die Liste überprüft, um die HTML-Strict Standard. Es ist besonders wichtig, um Ihren Code zu validieren, bevor CSS Hinzufügen, wenn es etwas komplexer HTML-Code beinhaltet, wie die Liste mit mehreren Ebenen. Ein kleines Problem in der HTML-Struktur, die in einem einfachen HTML-Dokument unbemerkt bleiben können, können alle Arten von seltsamen Probleme in Ihrem CSS verursachen.

Hier ist der Code für die verschachtelte Liste in einfachem HTML:

Einige meiner Lieblings-Links
Soziales Netzwerk
digg
 
reddit
stumbleupon
Referenz 
Google
wikipedia
Wörterbuch
Web Entwicklung 
XHTML / CSS 
w3 Schulen
Html
CSS Zen Garden
 
Programmierung 
javascript.com
php.net
mysql.com

Besondere Vorsicht bei Ihrem Einzug, wenn eine komplexe verschachtelte Liste wie diese zu machen. Ohne die richtige Vertiefung, wird es sehr schwierig, die Struktur der Seite zu schaffen. Außerdem kann ein Listenelement Text und eine weitere Liste enthalten. Jede andere Anordnung wird ein Validierungsfehler verursachen.

Ausblenden der inneren Listen

Der erste Schritt einer dynamischen Menüsystem zu schaffen ist keine Listen zu verbergen, die in ein Listenelement eingebettet sind. Fügen Sie den folgenden CSS-Stil zu Ihrer Seite:

li ul {display: none;}

In Wirklichkeit gelten Sie in der Regel diese Technik nur in einem speziell gekennzeichneten div, wie ein Menüsystem.

Ihre Seite wird eine verblüffende Wandlung unterzogen werden.

Das winzig kleine Schnipsel von CSS-Code ist ein echtes Kraftpaket. Es hat einige faszinierende Dinge, wie zum Beispiel

• Betrieb auf ungeordnete Listen, die in Listenelemente angezeigt: Was das wirklich bedeutet, ist die oberste Liste werden nicht betroffen sein, aber jede ungeordnete Liste, die in einem Listenelement erscheint wird der Stil angewendet haben.

• Mit display: none um Text verschwinden: Einstellen der anzeigen schreiben die HTML-Seite sagt, insgesamt die angegebenen Daten zu verstecken.

Dieser Code funktioniert gut auf fast allen Browsern.

die inneren Listen immer auf ein Stichwort erscheinen

Der Spaß Teil ist immer die inneren Listen auftauchen, wenn die Maus über das übergeordnete Element ist. Eine zweite CSS-Style kann, damit dies geschieht:

li ul {display: none;} li: hover ul {display: block-}

Der neue Code ist ziemlich interessant. Schauen Sie sich die Wirkung der Maus über das Social Networking Element zu halten.

Dieser Code funktioniert nicht auf allen Browsern! Internet Explorer 6 (IE6) und frühere Versionen unterstützen nicht die :schweben Pseudo-Klasse auf ein beliebiges Element außer ein. Geben Sie einen bedingten Kommentar mit einem alternativen Stil für frühe Versionen von IE. Alle modernen Browser (einschließlich IE 7 und höher) funktionieren.

Hier ist, wie die Listen treten wieder auf Code funktioniert:

• Alle Listen innerhalb von Listen sind ausgeblendet. Die erste Art der Regel verbirgt jede Liste, die in einem Listenelement ist.

• li: hover bezieht sich auf ein Listenelement, das auf wird schwebte wird. Das heißt, wenn die Maus auf einem Listenelement befindet, bezieht sich diese Regel darauf.

• li: hover ul bezieht sich auf eine ungeordnete Liste in einem hovered Listenelement. Mit anderen Worten, wenn einige Inhalte eine ungeordnete Liste ist, die in einer Liste ruht, die derzeit die Maus über sie hat, gilt diese Regel.

• Zeigen Sie die Liste als Block. Bildschirmsperre überschreibt die vorherigen display: none Anweisung und zeigt das besondere Element als Block. Der Text erscheint wieder magisch an.

Das Verstecken und suchen Trick ist nicht so toll auf seine eigene. Es ist eigentlich ziemlich ärgerlich der Inhalt wie das Pop-up zu haben und gehen weg. Es gibt eine andere mehr lästige Problem.

Um zu sehen, warum dies geschieht, nehmen Sie noch einen Blick auf den CSS-Code, der das Segment führt wieder zu erscheinen:

li: hover ul {display: block-}

Dieser Code bedeutet, Satz anzeigen nach Block für jede ul das ist ein Kind eines schwebte li. Das Problem ist, dass die Web-Entwicklung li enthält ein ul das beinhaltet zwei mehruls. Alle Listen unter Web-Entwicklung erscheinen, nicht nur die unmittelbare Kind.

Eine weitere Modifikation der CSS behebt dieses Problem:

li ul {display: none;} li: hover> ul {display: block-}

Je größer als Symbol (>) Ist ein spezielles Auswahlwerkzeug. Es gibt eine direkte Beziehung. In anderen Worten, die ul muss eine direkte Kind des schwebte sein li, nicht ein Enkel oder Urenkel. korrekt Mit diesem Kennzeichen an Ort und Stelle wirkt die Seite.

Dieser Trick ermöglicht es Ihnen, so tief verschachtelte Listen zu erstellen, wie Sie wollen, und jedes Segment zu öffnen, indem Sie auf die Mutter schwebt.

Meine aktuellen Code hat eine Liste mit drei Ebenen der Verschachtelung, aber Sie können so viele verschachtelte Listen hinzufügen, wie Sie diesen Code und verwenden möchten, um es als ein dynamisches Menü handeln machen.

Diese Art von Menü ist nicht unbedingt eine gute Idee. Sachen Pop Nachdem wie diese um ist eigentlich ziemlich störend.