Orange horizontal

0
457
views

turuncu

Sadece  css  kullanılarak hazırlanmış drop down (açılır kapanır) üst menü örneği. Aslında  bu menüyü  kullanabilmek için css kodlar  arasında baya bi dolanmanız  gerekiyor. Herşeye rağmen bana göre kırmızı  renk harici  diğer menü özellikleri  baya  bi güzel hazırlanmış. Mouse  butonların üzerinde  gezdiğinde  aşağı inen link paneli de metalik bir görüntüye  sahip.

Css3 drop down üst menü örneğinde üç tane butona alt  menü  eklenebiliyor ve  her  buton için ayrı bir sınıf atanmış. Menu01, menu02, menu03, menu04 ve menu05 olarak adlandırılan bu sınıflar da 1. sınıf  en soldaki buton ile  5. sınıf da  en sağdaki buton ile ilişkilendirilmiş. En soldakinin sol tarafta kalan kenarları oval sağ tarafta kalan kenarıda düz olarak ayarlanmış. En sağdakide  bunun tam tersi olarak ayarlanmış. Bu sayede menünün kenarları oval  olarak görünüyor. Ortada  kalan butonların kenarları düz. Yani 2,3 ve 4. sınıf olarak adlandıırlmış butonları en sağa yada en sola aldığınızda menüde  bozulma göreceksiniz.

Css3 drop down üst menü örneğinde  alt  panele  sahip  olan menü  sınıfları menu01, menu02 ve menu03 olarak adlandırılmış. Menu01de 5 tane link ekleyebileceğiniz bir  panel açılıyor, menu02de 3 tane link ekleyebileceğiniz bir panel açılıyor ve menu03te ise 4 tane link ekleyebileceğiniz bir panel açılıyor. Açılan panel pencerelerinin boyları sabit yani  ekleyeceğiniz linklere bağlı olarak  yükseklikleri değişmiyor. Eğer  bir  butonda 6 yada yedi tane  link  eklemek istiyorsanız css kodlar içinde bunu ayarlamanız gerekmekte. Zaten html ve css menü  kodlarını dikkatlice incelerseniz  eğer aradaki farkı  görebilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

1 oy (1 votes, average: 4,00 out of 5)
Loading...
Önceki İçerikWidget Pack – Bileşen Paketi
Sonraki İçerikCircle animation
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here