Menü tıklanma durumundan çıktığında kulllanıcının daha rahat ulaşması için menünün yerini değiştirmek akıllıca bir hareket olacaktır.İşte bu derste bu konuyu işleyeceğiz.
<html>
<head>
<title>Menüyü Sabitle</title>
<style type ="text/css" >
ul li
{
display :inline;
background-color :Blue;
color :White;
padding :5px;
cursor :pointer;
}
</style>
<!--yukarıdaki css kodları ile menümüzün css özelliklerini yaptık
asıl amacımız menü yapmak olmadığı için basit bir menü yaptık. -->
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<!--yukarıdaaki satır jquery kütüphanesidir -->
<script type ="text/javascript" >
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('ul').css({
"position": "fixed",
"box-sizing": "border-box",
"width": "100%",
"top": "0",
"left": "500px"
});
}
else {
$('ul').css("position", "inherit");
}
});
});
</script>
<!-- sayfa aşağı doğru kayarken scrool (tarayıcının sağ tarafında kaydırma çubuğu)
üst seviyesini kontrol ediyoruz, kontrol için > işareti kullanıyoruz.
Bu sayede zıttını kontrol ediyoruz.
100 pixeli geçtiğinde menümüz sayfanın yukarısında kalacağı için tıklama
görünümü kaybolacaktır. Bu durumda menünün yerini değiştirerek sayfanın üst
kısmına sabitliyoruz. ul nin css kodlarını şunları yükle diyoruz. Burada en
önemli olan kısım fixed ile menüyü sabitlemektir. İsteğe bağlı olarak left
özelliği sıfırda girilebilir. ben 500 pixel sağa kaydırdım -->
</head>
<body>
<div> menü üstü menü üstü menü üstü menü üstü menü üstü menü üstü menü üstü </div>
<div>
<ul>
<li>Anasayfa</li>
<li>Hakkımızda</li>
<li>Referanslar</li>
<li>İletişim</li>
</ul>
</div>
<br />
<br />
Site içeriği
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
</body>
</html>
Önizle