HTML код за дърво меню

съдържание

При проектирането на менюто за дърво, разработчиците трябва да категоризират различните секции на съдържанието на даден сайт. Например, сайт за продажби на продукти може да има раздели за всеки тип продукт с допълнителни подраздели в тях, за да разделят продуктите на категории. Понякога уеб програмистите използват поддиректории, за да организират съдържанието на сайта, в който случай всяка директория може да съответства на елемент от по-високо ниво в дървото на менюто. Всеки елемент от менюто в крайна сметка ще бъде HTML връзка, както е показано в следния пример код: Облекло

Този код свързва папка, наречена "дрехи", която се намира в основната директория на уебсайта. Тъй като няма посочена страница, връзката ще отвори индексната страница в тази директория. В раздела за дрехи в менюто за дървета елементите могат да бъдат свързани с определени страници, както следва: Панталони

списъци

HTML менютата на дърво обикновено включват списъци. Следният пример за набиране показва меню, използващо неброенни списъци:

• облекло
• • панталони
  • Якета
• Подаръци
• • храна
  • Новости елементи
  • DVD-та

Това меню съдържа два раздела на първо ниво за "дрехи" и "подаръци". Във всяка от тях има допълнителни елементи в списъка. Всеки елемент в списъка може да съдържа друг списък за сложни сайтове, като едно дърво меню може да включва няколко нива на дълбочина. Кликването върху елемент от по-високо ниво ще доведе потребителя до страницата в този раздел на страницата, като кликването върху конкретен елемент ще ви отведе до определена страница в секция.

стил

Повечето сайтове използват стилови листа в менютата си. В рамките на CSS кода, разработчиците могат да диктуват различни аспекти на външния вид на менюто, включително дизайна, както и видимите характеристики на всеки елемент в списъка. Уеб браузърите обикновено показват куршуми в елементите от списъка по подразбиране, които много разработчици избират да не показват. Следният пример за CSS код показва следното:

ul {style-style: none; }

За да изберете конкретен стил на куршум, кодът ще бъде както следва: ul {list-style-type: square;}

Разработчиците могат по желание да добавят атрибути на класа към списъци на различни нива в менюто на дърво, като адаптират CSS за всеки от тях.

Писане на скрипта

Много уебсайтове използват функции на JavaScript, за да подобрят интерактивността с дървовидните менюта. Като ги използват, разработчиците могат да уточнят, че определени елементи не се виждат първоначално от потребителя. Например, кликване върху елемент в списъка от най-високо ниво може да доведе до динамичното стартиране. Функциите на JavaScript могат да използват свойството на презентацията или видимостта на даден елемент, за да покажат на браузера да се покаже или скрие. Следният код показва конфигурацията на елемент в списъка, който е скрит: element.style.visibility = "скрит";

Следната алтернатива използва собствеността на презентацията: element.style.display = "none";