התפריט משמש כדי להקל על ניווט המשתמשים בקטעים באתר. כדי למשוך את תשומת לבו של המבקר, התפריט צריך להיות פונקציונלי, קל לשימוש ובו זמנית להיות משולב עם עיצוב המשאב כולו.
הוראות
שלב 1
לפני יצירת תפריט, החליטו על סוגו. ניתן ליצור תיבה אופקית או אנכית נפתחת שתוצג בפני המשתמש כאשר המשתמש מרחף מעליו עם סמן העכבר. בבחירת תפריט מסוים, אתה יכול להיות מונחה על ידי כמה נוח יהיה למבקרים להשתמש בו וכיצד הוא ישולב עם העיצוב.
שלב 2
לאחר בחירת סוג תפריט, פתח את קובץ הדף באמצעות עורך הטקסט שבו אתה משתמש לעריכת HTML. נווט לחלק הקוד הרצוי שבו ברצונך להכניס את אלמנט הממשק שלך.
שלב 3
לאחר מכן, ערוך רשימת אפשרויות על ידי יצירת בלוק והכנת רשימה ממוספרת עם מזהה שהוקצה לה. לדוגמה:
- קישור 1
- קישור 2
- קישור 3
בדוגמה זו יצרתי רשימת תבליטים של שלושה אלמנטים והנחתי אותה בשכבת div עם מזהה לוח ID.
שלב 4
עבור לגוש החלקים של הדף שלך וצור את תפריט הגיליונות הסגנון המתאים. אם ברצונך ליצור תפריט אופקי, תוכל לכלול את התכונה המוטבעת עבור הרשימה המתקבלת:
#panel ul li {display: inline; }
שלב 5
כדי ליצור קו אופקי לכל אורך הדף, אתה יכול להשתמש בקוד הבא:
#panel ul {שוליים-שמאל: 0; ריפוד: 2 פיקסלים 0; }
שלב 6
אז אתה יכול לעשות את החלוקה החזותית למלבנים:
#panel ul li a {margin-left: 3px; גבול: 1px; ריפוד: 2 פיקסלים 3 פיקסלים; רקע: כחול; }
קוד זה מגדיר כניסות טקסט מאלמנטים גבוליים דרך מאפייני השוליים שמאלה וריפוד, וגם מגדיר צבע רקע לכל אחד מפריטי הרשימה. בדוגמה זו, הצבע הוא כחול, אך תוכלו לשנות אותו על פי שיקול דעתכם.
שלב 7
כדי להצביע על הפריט בדף הנוכחי שנבחר בכרטיסייה, הגדר את הפרמטרים המתאימים למחלקה הפתוחה:
# תפריט ul li a # פתוח {רקע: אדום; גבול תחתון: 1 פיקסלים; }
הדף הנוכחי שנבחר בחלונית יוצג כעת באדום.
שלב 8
שמור את השינויים בקובץ ובדוק את הפונקציונליות של הקוד הכתוב על ידי פתיחת הדף שלך דרך דפדפן. כדי להגדיר אפשרויות תצוגה נוספות, אתה תמיד יכול להוסיף CSS או HTML כדי לשפר את מראה האובייקט.
