מדריך לעיצוב תפריטים בעזרת שפת CSS

אין כמעט אתר שאינו מכיל תפריטים. מטרתם של התפריטים באינטרנט להוות אמצעי קל, נוח ונאה המאפשר לגולשים לנווט בתוך הדפים השונים שבאתר על פי מפתח נושאי. למרות שבשפת HTML ישנו אלמנט ששמו <menu> לא נשתמש בו לצורך בניית תפריטים אלא ברשימות לא ממוינות <ul>. לצורך הבנת מדריך זה יש להכיר את האלמנטים השונים המרכיבים רשימות בשפת HTML. ניתן למצוא הסברים על כל האלמנטים שיוזכרו במדריך זה  במדריך השלם לשפת HTML 5 שבאתר זה. כמו כן, לפני קריאת מדריך זה מומלץ לקרוא את המדריך על עיצוב קישורים ואת המדריך על עיצוב רשימות בעזרת CSS.  

קישורים - אבני היסוד בבניית תפריטים

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

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

visited - כאן נגדיר את מראה הקישור לאחר שהמשתמש כבר השתמש בו.

hover - החשוב מבין ארבעת דמוי המחלקות. כאן נגדיר כיצד ייראה הקישור כאשר הגולש יעביר את העכבר שלו מעל הקישור.

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

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

בדוגמת הקוד הבאה אראה כיצד נוכל לנצל את ה"אירועים" השונים של קישורים כדי לעצב קישור המשנה את צבעו כאשר המשתמש מעביר את העכבר מעליו (Hover).

a
{
  text-decoration:none;
  color:white;
  background-color:blue;
  padding:5px;
}
a:hover{text-decoration:none;background-color:red;color:white;}

   


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

רשימות - השלד שעליו נבנים תפריטים

לפני קריאת מדריך זה כדאי לקרוא את הפרק אודות עיצוב קישורים בעזרת CSS במדריך זה וכן את הפרקים אודות האלמנטים <ul> ו- <li> במדריך השלם לשפת HTML5 אשר באתר זה.

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


<ul>
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

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

עיצוב תפריטים אנכיים

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

להלן דוגמה לקוד CSS שיהפוך את הרשימה שלנו לתפריט אנכי:


ul
{
  margin:0; נצמיד את התפריט לשמאל ונימנע מבולטים
}

a
{
  width:100px; רוחב התפריט
  text-decoration:none; בעזרת שורה זו נימנע מקו תחתי מתחת לקישור שלנו
  color:white; באמצעות שורה זו נגדיר כי צבע הטקסט שלנו יהיה לבן
  background-color:blue; בעזרת שורה זו נגדיר כי צבע הרקע של הפריטים בתפריט שלנו יהיה כחול
  padding:3px 10px; בעזרת שורה זו נגדיר את מיקום הטקסט בתוך פריטי התפריט
  border-bottom:1px solid white; נוסיף קו לבן בתחתית כל פריט
}
a:hover {background-color:red;} נשנה את צבע הרקע של הפריטים בתפריט בזמן מעבר עכבר

   


עיצוב תפריטים אופקיים

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

1. float:left - בעזרת תכונה זו נצמיד  את כל פריטי הרשימה זה לזה.

2. display:inline - שימוש בהגדרה זו עבור אלמנט הפריט <li> ברשימה יגרום ליישור כל הפריטים ויהפוך את התפריט שלנו לאופקי.

ul
{
  margin:0; נצמיד את התפריט לשמאל ונימנע מבולטים
}

a
{
  float:left; נכריח את כל הקישורים להיצמד לשמאל וכך בעצם להיצמד זה לזה
  width:100px; רוחב התפריט
  text-decoration:none; בעזרת שורה זו נימנע מהצגת קו תחתי מתחת לקישור שלנו
  color:white; באמצעות שורה זו נגדיר כי צבע הטקסט שלנו יהיה לבן
  background-color:blue; בעזרת שורה זו נגדיר כי צבע הרקע של הפריטים בתפריט שלנו יהיה כחול
  padding:3px 10px; בעזרת שורה זו נגדיר את מיקום הטקסט בתוך פריטי התפריט
  border-right:1px solid white; נוסיף קו לבן מימין לכל פריט
}
a:hover {background-color:red;} נשנה את צבע הרקע של הפריטים בתפריט בזמן מעבר עכבר
li {display:inline;} פקודה זו תגרום ליישור אופקי של כל הפריטים ברשימה שלנו

   


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש