HTML-Code für ein Baum-Menü
HTML-Webseiten können hierarchische Strukturen, die besonders gut geeignet für Website Menüs sind. Haben Sie eine große Website mit vielen Abschnitten und Unterabschnitten darin, bietet ein Baum-Menü mit Ihren Nutzern intuitive Weise Ihre Inhalte navigieren. Das HTML-Markup für ein Baum-Menü beinhaltet normalerweise Listen, wobei jeder Listeneintrag, enthält ein HTML-Anchor-Element verknüpfen zu einer bestimmten Seite oder Website-Bereich. Viele Websites verwenden auch Cascading Stylesheets und JavaScript-Code, um das Erscheinungsbild und die Funktionalität der Baummenüs zu verbessern.
Inhalt
Beim Entwerfen einer Baum-Menü müssen Entwickler die verschiedenen Inhaltsabschnitten innerhalb eines Standorts zu kategorisieren. Beispielsweise hätte eine Website, Produkte verkaufen Abschnitte für jeden Produkttyp, mit weiteren Unterabschnitten innerhalb dieser Produkte in Gruppen einzuteilen. Manchmal verwenden die Webentwickler Unterverzeichnisse, um Website-Content, in diesem Fall zu organisieren, die jedes Verzeichnis ein Element der obersten Ebene im Baum Menü entsprechen könnte. Jedes Element im Menü werden letztlich einen HTML-Link, wie im folgenden Beispielcode:< a Href = "Kleidung /" > </a > Kleidung
Diese Code-Links in einen Ordner namens "Kleidung", die im Stammverzeichnis Website befindet. Da keine Seite angezeigt wird, wird der Link zur Index-Seite in diesem Verzeichnis geöffnet. Innerhalb der Sektion Kleidung im Baum könnten Elemente auf bestimmte Seiten wie folgt zu verknüpfen:< a href="clothing/trousers.html" > </a > Hosen
Listen
HTML Baummenüs beinhalten normalerweise Listen. Das folgende Beispiel Markup veranschaulicht ein Menu mit nicht nummerierten Listen:< Ul >< li >< a Href = "Kleidung /" > Bekleidung </a >< / li >< li >< Ul >< li >< a href="clothing/trousers.html" > </a >< / li > Hosen< li >< a href="clothing/jackets.html" > </a >< / li > Jacken</>< UL / LI >< li >< a Href = "Geschenke /" > </a >< / li > Geschenke< li >< Ul >< li >< a href="gifts/food.html" > </a >< / li > Lebensmittel< li >< a href="gifts/novelty.html" > Neuheit Elemente </a >< / li >< li >< a href="gifts/dvds.html" > </a >< / li > DVDs</>< UL / LI ></ul >
Dieses Menü enthält zwei Top-Level-Abschnitte für Kleidung und Geschenke. Innerhalb jeder dieser sind weitere Listenelemente. Jedes Listenelement kann enthalten eine andere Liste, so dass für komplexe Websites, ein Baum-Menü mehrere Ebenen umfassen kann. Durch Klicken auf ein Element der obersten Ebene wird den Benutzer auf der Homepage für diesen Abschnitt der Site nehmen, während durch Klicken auf ein bestimmtes Element zu einer bestimmten Seite innerhalb eines Abschnitts kümmert.
Stil
Die meisten Websites verwenden Cascading Style Sheets, um ihre Menüs zu formatieren. Innerhalb der CSS-Code für eine Website können Entwickler verschiedene Aspekte der Menü-Darstellung, das Layout sowie die sichtbaren Merkmale eines jeden Elements diktieren. Web-Browser angezeigt oft Aufzählungspunkte auf Listenelemente standardmäßig die viele Entwickler wählen, nicht angezeigt. Der folgende CSS-Beispielcode veranschaulicht dies:UL {List-Style-Type: none;}
Um ein bestimmtes Aufzählungszeichen wählen, gilt der folgende Code:UL {List-Style-Type: quadratisch;}
Entwickler können optional bei Anpassung der CSS, um jede dieser Class-Attribute der Listen auf verschiedenen Ebenen innerhalb eines Menüs Baum hinzufügen.
Skripting
Viele Webseiten nutzen JavaScript-Funktionen zur Verbesserung der Interaktivität mit Baummenüs. Mit diesen können Entwickler angeben, dass bestimmte Elemente nicht ursprünglich für den Benutzer sichtbar sein sollte. Beispielsweise kann durch Klicken auf ein Element der obersten Ebene seinen Unterabschnitten dynamisch angezeigt werden führen. JavaScript-Funktionen können die Anzeige oder die Transparenz-Eigenschaft eines Elements um zu diktieren, ob der Browser zeigen oder verstecken soll. Der folgende Code veranschaulicht das Festlegen eines Listenelements ausgeblendet werden:Element.Style.Visibility="Hidden";
Die folgende Alternative verwendet die Display-Eigenschaft:Element.Style.Display="None";