נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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.

 

 

הוסף תגובה חדשה

 

= 4 + 7

תמונת המגיב

מתן בתאריך: 26.06.2015

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

תמונת המגיב

יוסי בן הרוש בתאריך: 26.06.2015

הי מתן,
התזוזה שאתה כותב עליה היא תוצאה של שינוי בממדי הקישור או בריווח. תנסה לוודא שהתכונות הבאות אינן שונות בין המצב הרגיל ומצב ה-hover:
margin, padding, border וכיו"ב.
זה יפתור לך את הבעיה.