כדי להבליט פריט מסויים בתפריט באתר שלנו (או ברשימת אייקונים לדוגמא) אנחנו יכולים לעשות את זה עם צבע אחר בשורה הטקסט או להבליט את הגופן אבל זה דיי משעמם ורגיל.
לכן מה שנעשה זה נוסיף תגית (Badge) לאותו פריט אותו נרצה להבליטו ונעשה את זה בקוד בלבד ללא תוסף פרט לאלמנטור ואלמנטור PRO.
על מנת לעשות זאת, נלך לשורת הטקסט בתפריט או ברשימת היאיקונים שלנו ונרשום את הטקסט כך:
כאן יהיה שם הפריט עצמו <span class="popular-badge badge-bounce">כאן יהיה שם ה- Badge</span>
נוכל לראות דוגמא לזה כאן למטה.
- השורה הזו: background-color: var(–e-global-color-primary); אומרת שצבע הרקע של התגית יהיה בצבע הגלובלי "ראשי" אותו הגדרתם באתר שלכם.
- לפריט זה יש תגית מגניבה פופולארי
- פריט ברשימה #2
- פריט ברשימה #3
/* 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;
}