יצירת גיליון סגנונות

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

הרווח בין שתי תוויות אלה הוא גיליון הסגנון שלך. אם אתה משתמש בקובץ CSS נפרד, הוסף את הנקודה הבאה בתגים "head":

לאחר מכן צור קובץ בשם "style.css", אשר יהיה גיליון הסגנון שלך. שמור את גיליון הסגנון באותה ספרייה כמו קובץ ה- HTML הראשי.

יצירת התפריט

עליך ליצור תווית שמכילה עבור התפריט כדי להיכנס לתוכן. הוסף את הדף הבא לדף ה- HTML שלך במיקום שבו ברצונך שהתפריט ילך:

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

תפריט {

רוחב: 200px; }

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

סימון HTML

הוסף את הקוד לתפריט. התפריט ישתמש ברשימה לא מסודרת:

. הוסף את הקוד הבא בין התוויות עבור התפריט שלך.
• פריט 1
  • אלמנט 1 תת תפריט
  • אלמנט 2 תת תפריט

שים לב לתוויות

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

סגנון CSS

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

התפריט מצ (למצב: יחסית;}

התפריט ul ul {

תפקיד מוחלט top you01; משמאל: 100%; רוחב: 100px; } div # menu ul ul {display: none;} div # menu ul li: hover ul {display: block;}

שמור את כל הקבצים. התפריט הנפתח שלך מוכן.

הפניות

• Tanfa.co.uk: CSS Pop-Out תפריט הדרכה (CSS הנפתח תפריט הדרכה)

מאמרים נוספים

• כיצד ליצור תפריט נפתח אופקי ב- HTML
• כיצד להסיר את כל סגנונות CSS עבור DIV יחיד
• כיצד לצמצם את הרווח בין השורות ב- HTML
• כיצד להוסיף שתי תמונות אופקית עם HTML
• כיצד לעקוף CSS בתוך כיתות DIV
• כיצד לעגן DIV בתחתית הדף
• כיצד ליצור קו אנכי המפריד טקסט HTML מתמונה