Yeni Sayfa 1




         FrontPage ile sitemize menü yapalım
   TR.GG için Free CSS tasarımlar
  Yorum yazılan alana resim koyma
  İntroyu giriş butonu olmadan kullanma
   Şok şok yatay açılır menü yapımı
   Dikey acilir menü yapımı !!!
  Gmail oto yanıtlama ayarları
   Open DNS (youtube'ye girebilirsiniz.)
  Photoshop brushları indir ve uygula
   
   
   



                                                             
Wc3Wepla.tr.gg - Sitemizi Destekleyin...


Wc3Wepla | Tasarım | Web Dersleri | Html Kodları | Tekno Bilgi

yatay acilir menu

< Web Derslerine Geri Dön <

Öncelikle normal bir şekilde menümüzü oluşturalım.






Gördüğünüz gibi 4 tane ana menü ve akabinde alt menülerini oluşturduk. Şimdi Css ile bunu açılır menü hâline getireceğiz.

Ben bu anlatımda css'i ayrı bir dosya ile sayfaya çağıydım. Ama siz sayfaının head'ine de yerleştirebilirsiniz css'i.

Css'imize aşağıdaki kodu yazıyoruz.






Bu kod id'si "menu" olarak verilen yazıların maddeleri hakkında düzeltmedir.

Float ile menümüzün durumunu belirliyoruz. Left yaptık ve anasayfa sol tarafta yerini aldı. Right yapsaydık anasayfa en sağda olacaktı ve devamındakiler sağdan sola doğru hizalanacaktı. Position ile menünün durumunu belirliyoruz ve bildiğiniz gibi width ile de menümüzün genişliğini belirliyoruz.

Menümüzü ilk oluşturduğumuz zaman oluşan menülerin başında işaretleri kaldıralım.







Bu şekilde menülerimizin başındaki işaretleri de kaldırmış olduk.



Display ve position sayesinde açılır olan menümüzü gizlemiş oluyoruz. Bu koddan itibaren alt menüleri göremez hâlde olursunuz.



Bu kodu da eklediğimiz zaman mouse'u hangi menünün üzerine getirirsek o menü açılacaktır. Yani işlemimiz bitti.



Son olarak menümüzün arkaplanını, altında çizgi olmaması gibi bazı özelliklerimizi ayarladıktan sonra menümüz tamamlanmıştır. İstediğimiz sayfaya yerleştirebiliriz.





< Web Derslerine Geri Dön <

Bugün 6 ziyaretçi (9 klik) burada vakit geçirdi.
site map
               

Bu site 1024x768 çözünürlük ve üzeri,
32 bit görüntü kalitesi ile
FF1, IE7 ve Google Chrome
tarayıcıları için optimize edilmiştir.
Alıntı olarak göstermek şartıyla
sitemizdeki tüm içeriği kullanabilirsiniz.







      Etiketler: CSS Tasarım | Web Master | Web Dersleri | HTML JAVA Kod | Photoshop | Google Adsense | Google Pagerank | Tekno Bilgi | Tekno Haber | Bilgi Paylaşımı |
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol