Divi Menülerinize Ekleyebileceğiniz 3 Güzel CSS Hover Efekti

Menünüz, ziyaretçilerin web sitenize gittiklerinde gördükleri ilk şeylerden biridir, bu yüzden bir tarza sahip olmasını istiyorsunuz değil mi? Tabii ki! Bu nedenle, bugünkü gönderide özel CSS ile menünüze güzel vurgulu efektler eklemenin üç yolunu paylaşacağım.

Fareyle üzerine gelme efektleri ince olmalı, görsel ilgi istiyoruz ama sitenin en önemli kısmı bu değil, içeriğiniz. Bunlar, Divi navigasyonunuza doğru miktarda "pop" ekleyecektir.

Sadece güzel bir vurgulu efekti eklemekle kalmayacak, aynı zamanda aktif sayfanın bağlantısına uygulanan bazı stiller de olacak. Örneğin, kullanıcı ana sayfadaysa, menüdeki ana sayfa bağlantısına bir tür küçük tasarım işlemi uygulanacaktır. Bu, kullanıcıya sitede nerede olduklarını hatırlatmaya yardımcı olmak için web sitelerine eklenecek yaygın bir görsel işaretçidir. Bu kesinlikle gerekli değil, ancak biraz faydalı UX.

Başlayalım!

Divi Menülerinize Ekleyebileceğiniz 3 Güzel CSS Hover Efekti

Youtube Kanalımıza Abone Olun

Tema Özelleştirici Ayarları

Öncelikle, tüm stiller için başlık formatı için varsayılan ayarları kullanacağız. Divi'yi yeni yüklediyseniz, bu ayarı yapılandırmanız gerekmez, otomatik olarak buna ayarlanmalıdır.

Stil Bir – Altında büyüyen çizgi

Bu menü stilinde, üzerine gelinen menü öğesinin hemen altına soldan sağa doğru büyüyen bir çizgi ekleyeceğiz. Ayrıca, aktif sayfa bağlantısının hemen altında statik bir çizgi belirleyecektir.

Esin

Bu, hemen hemen her tür sitede iyi çalışabilen gerçekten güzel bir efekt, ayrıca rengi ve çizgi genişliğini değiştirmek için bu stilin kodunu düzenlemek, herhangi bir seviyedeki kullanıcı için oldukça kolaydır. Yıllardır sitelerde gördüğüm oldukça popüler bir vurgulu efekt. Onu bu kadar çok yönlü yapan şeyin incelik olduğunu düşünüyorum, bir emlak sitesinde olduğu kadar bir müzisyenin sitesinde ve aradaki her şeyde kullanılabilir.

uygulama

Aşağıdaki kodu alt stil sayfanıza VEYA Divi tema seçenekleri > genel > özel CSS kutusuna ekleyin :

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Stil İki – Altında çizgi olan kalın “kutu” görünüm

Bu menü stilinde, farenin üzerine geldiği menü öğesinin altındaki menü bölümünden aşağıya doğru hareket eden büyük bir “bloklu” çizgi yerleştireceğiz. Ayrıca aktif menü bağlantısının üzerine tıknaz bir kutu yerleştirir.

Esin

Bu stili kendim geliştirdiğim Executive adlı bir Divi çocuk temasında kullanıyorum (vurguyu gerçek bir sitede çalışırken görebilmeniz için aşağıdaki demoya bağlantı vereceğim). Görsel olarak bu ilk stil kadar incelikli değil, onu kullanmak için doğru siteyi seçmenin anahtar olacağını düşünüyorum. Fareyle üzerine gelme efekti gibi her türlü küçük tasarım ayrıntısını sitenin genel havasıyla eşleştirmek önemlidir.

uygulama

Aşağıdaki kodu alt temanızın stil sayfasına veya Divi'nin Tema Seçenekleri genel sekmesi altındaki özel css kutusuna ekleyin. Düzenleme kolaylığı açısından rengi değiştirmek çok kolaydır, ancak kenarlığın genişliğini değiştirmeyi planlıyorsanız, CSS'deki diğer sayılarla da oynamanız gerektiğini göreceksiniz.

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

Stil Üç – Arka plan renkli düğmeler

Bu menü stili, menü öğelerini koordineli vurgulu renklere sahip düğmelere dönüştürür. Ayrıca aktif menü bağlantısına başka, ayrı bir renk verir.

Esin

Bu, elbette düğmelerden ilham alıyor, düğme navigasyonunun görünüşünü gerçekten seviyorum. Ayrıca birinci tarz gibi, neredeyse her sitede işe yarayabilecek oldukça çok yönlü bir görünüm olduğunu düşünüyorum. Arka plan renklerini değiştirmek de oldukça kolay peasy.

uygulama

Yukarıdaki diğer iki stilde olduğu gibi, aşağıdaki özel css kodunu alt temanızın stil sayfasına veya Divi'nin genel tema ayarları sekmesindeki özel css kutusuna eklemek isteyeceksiniz. Kodun yorum yapılan bölümlerinin yanındaki değerleri ayarlayarak kodda (renkler gibi) kendi ince ayarlarınızı ve değişikliklerinizi yapabilirsiniz.

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
}

Divi Sitelerinde Bu Tarzların Örnekleri “In the Wild”

Canlı Divi web sitelerinde kullanılan bu stillerin (veya çok benzerlerinin) bazı örnekleri.

Komple Asansör Hizmeti

Bu site, başlıklarda başka yerlerde kullanılan ince çizgi işlemine sahiptir, bu nedenle vurgulu stil, mantıklı olması için genel görünüme bağlanmaktadır.

Komple Asansör Servis Sitesini Görüntüle

Executive Premium Divi Çocuk Teması

Yukarıdaki örnekte olduğu gibi, farklı tasarım öğelerinin birbirini tamamlaması için kalın çizgi stili sitenin başka bir yerinde kullanılıyor.

Executive Premium Divi Çocuk Temasını Görüntüle

Dayanma Web Stüdyoları

Tamam, her menü bağlantısı için düğmeleri kullanan bir site bulmakta gerçekten zorlandım. CSS'yi yalnızca bu eğitim için yazdım, ancak Endure, bir bağlantının bir düğme gibi görünmesinin popüler bir kullanımını gösteriyor, bu nedenle bu eğitimdeki üçüncü stil sadece bu fikri alıp tüm gezinme bağlantıları için kullanıyor.

Endure Web Studios Sitesini Görüntüle

Toplama

Divi web sitelerinizde bu menü vurgulu stillerinden biri veya tümü için bir miktar kullanım bulabileceğinizi umuyoruz.

Bunun gibi öğreticilerden snippet'leri kullanmanın harika bir yanı, en başlangıç ​​seviyesindeki kullanıcıların bile bunları kolayca uygulayabilmesi ve en temel siteye özel tasarımın çok ihtiyaç duyduğu desteği sağlamasıdır. Ve teknik olarak hiçbiri aslında bir animasyon işlevi kullanmasa da, bu günlerde oldukça popüler ve moda olan bir şeyin canlandırıldığı hissini veriyor.

Daha sonra ne öğrenmek istediğinizi aşağıdaki yorumlarda bize bildirin. Ayrıca Elegant Themes'tan uygulaması kolay Divi eğitimleri için abone olmayı unutmayın!