Bazı sitelerde mutlaka görmüşsünüzdür kaydırma çubuğunu aşağı indirdiğinizde üst menü de sayfa ekranına yapışmış gibi hiç hareket etmeden sabit bir şekilde bir noktada durur. Bunun farklı farklı örnekleri var tabi. Mesela Facebook’ta birinin zaman tünelini incelediğinizde sayfa aşağı indirdikçe yukarıda tarihlerin olduğu bir menü görürsünüz.
Chris Wharton tarafından geliştirilmiş HeadShrinker de bu tarz örnekleri hazırlayabilmeniz için kolay bir yoldur. HeadShrinker eklediğiniz üst menüleriniz kaydırma çubuğuna bağlı olarak hareket eder. Sayfa aşağı indiğindemenüyukarıda kaybolur normal olarak. HeadShrinker bu noktada devreye girer ve belirlemiş olduğunuz bir hedeften sonra üst kısımda görünüp sayfada sabit bir şekilde durur tabi biraz daha küçük olarak.
Ne zaman ve nerede üst menünün çıkacağını belirlemek size kalmış bir seçenek. Ayrıca HeadShrinker mobil tarayıcılar üzerinde de çalışabiliyor ve mobil cihazlar üzerinen nasıl göründüğünü merak ediyorsanız eğer tarayıcıyı küçültüp inceleyebilirsiniz. Bütün linkleri küçük bir ikon şeklinde görünecektir.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve css dosya aresleri :
<script src="https://code.jquery.com/jquery-10.1.2.js"></script> <script src="jquery.headshrinker.js"></script> <link rel="stylesheet" href="headshrinker.css" media="screen" />
JavaScript :
<script>
jQuery(document).ready(function () {
jQuery('header').headshrinker({ fontSize: "17px", mobileMenu: true });
});
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<header> <img class="logo" src="logo.png" alt="Logo" /> <nav> <ul> <li><a href="#"> 1</a></li> <li><a href="#"> 2</a></li> <li><a href="#"> 3</a> <ul> <li><a href="#">Sub One</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub One</a> <ul> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> </ul> </li> <li><a href="#"> 4</a></li> <li><a href="#"> 5</a></li> </ul> </nav> </header>
- Demo