Web sitelerinde, kullanıcı sayfayı aşağı doğru kaydırırken yukarıda sabit olarak kalan bir menü, kullanıcı deneyimini hem bilgisayarda hem de mobilde iyileştiren oldukça kullanışlı bir yapıdır. Bir web sitesinde HTML sabit menü olması kullanıcının site navigasyonuna sayfanın neresinde olursa olsun kolayca ulaşabilmesine imkan sağlar. Bu tür bir menü, “sticky” yani yapışkan veya sabit menü olarak adlandırılır ve HTML/CSS ile böyle bir menüyü kolayca yapabilirsiniz.
HTML ve CSS ile Sabit (Sticky) Menü
Öncelikle basit bir HTML yapısı ile menüyü hazırlamamız gerekiyor. Burada liste ile menü elemanlarını hazırlıyoruz ve kullanacağımız linkleri ekliyoruz.
<nav class="sticky-menu">
<ul>
<li><a href="#home">Ana Sayfa</a></li>
<li><a href="#hakkinda">Hakkımızda</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
Daha sonrasında CSS ile menüyü sa .sticky-menu sınıfını alan nav etiketine, yapışkan yani sabit özelliği kazandırmak için position: sticky; değerini ekliyoruz. Ayrıca menünün ekranın üst kısmına yapışmasını sağlamak için top: 0; değerini veriyoruz.
body {
height: 5000px; /* Test edebilmek için body yükseklik değeri */
margin: 0;
}
.sticky-menu {
position: sticky; /* Menüyü sabitler */
top: 0; /* Sayfanın en üstüne hizalar */
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;
}
HTML Sabit Menü Kodları
Buraya tıklayarak menünün çalışan haline ulaşabilir ve bu kodlardan faydalanarak sabit menünüzü kolayca oluşturabilirsiniz. Menüyü geliştirmek ve özelleştirmek için aklınıza takılanları yorum bölümünden paylaşmayı unutmayın. Ayrıca Web Geliştirme kategorisinde bunun gibi farklı içeriklere ulaşabilirsiniz.
