Underliner jQuery eklentisi
Linklerinize alt çizgi uygulamanın şık bir yolu.

Aslında nette linklerin alt çizgili kullanımı bir stardarttır. Öte yandan, bu standart çirkin bir görüntü oluşturur. Bu nedenle hemen hemen hiçbir tasarımcı linkleri alt çizgili kullanmaz. Bu görüntü bozukluğu benim de canımı sıkıyordu, biraz olsun estetik katabilirim belki diye bir eklenti yazdım. Şöyle birşey:

Adipisicing fugit voluptas

Beğeneceğinizi umarım... Ve elbette, eğer beğendiyseniz lütfen paylaşın. Belki birilerinin daha işine yarar.

Eklentiyi buradan indirebilirsiniz.

Kullanım:

Basit kullanım

$('.underliner').underliner();

Parametreler

$('.underliner').underliner({
  direction: 'center'  /* 'center', 'left' ya da 'right', varsayılan 'center'
                          Alt çizgi animasyonu başlangıç noktası. */
});

$('.underliner').underliner({
  color: '#f00' /* Alt çizgi rengi, herhangi bir CSS renk değeri.
                   Boş bırakılırsa ilgili elementin metin
                   rengini uygular */
});

$('.underliner').underliner({
  duration: 400 /* Milisaniye cinsinden animasyon süresi, varsayılan 200 */
});

$('.underliner').underliner({
  show: true /* Element direkt olarak alt çizgili açılır.
                Varsayılan false */
});
/* Bu parametreleri istediğiniz kombinasyonda uygulayabilirsiniz. */

Örnekler:

Basit kullanım: Adipisicing fugit voluptas

$('.underliner').underliner();

Sabit alt çizgili link: Adipisicing fugit voluptas

$('.underliner').underliner({ show: true });

Farklı alt çizgi rengi seçimi: Adipisicing fugit voluptas

$('.underliner').underliner({ color: 'red', show: true });

Alt çizgi animasyonu solda - sağa: Adipisicing fugit voluptas

$('.underliner').underliner({ color: '#f00', direction: 'left' });

Alt çizgi animasyonu süresi: Adipisicing fugit voluptas

$('.underliner').underliner({ color: 'magenta', duration: 500 });

Aman dikkat

Yalnızca inline görüntülenen <a> elementlerine uygulanabilir. Arka plan rengini taklit ederek çalıştığından solid arka plan rengine sahip olmayan (örneğin arka planı resim olan) alanlarda uygulanırsa kötü sonuç verir.

Uygulandığı elementin display özelliğini inline-block olarak değiştirir.