הוספת תגית (Badge) לפריט בתפריט

כדי להבליט פריט מסויים בתפריט באתר שלנו (או ברשימת אייקונים לדוגמא) אנחנו יכולים לעשות את זה עם צבע אחר בשורה הטקסט או להבליט את הגופן אבל זה דיי משעמם ורגיל.
לכן מה שנעשה זה נוסיף תגית (Badge) לאותו פריט אותו נרצה להבליטו ונעשה את זה בקוד בלבד ללא תוסף פרט לאלמנטור ואלמנטור PRO.

על מנת לעשות זאת, נלך לשורת הטקסט בתפריט או ברשימת היאיקונים שלנו ונרשום את הטקסט כך:

כאן יהיה שם הפריט עצמו <span class="popular-badge badge-bounce">כאן יהיה שם ה- Badge</span>

נוכל לראות דוגמא לזה כאן למטה.

 

  • השורה הזו: background-color: var(–e-global-color-primary); אומרת שצבע הרקע של התגית יהיה בצבע הגלובלי "ראשי" אותו הגדרתם באתר שלכם.
				
					/* Add Menu Badge "Soon" */
.popular-badge {
  font-size: 14px;
  margin-left: 4px;
  position: relative;
  top: -10px;
  margin-right: 10px;
  color: #ffffff;
  background-color: var(--e-global-color-primary);
  padding: 3px 4px;
  border-radius: 3px;
  padding: 2px 6px;
}

/* Vendor prefixes for keyframes */
@-webkit-keyframes bouncing {
  0% { top: -6px; }
  100% { top: -10px; }
}
@-moz-keyframes bouncing {
  0% { top: -6px; }
  100% { top: -10px; }
}
@-o-keyframes bouncing {
  0% { top: -6px; }
  100% { top: -10px; }
}
@keyframes bouncing {
  0% { top: -6px; }
  100% { top: -10px; }
}
/* Bounce animation with vendor prefixes */
.badge-bounce {
  -webkit-animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
  -moz-animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
  -o-animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
  animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}
				
			

קודים נוספים

התפריט הוא אחד הדברים הראשונים שאנשים רואים כשהם נכנסים לאתר.עוד לפני שקוראים טקסט או לוחצים [...]

אפקטים קטנים עושים הבדל גדול בחוויית משתמש – במיוחד כשמדובר באינטראקציות בסיסיות כמו מעבר עכבר. [...]

אם אתם בונים אתרים רספונסיביים, אתם יודעים שטיפוגרפיה יכולה להיות כאב ראש – במיוחד כשצריך [...]