CSS Sabit Menü Yapımı

Sitenin en üstünde sabir şekilde duran menüler ile birçok site ve blog’da karşılaşıyoruz. Benzer bir menüyü sizde sitenize eklemek istiyorsanız basitçe özel hazırlanan bu örneği de kullanabilirsiniz.

index.html

[html]
<html>
<head>
<meta charset="utf-8">
<title>Üst Sabit Menü</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="ust">
Üst taraftaki sabit menü
</div>
<div class="orta">
Site İçeriği
</div>
</body>
</html>
[/html]

 

style.css

[css]
html,body{
margin: 0;
padding: 0;
}

body{
font-family: ‘lucida grande’,tahoma,verdana,arial,sans-serif;
font-size: 100%;
background-color: #CCCCCC;
width: 100%;
text-align: center;
}

.ust{
position: fixed;
width: 100%;
height: 50px;
background-color: #FFF;
border-bottom: 1px solid #111;
z-index: 2;
}

.orta{
position: absolute;
top: 350px;
width: 100%;
height: 800px;
z-index: 1;
}
[/css]


Örneği başarılı bulduysanız;
Hemen denemek için tıklayınız.
Hazır dosyayı indirmek için tıklayınız.

4 Comments

  • Mus'ab Bİn Umeyr

    Bu yanlış bir örnek sanırım.. Orta alan diye belirttiğiniz bölüme yüksekliğinden daha fazla içerik geldiği zaman scrollbar çıkacaktır fakat, orta alandaki içerik scrollbar ile aşağı doğru çekildikçe orta alandaki içerik üst menü ile iç içe girecektir..

  • Cihat

    senin sitende ki menü örneğini verirmisin.
    mesela menü banner in altında ama aşağıya geldiğinde menü yukarda kalıyor
    rica etsem bunu nasıl yaptığını söylermisin.
    teşekkürler

Mus'ab Bİn Umeyr için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir