קוד HTML לתפריט עץ

תוכן

בעת עיצוב תפריט עץ, מפתחים צריכים לסווג את קטעי התוכן השונים של האתר. לדוגמה, אתר מכירות של מוצר יכול לכלול קטעים עבור כל סוג מוצר, כאשר תת-קבוצות נוספות בתוכם יחלקו את המוצרים לקטגוריות. לפעמים, מפתחי אינטרנט משתמשים בתיקיות משנה כדי לארגן את תוכן האתר, ובמקרה זה כל ספרייה יכולה להתאים למרכיב ברמה גבוהה יותר בעץ התפריטים. כל פריט בתפריט יהיה בסופו של דבר קישור HTML, כמו בקוד לדוגמה הבא: בגדים

קוד זה מקשר תיקייה בשם "בגדים", אשר נמצא בספריית השורש של האתר. מאחר שאין דף שצוין, הקישור יפתח את דף האינדקס בספריה זו. בתוך קטע הבגדים של התפריט עץ, פריטים ניתן לקשר לדפים מסוימים, כדלקמן: מכנסיים

רשימות

תפריטי עץ HTML בדרך כלל כרוכים ברשימות. דוגמת החיוג הבאה מציגה תפריט המשתמש ברשימות לא ממוספרות:

• בגדים
• • מכנסיים
  • מעילים
• מתנות
• • מזון
  • פריטים חדשים
  • תקליטורי DVD

תפריט זה מכיל שני חלקים ברמה הראשונה עבור "בגדים" ו "מתנות". בתוך כל אחד מהם פריטים נוספים ברשימה. כל פריט ברשימה יכול להכיל רשימה אחרת עבור אתרים מורכבים, תפריט עץ יכול להיות כרוך בכמה רמות של עומק. לחיצה על אלמנט ברמה גבוהה יותר תעביר את המשתמש לדף של אותו קטע בדף, לחיצה על פריט מסוים תשלח אותך לדף מסוים בתוך קטע.

סגנון

רוב האתרים משתמשים בגיליונות סגנון בתפריטים שלהם. בתוך קוד CSS, מפתחים יכולים להכתיב היבטים שונים על המראה של התפריט, כולל העיצוב, כמו גם את המאפיינים הגלויים של כל פריט ברשימה. דפדפני אינטרנט בדרך כלל מציגים תבליטים בפריטי רשימה המוגדרים כברירת מחדל, אשר מפתחים רבים בוחרים שלא להציג. הדוגמה הבאה של קוד CSS מציגה זאת:

ul {list-style-type: none; }

כדי לבחור סגנון תבליט מסוים, הקוד יהיה כדלקמן: ul {list-style-type: square;}

מפתחים יכולים להוסיף תכונות מחלקה לרשימות ברמות שונות בתפריט עץ, תוך התאמת CSS עבור כל אחת מהן.

כתיבת התסריט

אתרים רבים משתמשים בפונקציות JavaScript כדי לשפר את האינטראקטיביות עם תפריטי העץ. בעזרתם, מפתחים יכולים לציין שפריטים מסוימים אינם גלויים למשתמש תחילה. לדוגמה, לחיצה על פריט ברשימה ברמה העליונה עלולה לגרום להתחלה דינמית. פונקציות JavaScript יכולות להשתמש במאפיין המצגת או בחשיפה של אלמנט כדי להורות לדפדפן להציג או להסתיר. הקוד הבא מציג את התצורה של פריט ברשימה המוסתרת: element.style.visibility = "מוסתר";

החלופה הבאה משתמשת במאפיין המצגת: element.style.display = "none";