תפריטים נפתחים בדפי האתר משמשים לחיסכון במקום ולספק מצגת לוגית של מבנה משאב האינטרנט. ישנן דרכים רבות ליישם את האלמנט הזה, אחת הפשוטות מובאות להלן.
זה הכרחי
ידע בסיסי בשפות HTML ו- CSS
הוראות
שלב 1
קוד ה- HTML של התפריט משתמש באלמנטים מקוננים של רשימה (UL ו- LI), שבתוכם ממוקמים קישורים לדפים. הוא אינו מכיל מבנים מורכבים. הדינמיקה מיושמת באמצעות CSS, שגוש התיאור שלו ממוקם ישירות בקוד המקור של הדף. גם בזה אין שום דבר מיוחד, מלבד הטקסט מכיל כמה הסברים על מטרתם של גושי סגנון מסוימים.
שלב 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
תפריט נפתח * {
משפחת פונטים: ורדנה;
גודל גופן: 14 פיקסלים;
} ul, li, a {
ריפוד: 0;
בלוק תצוגה;
גבול: 0;
שוליים: 0;
} ul {
גבול: 1px מוצק #AAA;
רוחב: 150 פיקסלים;
סגנון רשימה: אין;
רקע: #FFF;
} li {
צבע רקע: #AAA;
מיקום: קרוב משפחה;
אינדקס z: 9;
ריפוד: 1px;
}
li.folder {רקע-צבע: #AAA;}
li.folder ul {
עמדה: מוחלט;
למעלה: 5 פיקסלים;
משמאל: 111 פיקסלים; / * לדפדפני IE * /
}
li.folder> ul {left: 140px;} / * לדפדפנים אחרים * / a {
ריפוד: 2 פיקסלים;
גבול: 1px מוצק #FFF;
קישוט טקסט: אין;
רוחב: 100%; / * לדפדפני IE * /
צבע: # 000;
מודגש;
}
li> a {width: auto;} / * לדפדפנים אחרים * / li a {
רוחב: 140 פיקסלים;
בלוק תצוגה;
} li a.submenu {
צבע רקע: צהוב;
} / * קישורים * /
a: רחף {
גבול-צבע: אפור;
צבע רקע: # FF0000;
צבע שחור;
}
li.folder a: רחף {
צבע רקע: # FF0000;
} / * תיקיות * /
ul ul, li: hover ul ul {display: none;}
li.folder: רחף {z-index: 10;}
li: רחף ul, li: רחף li: רחף ul {display: block;}
- 1. עמוד
-
2. תיקיה
- 2.1 עמוד
-
2.2 תיקיה
- 2.2.1 עמוד
- 2.2.2 עמוד
- 2.2.3 עמוד
- 2.3 עמוד
-
3. תיקיה
- 3.1 עמוד
- 3.2 עמוד
- 3.3 עמוד
- 4. עמוד
שלב 3
ניתן להוסיף תמיכה בגירסאות ישנות יותר של דפדפני Internet Explorer לקוד זה - הוא מיושם באמצעות JavaScript (על ידי פיטר נדרלוף). עליכם להוריד את הקובץ עם הקוד הנדרש, למשל מקישור זה - https://peterned.home.xs4all.nl/htc/csshover3.htc. יש למקם אותה באותה תיקיה כמו העמוד הראשי. ובתיאור הסגנונות של הדף הראשי הוסף קישור אליו - ניתן למקם אותו ישירות אחרי תג הסגנון הפותח: / * לדפדפני IE ישנים *
גוף {התנהגות: url ("csshover3.htc");}
