בעזרת קוד HTML מוכשר וכללי CSS פשוטים תוכלו ליצור תפריט קופץ, להשלים אותו ולשנות אותו. על ידי שימוש בטבלאות מדורגות ובכלי שפת הסימון, אתה יכול להבטיח שהתפריט עצמו פועל כהלכה בכל הדפדפנים.
הוראות
שלב 1
תחזוק תחילה בשורת התפריטים הבסיסית. צור רשימה ממוספרת מיוחדת עם תפריט משנה בעורך טקסט. בדרך כלל "פנקס רשימות" משמש למטרות אלה. תפריט המשנה משמש כמרכיב ברשימת ההורים. לדוגמא: ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5 ראשון
שלב 2
שמור רשימה זו בקובץ HTML נפרד. ואז צור קובץ.css. הזן את כל הפרמטרים הנדרשים לגיליון סגנון. עשו זאת בזהירות רבה, כי טעות אחת, והתפריט הנפתח לא יופיע כהלכה או לא יעבוד כלל.
שלב 3
הסר את הכדורים והריפודים שהוחלו ברשימת הכדורים. הגדר את רוחב התפריט באמצעות כלי CSS: ul -style: none; רוחב: 200 px; }
שלב 4
סמן את המיקום היחסי של כל הפריטים ברשימה בתכונה הנקראת position: ul li: relative; }
שלב 5
לאחר מכן סדרו את תפריט המשנה, שרכיביו יופיעו מתפריט האב מימין כאשר סמן העכבר מעל הפריט: li ul: מוחלט; שמאל: 199 פיקסלים; עליון: 0; תצוגה: אין; }
שלב 6
המאפיין השמאלי הוא פיקסל אחד פחות מרוחב התפריט עצמו. זה מאפשר למקם פריטים קופצים כהלכה מבלי ליצור גבולות כפולים. תכונת התצוגה משמשת להסתרת תפריט המשנה בעת פתיחת הדף.
שלב 7
מעצבים את הקישורים לפי הצורך בעזרת אפשרויות ה- css המתאימות. כלול את הפרמטר display: block כך שהקישורים תופסים את כל השטח השמור להם. כדי לגרום לתפריט להופיע כאשר סמן העכבר מרחף מעליו, הזן את הקוד הבא: li: hover ul: block; }
שלב 8
הגדר אפשרויות נוספות להצגת פריטי רשימה וקישורים לפי הצורך. כלול מאפיין בקובץ.html. התפריט הקופץ מוכן לשימוש.
