מדריך ליצירת סרגל כלים מעוצב בסגנון פייסבוק
לצפייה בדמו
כיום רובנו מרכזים את מרבית הגלישה שלנו ברשתות החברתיות שהחלו לתפוס תאוצה בשנים האחרונות בצורה ניכרת מהצריכה שלנו באינטרנט,
במדריך הבא תלמדו כיצד ניתן ליצור סרגל כלים מעוצב בדומה לזה שבפייסבוק, ללא צורך בידע תכנותי מורכב.
המדריך מורכב מ-2 פוסטים, הראשון יצירה של התפריט באמצעות CSS וJS מבוסס מחלקת JQUERY
והחלק השני עוסק בעיצוב הסרגל כלים.
שנתחיל?!
שלב ראשון: בועיות תיאור מבוססת Html+Css
שימו לב שבתוך הקוד קיימת תגית <small> שנמצאת בתוך התגית </a> שמשמעותה היא מה אנחנו רוצים שיוצג בתוך הבועית שנפתחת במעבר עכבר
לדוגמא מה שמופיע בתמונה "edit profile"
HTML
CSS
תחילה נמקם את הסרגל שלנו בתחתית העמוד באמצעות הקוד הבא:
#footpanel { position: fixed; bottom: 0; left: 0; z-index: 9999; /*--Keeps the panel on top of all other elements--*/ background: #e3e2e2; border: 1px solid #c3c3c3; border-bottom: none; width: 94%; margin: 0 3%; }
כפי שחלקכם בטח יודעים IE6 שעדיין לא נכחד פורמאלית אבל מקירוסופט הקימו עבורו אתר שיעזור לו להיעלם מהשטח http://ie6countdown.com/ בכל אופן צריך לטפל בבעיית תאימות שלו באמצעות הקוד CSS הבא:
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/ margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/ position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); }
קוד לעיצוב התפריט + ארגון סדר של הרשימה
#footpanel ul { padding: 0; margin: 0; float: left; width: 100%; list-style: none; border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/ font-size: 1.1em; } #footpanel ul li{ padding: 0; margin: 0; float: left; position: relative; } #footpanel ul li a{ padding: 5px; float: left; text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/ height: 16px; width: 16px; text-decoration: none; color: #333; position: relative; } html #footpanel ul li a:hover{ background-color: #fff; } html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/ background-color: #fff; height: 17px; margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/ border: 1px solid #555; border-top: none; z-index: 200; /*--Keeps the active link on top of the sub-panel--*/ position: relative; }
החלפת הטקסט באייקונים באמצעות אתר http://www.iconfinder.net או אתרים אחרים שאתם מכירים
קוד למי שרוצה לשים תמונות
#footpanel a.home{ background: url(home.png) no-repeat 15px center; width: 50px; padding-left: 40px; border-right: 1px solid #bbb; text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/ } a.profile{ background: url(user.png) no-repeat center center; } a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; } a.contacts{ background: url(address_book.png) no-repeat center center; } a.messages{ background: url(mail.png) no-repeat center center; } a.playlist{ background: url(document_music_playlist.png) no-repeat center center; } a.videos{ background: url(film.png) no-repeat center center; } a.alerts{ background: url(newspaper.png) no-repeat center center; } #footpanel a.chat{ background: url(balloon.png) no-repeat 15px center; width: 126px; border-left: 1px solid #bbb; border-right: 1px solid #bbb; padding-left: 40px; text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/ } #footpanel li#chatpanel, #footpanel li#alertpanel { float: right; } /*--Right align the chat and alert panels--*/
עיצוב הבועית שמופיעה במעבר עכבר,
ניתן להחליט האם אנחנו מעוניינים שהבועית תוצג/לא תוצג במעבר עכבר באמצעות הקוד הבא
הצגה: display:block;
הסתרה: display:none;
קוד להמחשה:
#footpanel a small { text-align: center; width: 70px; background: url(pop_arrow.gif) no-repeat center bottom; padding: 5px 5px 11px; display: none; /*--Hide by default--*/ color: #fff; font-size: 1em; text-indent: 0; } #footpanel a:hover small{ display: block; /*--Show on hover--*/ position: absolute; top: -35px; /*--Position tooltip 35px above the list item--*/ left: 50%; margin-left: -40px; /*--Center the tooltip--*/ z-index: 9999; }
צפייה בדמו לחץ לצפייה
3 תגובות
הגב
שוחחו איתי אונליין
שימושון
תגיות
א | ב | ג | ד | ה | ו | ש |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
קישורים
- flashoo – קמפוס הפלאש הישראלי
- newsgeek
- אייל שחר מול המכונה
- אינטרנט ישראל
- אנטייטלד
- אסטרטגיה באינטרנט
- ארגון חווית משתמש הישראלי
- בלוג תוצרת הארץ – של נופר
- בניית אתרים
- בקופסא
- הבלוג של אלכסנדר יודייב
- הבלוג של אמיר דותן
- הבלוג של ארז וולף
- הבלוג של גיא בורשטיין
- הבלוג של ויטלי מיז’יריצקי
- הבלוג של חברת נטקראפט
- הבלוג של יוניש
- הבלוג של יוסי ג'אנה
- הבלוג של יעל קריידרמן
- הבלוג של מאור ברזני
- הבלוג של מורד שטרן
- הבלוג של ניר טובר
- הבלוג של רוני אורבך
- הבלוג של רן לירון
- הבלוג שעושה כבוד לקונספט
- המזלג
- המעצב בתחתונים
- וובמאסטר
- ויראליקס
- טיפים וטריקים לוורדפרס
- טיפים לחיפוש עבודה
- מברשות לפוטושופ
- מזבלה
- פיקסל פרפקט מגזין
- פרסי העיצוב וחווית משתמש
- פשוט שימושי – ברק דנין
אחלה מדריך תודה,
פוסט נהדר, מת על הבלוג שלך!!!
תודה רבה על התגובות 🙂
חכו לחלק השני שבו אסביר כיצד מעצבים את הסרגל כלים