Kod HTML dla menu drzewa

Treść

Podczas projektowania menu drzewa programiści muszą kategoryzować różne sekcje treści witryny. Na przykład witryna sprzedaży produktów może zawierać sekcje dla każdego rodzaju produktu z dodatkowymi podsektorami w celu podziału produktów na kategorie. Czasami twórcy stron internetowych używają podkatalogów do organizowania zawartości strony, w którym to przypadku każdy katalog mógłby odpowiadać elementowi wyższego poziomu w drzewie menu. Każdy element menu będzie ostatecznie linkiem HTML, tak jak w poniższym przykładowym kodzie: Ubrania

Ten kod łączy folder o nazwie "odzież", który znajduje się w katalogu głównym witryny. Ponieważ nie ma wskazanej strony, link otworzy stronę indeksu w tym katalogu. W sekcji z ubraniami menu drzewa elementy można powiązać z określonymi stronami w następujący sposób: Spodnie

Listy

Menu drzewa HTML zwykle zawiera listy. Poniższy przykład wybierania pokazuje menu z nienumerowanymi listami:

• Odzież
• • Spodnie
  • Kurtki
• Prezenty
• • Jedzenie
  • Nowości
  • DVD

To menu zawiera dwie sekcje pierwszego poziomu dla "ubrań" i "prezentów". Wewnątrz każdej z nich znajdują się dodatkowe pozycje na liście. Każda pozycja na liście może zawierać inną listę dla złożonych witryn, menu drzewa może obejmować kilka poziomów głębokości. Kliknięcie na element wyższego poziomu spowoduje przejście użytkownika do strony tej sekcji strony, kliknięcie konkretnego elementu spowoduje wysłanie do określonej strony w sekcji.

Styl

Większość witryn używa arkuszy stylów w swoich menu. W kodzie CSS programiści mogą dyktować różne aspekty wyglądu menu, w tym projekt, a także widoczne cechy każdego elementu na liście. Przeglądarki internetowe zazwyczaj wyświetlają punktory w domyślnych elementach listy, które wielu programistów nie wyświetla. Poniższy przykład kodu CSS pokazuje to:

ul {list-style-type: none; }

Aby wybrać konkretny styl punktora, kod będzie następujący: ul {list-style-type: square;}

Programiści mogą opcjonalnie dodawać atrybuty klas do list na różnych poziomach w menu drzewa, dostosowując CSS do każdego z nich.

Pisanie scenariusza

Wiele witryn korzysta z funkcji JavaScript w celu poprawy interaktywności z menu drzewa. Korzystając z nich programiści mogą określić, że niektóre elementy nie są początkowo widoczne dla użytkownika. Na przykład kliknięcie elementu na liście najwyższego poziomu może spowodować dynamiczne pojawienie się początku. Funkcje JavaScript mogą korzystać z właściwości prezentacji lub widoczności elementu, aby zachęcić przeglądarkę do pokazania lub ukrycia. Poniższy kod pokazuje konfigurację elementu na ukrytej liście: element.style.visibility = "hidden";

Następująca alternatywa używa właściwości prezentacji: element.style.display = "none";