Web sitelerinde, kullanıcı aşağı doğru kaydırırken sabit kalan bir menü, kullanıcı deneyimini geliştiren pratik bir özellik olabilir. Bu tür bir menü, “sticky” yani yapışkan menü olarak adlandırılır ve CSS ile kolayca oluşturulabilir.
Sticky Menü Nasıl Yapılır?
Öncelikle menü için basit bir HTML yapısı oluşturun.
<nav class="sticky-menu">
<ul>
<li><a href="#home">Ana Sayfa</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
Sonrasında menüye yapışkan özelliği kazandırmak için position: sticky; kullanabilirsiniz. Bunla birlikte menünün ekranın üst kısmına yapışmasını sağlamak için top: 0; olarak ayarlayın.
body {
height: 5000px; /* Test edebilmek için body yükseklik değeri */
}
.sticky-menu {
position: sticky;
top: 0;
background-color: #333;
padding: 10px;
z-index: 1000;
}
.sticky-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.sticky-menu ul li a {
color: white;
text-decoration: none;
padding: 10px 20px;
}
Nasıl Çalışıyor?
position: sticky; ile menü, belirttiğiniz top değeri kadar mesafeden sonra yapışkan hale gelir ve sayfa kaydırıldığında ekranın üst kısmında sabit kalır.
top: 0; ile menü, ekranın en üst kısmına yapışır ve aşağı kaydırıldığında yerinde sabitlenir.
Sticky menünün her zaman erişilebilir olması kullanıcı deneyimini iyileştirir. Sadece birkaç satır CSS ile yapabileceğiniz bu menüler mobil cihazlarda da rahatlıkla çalışır. Daha fazlası için takipte kalın.
Yorumlar