Bu eğitimde, öne çıkan bir menü öğesini nasıl ekleyebileceğimizi göreceğiz.
Bir öğenin yeni olduğunu veya aklınıza gelebilecek herhangi bir şeyi belirtmek için kullanabiliriz.
Ayrıca bunu herhangi bir eklenti olmadan yapacağız, aynı öğreticide bulacağınız biraz css kodu ile yapacağız.
Alacağınız sonuç şudur:
İşte video eğitimi:
Kanalıma abone ol:
Yapacağımız ilk şey, CSS kodunu özelleştirme -> Ek CSS'ye eklemek ve aşağıdaki kodu eklemek:
.menu-badge {
font-size: 9px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #FF0000;
padding: 3px 4px;
border-radius: 3px;
}
.badge-bounce {
animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}
@keyframes bouncing{
0%{top:-6px}
100%{top:-10px}
}
Artık kodu eklediğimize göre, Görünüm -> Menüler'e gidiyoruz ve vurgulamak ve eklemek istediğimiz öğeyi alana gösteriyoruz. navigasyon etiketi aşağıdaki kod:
<span class="menu-badge badge-bounce">NUEVO</span>
Sonucu nasıl görebiliyorsunuz ve bunu elde etmek için bir eklenti kullanmadık, manuel olarak yaptık.
Unutmayın, en iyi eklenti kurulu olmayandır 😉
Umarım beğenmişsinizdir, bir sonraki eğitimde görüşmek üzere.