מדריך CSS מספר 25 - עיצוב תפריטים

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

במדריך זה נראה ונסביר את הקוד ששימש אותי ביצירת התפריט. נתחיל מקוד ה-html:

<div id="wrapper">
 <div id="navigation">
  <a href="####.html" class="button">בית</a>
  <a href="####.html" class="button">אתרים</a>
  <a href="####.html" class="button">אירועים</a>
  <a href="####.html" class="button">צור קשר</a>
 </div><!--end navigation bar-->
</div><!--end wrapper-->

הקוד נמצא בתוך wrapper שתוחם את הדף (החלק הלבן של הדף) שבתוכו div ששמו navigation. כל שורה בקוד היא לינק ששייך למחלקה button, ומקשר לקובץ html כשלהו שהוא חלק מהאתר.

קוד CSS לעיצוב תפריטים

נוסיף את קוד ה-css לעיצוב הכפתורים (אפשר לקרוא על הדרך להוסיף קוד CSS לקובץ html). נתחיל מעיצוב ה-wrapper, שקובע למעשה את מיקום הדף על המסך. השתמשתי בעיצוב סטנדרטי שרוחבו 960 פיקסלים, ומיקמתי את הדף בדיוק באמצע המסך באמצעות שוליים (margin) באורך זהה מימין ומשמאל לדף.

#wrapper {
  width: 960px;
  margin: 0 auto;
}

נוסיף קוד שמטרתו לעצב את האזור בדף שבו יושב התפריט (אזור ששמו navigation):

#navigation {
  width: 960px;
  font-size: 18px;
  margin: 20px auto;
  text-align: center;
}

נתתי לאזור ה-navigation רוחב כרוחבו של ה-wrapper באמצעות התכונה width, שיניתי את גודל הגופן ויישרתי את הכתב למרכז. בנוסף, באמצעות התכונה margin סידרתי את כפתורים בדיוק באמצע.

את הכפתורים ששייכים למחלקה button עיצבתי עם קו מתאר (התכונה border), צבע רקע (background-color), צבע אותיות (color) ורוחב עם width. הצפה ימינה באמצעות float: right חיונית כדי להציב את הכפתורים בשורה אחת. לקריאה נוספת בנושא של הצפת אלמנטים (float).

.button{
  width: 190px;
  float: right;
  border:1px inset #FF0;
  padding:1px 5px;
  color:#FF0;
  background-color:#2166FF;
  font-family:Arial, sans-serif;
  text-align:center;
  text-decoration:none;
  display:block;
}

שימו לב, שקוד זה גורם לטקסט של הקישוריות להופיע ללא קו תחתון באמצעות text-decoration:none. שינוי חשוב הוא הצגה של הכפתור כתיבה באמצעות display:block, מפני שזה מה שמאפשר ללחיצה בכל מקום על הכפתור להפעיל את הלינק. זה לעומת המצב ברירת המחדל שהוא display:inline, שבו רק לחיצה על הטקסט יכולה לגרום להפעלת הקישור.

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

a.button:link {
  background-color:#2166FF; 
}

a.button:hover { 
  color:#66cc33; 
  border:1px outset #F90; 
}

a.button:visited {
  background-color:#09F; 
}

הקוד מבחין בין מצבים שונים של הכפתורים. המצבים הם link (לפני שלחצו על הכפתורים), hover (ריחוף על הכפתורים) ו-visited (אחרי לחיצה על הכפתורים). אפשר למצוא מידע מועיל נוסף על עיצוב קישוריות במדריך עיצוב קישוריות באתר.

כיצד להוסיף לתפריט עיצוב שונה לקישורים הפעילים? על כך תוכלו לקרוא במדריך jQuery שמסביר על jQuery.each .

על תפריט משוכלל יותר שכולל קוד של jQuery ניתן לקרוא במדריך אנימציות של jQuery.

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים