תוֹכֶן

• לדרוך
• חלק 1 מתוך 2: כתיבת ה- HTML
• חלק 2 מתוך 2: כתיבת CSS
• טיפים

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

לדרוך

חלק 1 מתוך 2: כתיבת ה- HTML

1. צור את קטע הניווט שלך. בדרך כלל אתה משתמש ב- nav> עבור סרגל הניווט ברחבי האתר, כותרת> עבור קטעי קישור קטנים יותר שמכילים עמודים, או div> אם נראה שאף אפשרות אחרת אינה מתאימה. מקם זאת ברכיב div> כך שתוכל להתאים את הסגנון של המיכל וגם של התפריט עצמו.
   • div>
   • nav>
   • / nav>
   • / div>
2. תן לכל קטע מאפיין כיתתי. נשתמש בתכונה class מאוחר יותר כדי לשנות את הסגנון של אלמנטים אלה באמצעות CSS. תן למכל ולתפריט גם תכונת מחלקה משלהם.
   • div>
   • nav>
   • / nav>
   • / div>
3. הוסף רשימה של פריטי תפריט. הרשימה הלא מסודרת (ul>) מכילה את פריטי התפריט הראשי (פריטי רשימה li>), אם המשתמש מעביר את העכבר מעליה, הוא / היא רואה את התפריטים הנפתחים. הוסף את המחלקה "clearfix" לרכיב הרשימה שלך; נגיע לכך בהמשך בגיליון האלקטרוני CSS.
   • div>
   • nav>
   •       ul>
   •          li> בית / li>
   •          li> עובדים
   •          li> צור קשר
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. הוסף קישורים. אם פריטי תפריט ברמה העליונה מקשרים גם לדפים משלהם, כעת תוכל להוסיף את הקישורים. קישור לעוגן לא קיים (כגון "#!"), גם אם הם לא מקשרים לשום דבר, כך שהסמן של המשתמש ייראה אחרת. בדוגמה זו, איש קשר מוביל לשום מקום, אך שני פריטי התפריט האחרים כן:
   • div>
   • nav>
   • ul>
   • li>a href = "/">בית/ a>/ li>
   • li>a href = "/ עובדים">אנשי צוות/ a>
   • / li>
   • li>a href = "#!">איש קשר/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. צור רשימות משנה עבור הפריטים הנפתחים. לאחר יצירת הסגנון, רשימות אלה מהוות את התפריט הנפתח. מקם את הרשימה בפריט הרשימה שהמשתמש יעביר עליו העכבר. הוסף מאפיין מחלקה וקישור בדיוק כמו קודם.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> בית / a> / li>
   • li> a href = "/ עובדים"> עובדים / a>
   •          ul>
   •             li> a href = "/ borsato"> מרקו בורסאטו / a> / li>
   •             li> a href = "/ titulaer"> קרייט טיטולר / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> איש קשר / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> דווח על בעיה / a> / li>
   •             li> a href = "/ support"> תמיכת לקוחות / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

חלק 2 מתוך 2: כתיבת CSS

1. פתח את גיליון הסגנונות של CSS. פרסם קישור לגיליון הסגנונות שלך ב- CSS בחלק הראשי של מסמך ה- HTML שלך אם הקישור עדיין לא נמצא שם. במאמר זה לא נסקור את היסודות של CSS, כגון הגדרת גופן וצבע רקע.
2. הוסף קוד clearfix. זוכר שהוספת את הכיתה "clearfix" לרשימת התפריטים? בדרך כלל, לאלמנטים של התפריט הנפתח יש רקע שקוף, המאפשר להעביר אלמנטים אחרים. התאמה פשוטה ל- CSS יכולה לפתור בעיה זו. להלן תיקון נחמד ומהיר, אם כי זה לא יעבוד ב- Internet Explorer 7 ומעלה:
   • .clearfix: אחרי {
   • תוכן: "";
   • תצוגה: שולחן;
   • }
3. צור את העיצוב הבסיסי. באמצעות קוד זה תוכלו למקם את התפריט בראש העמוד ולהסתיר את אלמנטים הנפתחים. זה פשוט מאוד בכוונה, כך שנוכל להתמקד בקוד הרלוונטי. אתה יכול לשנות את זה מאוחר יותר עם קוד CSS נוסף, כגון ריפוד ושוליים.
   • . עטיפת נב {
   • רוחב: 100%;
   • רקע: # 008B8B;
   • }
   •  
   • תפריט .nav {
   • מיקום: קרוב משפחה;
   • תצוגה: בלוק מוטבע;
   • }
   •  
   • תפריט .sub {
   • עמדה: מוחלט;
   • אל תציג דבר;
   • רקע: מס '555;
   • }
4. גרום לפריטים הנפתחים להופיע כאשר אתה מעביר את העכבר מעליהם. האלמנטים ברשימה הנפתחת מוגדרים כעת כך שלא יוצגו. הנה כיצד לגרום לרשימת משנה שלמה להופיע ברגע שאתה מעביר את העכבר מעל "ההורה":
   • תפריט .nav ul li: רחף> ul {
   • בלוק תצוגה;
   • }
   • הערה - אם תפריטים נוספים מוסתרים בפריטי התפריט בתפריט הנפתח, המאפיינים שנוספו כאן יחולו על כל התפריטים. אם אתה רוצה שהסגנון יחול רק על הרמה הראשונה של התפריטים הנפתחים, השתמש במקום זאת ב"- menu-menu> ul ".
5. ציין עם חץ שיש תפריט נפתח. מעצבי אתרים מראים בדרך כלל עם חץ למטה שאלמנט פותח תפריט נפתח. קוד זה מוסיף את החץ לכל אלמנט בתפריט שלך:
   • תפריט .nav> ul> li: אחרי {
   • תוכן: " 25BC"; / * unicode נמלט עבור החץ למטה * /
   • גודל גופן: .5em;
   • בלוק תצוגה;
   • עמדה: מוחלט;
   •    }
   • הערה - התאם את מיקום החץ לפי המאפיינים למעלה, למטה, לימין או לשמאל.
   • הערה - אם לא לכל פריטי התפריט שלך נפתחות, אל תשנה את המראה של כל תפריט הניווט בכיתה. במקום זאת, הוסף מחלקה נוספת (כגון נפתח) לכל אלמנט li שבו אתה רוצה חץ. עיין במחלקה זו בקוד לעיל.
6. התאם את הריפוד, הרקע ותכונות אחרות. התפריט אמור לעבוד עכשיו, אבל הוא עדיין לא נחמד במיוחד. בעזרת המאפיינים ב- CSS תוכלו להתאים אישית את מראה כל מחלקה או אלמנט והיכן הם נמצאים.

טיפים

• אם ברצונך להוסיף תפריט נפתח לטופס, קל מאוד ב- HTML5 כאשר האלמנט בחר>.
• הקישור a href = "#"> גולל לראש הדף, וקישור המפנה לעוגן לא קיים, כגון href = "#!">, אינו גולל. אם זה מרגיש מרושל מדי, אתה יכול לשנות את מראה הסמן עם CSS.
• כשאתה מעתיק ומדביק את קוד הדוגמה, הסר את כל התבלינים.