ניתן ליצור תפריט נפתח נחמד לא רק ב- JavaScript, אלא גם באמצעות תגי HTML סטנדרטיים. שיטה זו ליצירת תפריט נפתח תועיל למי שרק מתחיל את צעדיו הראשונים ביצירת אתרים ורוצה לפשט את עבודת יצירת התפריטים בעמודים.
הוראות
שלב 1
בקוד HTML, תפריט כזה הוא רשימה לא מסודרת ובתוכה רשימות מקוננות. כדי להתחיל, צור קובץ style.css והעתק את קוד ה- CSS הבא לשם סגנון ועיצוב התפריט:
#nav, #nav ul {
סגנון רשימה: אין;
שוליים: 0;
ריפוד: 0;
גבול: 1px מוצק # 000;
רקע: # 515151;
לצוף: שמאלה;
רוחב: 100%;
}
# נאב לי {
לצוף: שמאלה;
מיקום: קרוב משפחה;
צבע רקע: # 003366;
גב / קרקע: אין;
}
#nav li ul {
אל תציג דבר;
עמדה: מוחלט;
צבע רקע: # 003366;
ריפוד: 8 פיקסלים 0;
רוחב: 138 פיקסלים;
}
שלב 2
כעת עלינו להוסיף מעט קישוט לפריטי התפריט. הגדירו את הרוחב והגובה עבורם, הסירו את קווי השורה התחתונה, הגדירו רוחב ברור לכל קישור וציינו את צבעי הרקע הרצויים.
שלב 3
עבור כל השינויים הללו, הוסף את הקוד הבא לקובץ:
#nav a {
צבע: #fff;
קישוט טקסט: אין;
בלוק תצוגה;
רוחב: 120 פיקסלים;
ריפוד: 4 פיקסלים 10 פיקסלים;
צבע רקע: # 003366 חזור- y ימינה;
}
#nav a: רחף {
צבע: # 000;
צבע רקע: # 0033FF;
}
#nav li: רחף {
צבע רקע: # 333333;
}
לאחר מכן הוסף את פיסת הקוד הבאה כדי לסיים את התפריט:
#nav li: hover li ul {
אל תציג דבר;
רוחב: 138 פיקסלים;
למעלה: -9 פיקסלים;
משמאל: 133 פיקסלים;
}
#nav li: רחף li: רחף ul {
בלוק תצוגה;
}
שלב 4
בגרסת ה- HTML, רשימת התפריטים הכללית הלא מסודרת נראית כך - על בסיסה נוצר התפריט, שהוזכר במאמר.
- בית
-
קָטָלוֹג
-
כל המוצרים
- לפי תאריך
- יצרנים
- אַחֵר
-
