CSS Sabit Menü Yapımı

Ekleyen:

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
  1. Mus'ab Bİn Umeyr 3 sene ago
    Reply

    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. Serkan 3 sene ago
    Reply

    Gerçekten çok işime yaradı. Teşekkürler.

  3. Cihat 2 sene ago
    Reply

    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

  4. Bkr 2 sene ago
    Reply

    Olmadı be paşam, bunu direk css dosyanın altına yapıştırdım, ancak işleme almadı.

Yorum Yap

E-posta hesabınız yayımlanmayacak.

Okunası Yazılar