Mobil cihazlar üzerinden internet kullanımı gün geçtikçe artıyor. Hal böyleyken website sahipleri de mobil cihazlarda kullanımı kolay temalar kullanmak zorunda kalıyor. Resim ve videoların dahi tarayıcıya duyarlı (responsive) olabilmesi için geliştirilen birçok örnek var. jQuery Naver eklentisi de Ben Plum tarafından bu amaçla hazırlanmış bir jQuery eklentisidir.
Naver ile Html5 nav elementi ile oluşturulan site menülerini çok kolay bir şekilde tarayıcıya duyarlı (responsive) hale getirebilirsiniz. Norma bir masaüstü cihazda tam boy görünen menü mobil cihazlar üzerinden açıldığında sadece kategori ikonu görünür. Navigasyon menüler için geliştirilmiş olan Naver uygulamasını denemek için mobil cihaz kullanmanız gerekmiyor. Normal bir bilgisayar kullanarak ta uygulamanın nasıl çalıştığını görebilirsiniz.
Demo sayfasını açtığınızda kullanım hakkında basit aşamaları geçtikten sonra tanıtım amaçlı hazırlanmış basit navigasyon menü örneklerini görebilirsiniz. Tarayıcınızı küçülttüğünüz anda menü kaybolacak ve sadece kategori ikonu görünecektir. Kategori ikonunu tıkladığınızda kaybolmuş olan menü butonları alt alta sıralanmış bir şekilde açılacaktır.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve Css dosya adresleri :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" href="http://www.benplum.com/lab/_Formstone/Naver/jquery.fs.naver.css" type="text/css" media="all" /> <script src="https://www.benplum.com/lab/_Formstone/Naver/jquery.fs.naver.js"></script>
JavaScript :
$("nav").naver({
animated: true
});
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
