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 thoughts on “CSS Sabit Menü Yapımı

  1. 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..

  2. 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

Back To Top