Gelişmiş Yatay Navbar Nasıl Yapılır?

24-02-2020, 20:30:28

#1

caylakgirisimci
Arkadaşlar merhaba, iyi akşamlar.
- Kullanıcı ilk başta sadece A.B ve C gibi kırmızı menü itemlerinin olduğu uzun ve ince nav çubuğunu görecek.
- A B veya C'nin üzerinde hover olduğunda, A B ve C içeriklerinin her birinin kendisine özel olan, Mor renk ile çerçevelediğim uzunca ve genişçe bir navbar daha açılacak.
- Bu nav'ın yanlızca yeşille gösterdiğim kısmı 1,2,3 bağlantılarının olduğu dikey menü görünür olacak, mavi ve content kısmı, full content olacak, içinde hiçbirşey olmayacak.
- Kullanıcı 1,2,3 gibi yeşil renkli bir menü elemanının üzerine geldiğinde, O üzerine hover olduğu elemana özel olan, roma rakamlarıyla mavi linkler bulunan menü görünür olacak.
- O mavi menüden birinin üzerine geldiğinde Content kısmı aktif olacak ve mavi menüden üzerine gelen elemana özel içerik gösterecek.
# Bu JS kullanmadan, sadece CSS ile mümkün müdür?
# Eğer mümkünse hardcode yapmadan nasıl mümkün olur? diyelim ki birisi bunu sizden frontent olarak alıp backendini yazacak ve menü elemanlarının ve contentlerin hiçbiri sabit olmayacak, hepsi kullanıcı tanımlı ve sayısı değişebilir olacak. Bu durumda öyle bir CSS yada js yazılmalı ki kullanıcı panelden ne eklerse eklesin, bu yapı bozulmamalı.
# Kodları istemiyorum sadece şema olarak böyle bir şeyin en az teknoloji kullanılarak en verimli şekilde nasıl üretilebileceğini merak ediyorum, ayrıca backend uyumu kısmı da çok önemli.

Teşekkür ederim.
24-02-2020, 20:36:06

#2

spotlayn
Hiç js kullanılmadan yapabilirsin.
- CSS flex kodları ile yataylığı ve dikeyliği yönetebilirsin.
- @media max-width, min-width kodlarıyla ekran boyutlarına göre hangi şekilde görüneceğini ayarlayabilirsin.
- > büyüktür işareti ile seçici ve alt seçicilerini iyi bir şekilde ayarlayabilirsen sınırsız alt menü açabilirsin.
- css animate kodları ile de efektler verebilirsin.
24-02-2020, 20:39:37

#3

caylakgirisimci
spotlayn adlı üyeden alıntı: mesajı görüntüle
Hiç js kullanılmadan yapabilirsin.
CSS flex kodları ile yataylığı ve dikeyliği yönetebilirsin.

@media max-width, min-width kodlarıyla ekran boyutlarına göre hangi şekilde görüneceğini ayarlayabilirsin.

> büyüktür işareti ile seçici ve alt seçicilerini iyi bir şekilde ayarlayabilirsen sınırsız alt menü açabilirsin.

css animate kodları ile de efektler verebilirsin.
Hocam en zorlandığım kısım alt&üst divleri seçmek.
> bu tag içindekileri seçiyor vs ama, mesela bu böyle kuru kuru değil tabiki, buna ul veriyorsun li veriyorsun bilmem birşey veriyorsun, onu onun içine sokuyorsun, haliyle misal li'ye hover yapınca, mesela li'ler yeşiller olsun, li hover olunca roma rakamlı kısımın açılmasını sağlamayı başaramıyorum çünkü o kısım başka bir divin içinde li başka bir divin içinde hiç alakaları yok.
Hadi onu hallettik, 1. li hover olunca, 1. roma rakamlı menünün açılması nasıl olacak? Çünkü her menü elemanının açacağı alt menü farklı olacak, misal hakkımızda şeyinin üzerine gelince, hakkımızdayla alakalı menü açılacak falan, sıralı olacak gibi
25-02-2020, 10:27:27

#4

spotlayn

caylakgirisimci adlı üyeden alıntı: mesajı görüntüle

Hocam en zorlandığım kısım alt&üst divleri seçmek.
> bu tag içindekileri seçiyor vs ama, mesela bu böyle kuru kuru değil tabiki, buna ul veriyorsun li veriyorsun bilmem birşey veriyorsun, onu onun içine sokuyorsun, haliyle misal li'ye hover yapınca, mesela li'ler yeşiller olsun, li hover olunca roma rakamlı kısımın açılmasını sağlamayı başaramıyorum çünkü o kısım başka bir divin içinde li başka bir divin içinde hiç alakaları yok.
Hadi onu hallettik, 1. li hover olunca, 1. roma rakamlı menünün açılması nasıl olacak? Çünkü her menü elemanının açacağı alt menü farklı olacak, misal hakkımızda şeyinin üzerine gelince, hakkımızdayla alakalı menü açılacak falan, sıralı olacak gibi

ul > li:hover > ul { display: initial; }
ul nin altındaki li:hover olunca onunda altındaki ul görünür olsun dedik. bu koda bir id veya unique bir class tanımlamazsanız, iç içe ne kadar yaparsanız hepsi üzerine geldiğinizde görünür olur.