Css ile Yatay Sticky Menü Yapımı

Bu yazımızda Css ile yatay sticky menü nasıl yapılır? onu öğreneceğiz.

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.

Burada sticky kavramına değinmek istiyorum. Bazı websitelerinde menünün üstünde reklam alanı veya başka birşeylerin olduğunu görüyoruz.

Yani menü sayfanın en üstünden örneğin 300px aşağıda oluyor. Biz sayfada aşağı doğru indikçe menü yukarıya doğru çıkar ve yukarıya sıfırlandığında menü artık sabit bir şekilde kalır. İşte bu tarz bir menü örneği yapacağız.

Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.

Css ile Yatay Sticky Menü Yapımı

Sticky Yatay Menü Html Kodları

<h1>Sticky Yatay Menü</h1>
<h1>Sticky Yatay Menü</h1>
<h1>Sticky Yatay Menü</h1>
<h1>Sticky Yatay Menü</h1>
<ul>
<li class="active">
<a href="#">Anasayfa</a>
</li>
<li>
<a href="#">Hakkımda</a>
</li>
<li>
<a href="#">İletişim</a>
</li>
<li class="menu-right">
<a href="#">Kayıt Ol</a>
</li>
<li class="menu-right">
<a href="#">Giriş</a>
</li>
</ul>
<div style="height:1500px; background-color:aquamarine;"></div>

<h1>Sticky Yatay Menü</h1>

<ul>

<a href="#">Anasayfa</a>

</li>

<li>

<a href="#">Hakkımda</a>

</li>

<li>

<a href="#">İletişim</a>

</li>

<a href="#">Kayıt Ol</a>

</li>

<a href="#">Giriş</a>

</li>

</ul>

Sticky Yatay Menü Css Kodları

ul {
padding: 0;
margin: 0;
list-style-type: none;
background-color: #4fb99f;
overflow:auto;
position: -webkit-sticky; /* Safari */
position:sticky;
top:0;
}
ul li {
float:left;
border-bottom:3px solid #4fb99f;
}
ul li.menu-right{
float:right;
}
ul li a {
display: inline-block;
padding: 12px 24px;
text-decoration: none;
color: #fff;
font-size: 18px;
}
ul li.active {
background-color: #068587;
border-bottom:3px solid #f2b134;
}
ul li:hover:not(.active) {
background-color: #068587;
border-bottom:3px solid #f2b134;
}

ul {

padding: 0;

margin: 0;

list-style-type: none;

background-color: #4fb99f;

overflow:auto;

position: -webkit-sticky; /* Safari */

position:sticky;

top:0;

}

ul li {

float:left;

border-bottom:3px solid #4fb99f;

}

ul li.menu-right{

float:right;

}

ul li a {

display: inline-block;

padding: 12px 24px;

text-decoration: none;

color: #fff;

font-size: 18px;

}

ul li.active {

background-color: #068587;

border-bottom:3px solid #f2b134;

}

ul li:hover:not(.active) {

background-color: #068587;

border-bottom:3px solid #f2b134;

}

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.

► Menünün üstünde 4 adet h1 tanımladım ama burada herhangi birşey de olabilir. Amacımız menünün yukardan biraz aşağıda olmasını sağlamak.

► 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 sticky, top değeri 0 vererek menünün yukarıdan uzaklığı 0px olduğunda menünün sabitlenmesini sağlıyoruz.

Sticky Yatay Menümüzün Son Hali

Şu Html ve Css menü örnekleri de ilginizi çekebilir.

Responsive Menü Yapımı

Css ile Yatay Sabit 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.