Dikey Alt Menü Gezinmenizi Stillendirmenin 3 Yaratıcı Yolu
Yayınlanan: 2017-08-17Bugünün gönderisinde, dikey navigasyonunuzun alt menüsüne stil vermek için size üç farklı yol sunacağız. Önceki gönderilerden birinde, bir masaüstünden bakıldığında web sitenizle örtüşen şeffaf bir dikey gezinmeyi nasıl yapacağınızı zaten göstermiştik.
Paylaşacağımız örnekler o şeffaf dikey navigasyonun üzerine yapılacak. Bu şekilde, A'dan Z'ye dikey şeffaf navigasyonunuzu hemen oluşturma olanağına sahip olacaksınız. Bu yazı boyunca, dikey alt menünüzü hayata geçirebilecek farklı stil ayarları yaşayacaksınız.
Size örnekleri göstermeden önce, alt menüyü herhangi bir değişiklik yapmadan görmek ilginç olabilir. Her zamanki gibi dikey alt menü, ana menü öğelerinin ayarlarını devralır. Herhangi bir ek değişiklik yapmadan, alt menü şöyle görünür:
Şimdi size nasıl yeniden oluşturacağınızı göstereceğimiz üç örneğe bir göz atalım.
İlk Örnek:
İkinci Örnek:
Üçüncü Örnek:
Dikey Alt Menüye Ulaşmak İçin Genel Adımlar
Youtube Kanalımıza Abone Olun
Sağladığımız farklı örneklere dalmadan önce, başlamadan önce gerekli olan iki genel adımı ele alacağız. Alt menü öğelerini ihtiyaçlarınıza göre tasarlamadan önce iki şey yapmalısınız: alt menü öğelerini menünüze ekleyin ve alt menü öğelerimizin farklı CSS kimliklerini arayın. Bu adımları uyguladıktan sonra, örnek sonuçlara ulaşmak için ihtiyacınız olan CSS kodunu paylaşacağız.
Divi web sitenize CSS kodu eklemenin üç yolu olduğundan, her yöntemi ayrı ayrı ele alacağız. Ancak, örneklerin her biri için CSS kodunu eklemek için tercih ettiğiniz yolu kullanabilirsiniz.
Alt Menü Öğeleri Ekle
Yapacağımız ilk şey, henüz yapmadıysanız, alt menü öğelerini eklemek. Örneğimizde, nasıl yapacağınızı göstermek için 'modellerimiz' menü öğesine yalnızca bazı alt menü öğeleri ekledik. Ancak değişiklikleri diğer menü öğelerine de uygulayabilirsiniz.
WordPress Kontrol Panelinizdeyseniz, Görünüm > Menüler'e gidin . Zaten bir menü oluşturduysanız, onu kullanın. Değilse, yeni bir menü oluşturarak başlayın. Ardından, ana menü öğelerini menünüze ekleyin. Bunu yaptıktan sonra alt menü öğelerini ekleyebilirsiniz. Bir alt menü öğesi ekleyin ve bunu doğrudan birincil menü öğesinin altına koyun. Dikey navigasyonunuza eklemek istediğiniz tüm alt menü öğeleri için bunu yapın.
Alt Menü Öğelerinizin Bireysel CSS Kimliklerini Arayın
Örneklerimizde, her bir alt menü öğesi için ayrı ayrı bazı CSS değişiklikleri yapmamız gerekecek. Bu yüzden kaynakta CSS kimliklerine bakmamız gerekecek. Her öğenin farklı bir kimliği vardır. CSS kodunu, web sitenizde özel olarak kullanılan CSS kimliklerine göre değiştirmeniz gerekir. Bunlar, bu örneklerde kullanılanlardan farklı olabilir. Bu nedenle, özellikle öğeleriniz için değişiklikler yapabilmeniz için kimlikleri nereden alacağınızı size kısaca göstereceğiz.
Ana sayfanıza gidin, farenizi menünün üzerine getirin ve kodu incelemeye başlayın. Seçilen menü öğesinde CSS kimliğinin göründüğünü göreceksiniz. Alt menü listesindeki CSS kimliklerinin her birini kopyalayın ve daha sonra kullanmak üzere kaydedin.
Artık iki adımı da tamamladığınıza göre, yaptığımız örnekleri oluşturmaya geçebilirsiniz.
İlk Örneği Oluşturun
Gönderinin bu bölümünde, dikey alt menünün ilk örneğini tam olarak nasıl yeniden oluşturacağınızı göstereceğiz. Gördüğünüz gibi, yapı gerçekten basit, ancak web sitenize ekstra renk katıyor. Birincil menü öğeleri basittir ve şeffaf bir arka plan rengi kullanır. Elbette aynı sadeliği alt menünüzde de tutabilirsiniz. Ya da biraz daha dikkat çekmeyi seçebilirsiniz.
Kullanılan renkler, arka plan görüntüsüyle degrade kaplamasıyla eşleşir. Basit ve mütevazı bir sonuç elde etmeye çalışıyorsanız, alt menünüzde bu tür renk tutarlılığını korumanız önerilir.
Tema Seçeneklerinden CSS Kodunu Ekleyin
Sayfanıza CSS kodu eklemenin farklı yolları vardır. Örneğin, CSS kodunu özellikle bir sayfaya ekleyebilirsiniz. Ayrıca Tema Seçenekleri veya Tema Özelleştirici aracılığıyla tüm web sitesine ekleyebilirsiniz. Bu örnek için, sadece kodu Tema Seçenekleri aracılığıyla ekleyeceğiz. WordPress Kontrol Panelinizdeyseniz, Divi > Tema Seçenekleri > Genel sekmeyi aşağı kaydırın ve aşağıdaki kodu Özel CSS kutusuna yapıştırın:
.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}
Koddaki aşağıdaki CSS kimliklerini alt menünüz için geçerli olanlarla değiştirin. Bu gönderinin önceki adımında, bunları nerede bulabileceğinizi size gösterdik.
İkinci Örneği Oluşturun
Size göstereceğimiz bir sonraki örnekte, belirli bir gradyan efektinin nasıl oluşturulacağını göstereceğiz. Kullanılan farklı renkler, kullanılan arka plan görüntüsü ile uyumludur. Tam alt menüye degrade bir arka plan ve alt menü öğelerinin her birine bazı ayrı şeffaf renkler ekledik.
Özellikle Bir Sayfa İçin CSS Kodunu Ekleyin
Muhtemelen bu kodu web sitenizin tamamına eklemek isteyeceksiniz, ancak bu örneğin belirli bir sayfaya nasıl uygulanacağını size göstereceğiz. Özellikle bir sayfaya CSS kod satırları eklemek istemiyorsanız, bunu Tema Seçenekleri (ilk örnekte gösterildiği gibi) veya Tema Özelleştirici (sonraki örnekte gösterildiği gibi) aracılığıyla eklemekten çekinmeyin.
Alt menü tasarımını eklemek istediğiniz sayfayı açarak veya oluşturarak başlayın. Şimdi Divi oluşturucunun sağ köşesindeki aşağıdaki düğmeye tıklayın:
Görünen ekranda, aşağıdaki CSS kod satırlarını Özel CSS alanına kopyalayıp yapıştırın:
.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 
CSS kodundaki aşağıdaki alt menü öğelerini kendinizinkiyle değiştirin:
Üçüncü Örneği Oluşturun
Nasıl yapılacağını paylaşacağımız son örneğin üzerinde fareyle üzerine gelme etkisi vardır. Bu vurgulu efektini alt menünüze ekleyerek, ana menünüzü fazla meşgul etmeden hedef kitlenizle güzel bir şekilde etkileşime geçeceksiniz. Alt menü yalnızca ana menü öğesi üzerinde hareket ederken göründüğünden. Bu nedenle ziyaretçileriniz sürekli olarak etkiyle karşı karşıya kalmayacaklardır.
Tema Özelleştirici Aracılığıyla Bir Sayfa İçin CSS Kodunu Ekleyin
Son örnek için, size Tema Özelleştirici aracılığıyla CSS Kodunu nasıl ekleyeceğinizi göstereceğiz. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Ek CSS > bölümüne gidin ve aşağıdaki kod satırlarını kopyalayıp yapıştırın:
.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}Alt menü öğelerinizin CSS kimliklerini alın ve örnektekileri sizinkiyle değiştirin:
Bu kadar! Tasarımınız şimdi yukarıda gösterilen örnekteki gibi görünmelidir.
Son düşünceler
Bu gönderide, dikey navigasyonunuzla nasıl yaratıcı olabileceğinize dair bazı olasılıklar gösterdik. Daha spesifik olarak; dikey alt menünüzü nasıl harika gösterebileceğinizi gösterdik. Bu gönderiyi adım adım takip ederseniz, dikey alt menüyü mükemmel bir şekilde yeniden oluşturabilmelisiniz. Herhangi bir sorunuz veya öneriniz varsa; aşağıdaki yorum bölümünde bize bildirin!
Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!