Html Menü Sabitleme
Css ile Yatay Sabit Menü Yapımı
Bu yazımızda Html ve 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.
Örneğimizi inceledikten sonra Html listeleri konusunda eksikleriniz olduğunu düşünürseniz,
Html Listeleme Etiketleri – ul Etiketi – ol Etiketi
Html Listeleme Örnekleri – İç İçe Listeler
yazılarımı okuyabilirsiniz.
Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.
Css ile Yatay Sabit Menü Yapımı
Sabit Yatay Menü Html Kodları
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div> <div id="menu"> <ul> <li class="active"> <ahref="#">Anasayfa</a> </li> <li> <ahref="#">Hakkımda</a> </li> <li> <ahref="#">İletişim</a> </li> <li class="menu-right"> <ahref="#">KayıtOl</a> </li> <li class="menu-right"> <ahref="#">Giriş</a> </li> </ul> </div>
<div id="content"> <h1>Fixed Yatay Menü</h1> <h1>Fixed Yatay Menü</h1> <h1>Fixed Yatay Menü</h1> <h1>Fixed Yatay Menü</h1> <h1>Fixed Yatay Menü</h1> </div> </div>
|
Sabit Yatay Menü Css Kodları
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
body{ margin:0; }
#content{ margin-toppx; heightpx; }
ul{ padding:0; margin:0; list-style-type:none; background-color:#4fb99f; overflow:auto; position:fixed; width%; top:0; }
ulli{ float:left; border-bottom:3pxsolid#4fb99f; }
ul seafoodplus.info-right{ float:right; }
ullia{ display:inline-block; paddingpx24px; text-decoration:none; color:#fff; font-sizepx; }
ul seafoodplus.info{ background-color:#; border-bottom:3pxsolid#f2b; }
ul li:hover:not(.active){ background-color:#; border-bottom:3pxsolid#f2b; }
|
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 burada 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 % vererek menünün yukarıda sabitlenmesini sağlıyoruz.
Sabit Yatay Menümüzün Son Hali
Şu Html ve Css menü örnekleri 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ı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Çevrimdışı IF Ticaret Sayısı: (0) IF Ticaret Yüzdesi:(%) |
Üst menüyü yukarıya sabitlemek (Fixed Navigation Bar)
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
__________________
| seafoodplus.info Reklamlar |