Css ile Yatay Sabit Menü Yapımı

Merhaba Arkadaşlar,
Bu makalede Css ile yatay sabit menü nasıl yapılır onu öğreneceğiz.Bazı websitelerinde, sayfada aşağı indiğimiz halde menü hep yukarda sabit olarak görünür durumda oluyor.İşte bunlara fixed menüler diyoruz.Menümüzü yapmaya başlayalım.Menülerimizi oluştururken en temelde sırasız listeleri (<ul><li> </li></ul>) kullanıyoruz.Daha sonra ise Css kodlarıyla menümüzü şık bir tasarıma kavuşturuyoruz.Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.

Html kodlarımız;

Css kodlarımız; 

Yaptıklarımızı kısaca özetleyecek olursak;

► Menü elemanları için bir <ul> <li> listesi yazıyoruz.

► Class’ı active olan link’e farklı bir renk vererek belirgin hale getiriyoruz.

► Menü elemanlarının (<li> etiketlerine) float özelliğine left değeri vererek yan yana gelmelerini sağlıyoruz.

► Menü elemanlarına hover efekti ve alt kenarlık veriyoruz.

► Sayfa içeriği için h1 etiketleri tanımladım ama burda sizin sayfa içeriğinizin olduğunu düşünün.Amacımız içeriği doldurmak.

► Giriş ve Kayıt Ol linklerini sağa yerleştirmek için onlara ayrı bir class değeri veriyoruz.

► En önemli kısım ise ul etiketine position değeri fixed, top değeri 0  ve width değeri 100%vererek menünün yukarıda sabitlenmesini sağlıyoruz.

Menümüzün son hali;

Farklı menülerin nasıl yapıldığını öğrenmek istiyorsanız şu makaleler de ilginizi çekebilir.

Responsive Menü Yapımı

Css ile Yatay Sticky Menü Yapımı

Css ile Yatay Menü Yapımı

Css ile Yatay Açılır Menü Yapımı

Css ile Dikey Sabit Menü Yapımı

Css ile Dikey Menü Yapımı

Yeni bir makalede görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +