מדריך יצירת תפריט ניווט באמצעות Css

תפריט הוא אחד מהדברים ההכרחיים באתר אינטרנט עכשווי ומודרני. תפריט מאפשר לגולשים לעבור בין דפי האתר באופן קל ופשוט. קיים מגוון רב של סוגי תפריטים. תפריט יכול להיות לצורכי נווט או לצורכי שיתוף מידע באתר כמו ב- Twitter, Facebook, Rss דוא"ל וכו'. יצירת תפריט ניווט באמצעות Css הוא תהליך קצר ומהיר אך דורש דייקנות. כעת אני ילמד אותך איך ליצור תפריט ניווט באמצעות Css על-ידי שימוש ב- Photoshop בשיטה המכונה CSS Sprites.

[adsense]

מה זה CSS Sprites ?

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

שלב ראשון – יצירת תמונה

נא לגשת לתוכנת פוטושופ, ועליך ליצור תמונה חדשה בגדלים הבאים – 432 פיקסלים רוחב על 78 פיסקלים לאורך. הוסף כותרת לתפריט, ו-4 סמלים של אפשרויות השיתוף. במקרה שלנו, אנחנו נשתמש בסמלים של Twitter, Facebook, Rss, ו-Email. הסמלים הורדו מקישור הבא: Graphicriver

צור תמונה בדיוק בצורה שמופיע בתמונה:

השתמש ב-Guides המשמש להגדרת גבולות הסמלים כפי שזה מופיע בתמונה. השלב של הגדרת גבולות היא חשובה מכוון שזה ישמש אותך להגדרת גדלים ב-Css.
שכפל את התמונות של הסמלים באמצעות שימוש בשכפול שכבות (Layers). לאחר שכפול, עליך להפוך את צבעים של הסמלים המשוכפלים לשחור לבן.

נא להשתמש בסמלים שיצרת כדי ליצור את התמונה הבא:

שמור את הקובץ כקובץ PNG ושמור אותו בתיקיה נפרדת לדוגמה IMAGES בתוך תקיית האתר שלך. כעת סיימנו עם עיצוב התמונה שישמש אותנו כתפריט ניווט.

שלב 2.  – יצירת HTML

נא לפתוח את תוכנת עריכה כמו Dreamweaver או Notepad, נא ליצור את קובץ HTML ולשמור אותו. אנחנו חייבים כעת אלמנט Div ותפריט קישורים כדי ליצר Css Sprites.

הכנס את הקוד הבא במסמך ה-HTML שלך.

כמובן עליך להכניס את הקישורים שלך במקום סימן # . שים לב שהאלמנט הראשון בתפריט אינו קישור ! זו היא אך ורק הודעת "שתף אותי".

שלב שלישי – CSS

נא לפתוח קובץ CSS ולרשום בו את השורות הבאות.

הסבר:
סלקטור הראשון "#Share-webist" מכיל את הפרמטרים הגלובליים כמו מיקומים וגדלים עבור התפריט שלך.
סלקטור ( Share-webist ul#shar li ) מודיע לדפדפן להציג את הרשימה (LIST) בצורה אופקית.
סלקטור שלישי ( Share-webist ul#shar li a ) קורא לתמונה שלנו שיצרנו באמצעות פוטושופ.

התמונה webist-social.png הוא השם של התמונה שיצרנו בפוטושופ.

קטע הקוד הנ"ל מגדיר את הכותרת שבתמונה בשם "שתף אותי".

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

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

אוקי, לא קיבלנו את התוצאה הרצויה. הסיבה לכך היא אי-התאמה במיקומם של התמונות לסמלים. כדי לסדר את זה עלינו לגשת לקוד שמופיע לך בתמונה הקודמת ולשנות את הפיקסלים של background-position כדי להגיע להתאמה מלאה. חשוב לציין שקיימת 2 קבוצות של הגדרות. אחד בזמן שהוא אינו פעיל ושני שאכן עוברים עליו עם העכבר. 4 שורות הראשונות הם השורות האחראים על מיקום התמונות בזמן שהם אינם פעילים, לעומת זאת הקבוצה השניה אחראית על התצוגה בזמן שעוברים עליהם עם סימן של העכבר. ההבדל בין הקבוצה הלא פעילה – לקבוצה הפעילה, אפשר למצאו באמצעות הגדרה של  a:hover שאחראית על המראה החיצוני של הסמל הפעיל כשעוברים עליו עם הסימן של העכבר.

נא לשנות את הפיקסלים של פקודות background-position כפי שזה מופיע בתמונה הבא:

לאחר הגדרת הפיקסלים המדויקים בקובץ CSS, התפריט הניווט שלנו ניראה כך:

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

הורדה קובץ מוכן: [download id="48"]