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