מדריך ליצירת סרגל כלים מעוצב בסגנון פייסבוק

לצפייה בדמו

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

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

המדריך מורכב מ-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 תגובות

• 
  מושיק 10 במרץ 2011 בשעה 14:34

  אחלה מדריך תודה,

  הגב
• 
  מאור 10 במרץ 2011 בשעה 19:58

  פוסט נהדר, מת על הבלוג שלך!!!

  הגב
• 
  avi cohen 12 במרץ 2011 בשעה 21:10

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

  הגב