CSS Sabit Menü Yapımı

admin - 31 Ekim 2013 - 1 dk okunma süresi
ABONE OL:  

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 Yorum

  • 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

Bir cevap yazın

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