Mobil Cihazlar İçin Açılır Menü Yapımı

Web sitelerini bilgisayar üzerinden kontrol etmek ve istediğiniz sayfaya ulaşmak kolaydır. Fakat mobil kullanıcıları için bu iş biraz zahmetlidir. Mobil uyumlu sitelerin günümüzde yaygın olarak kullanılmaması akıllı telefon kullanıcılarını ve tablet kullanan kişilerin zorlanmasına yol açmaktadır. Aşağıda anlatacağım mobil cihazlar için açılır menü yapımı sitenizin ebatlarına göre şekil almakta ve kolay kullanılabilirlik sağlamaktadır.

Kısaca yapacağımız işlemi anlatmak gerekirse web browserınızın genişliğini oynadığınızda web siteniz belirli küçüklüğe geldiğinde mobil siteye dönüşecektir. Eski haline geri gelmesi için pencere boyutunu arttırmanız yeterli olacaktır.

iPhone, Samsung, Nokia, HTC gibi telefonların iOS, Android, Windows Phone 8 gibi işletim sistemleri fark etmeksizin siteye giriş yaptığınızda menü kısmının açılır menü olduğunu fark edeceksiniz. Bu yazıda anlattığımız  sistemle menüler ekran büyüklüğüne göre şekil almakta ve site ziyaretçilerinin yanlış sayfaya gitmesini önlemektedir. Neyse sitenizin menüsünü mobil cihazlara entegre etmek için aşağıdaki adımları birlikte uygulayalım:

Bu uygulamada bilmeniz gereken bir husus <select> ve <option> etiketlerinin arasına <a> etiketi kullanamayız, bu yüzden aşağıya iki menü oluşturduk. HTML kısımı burada bitiyor.

<nav>

<ul>
<li><a href=”#” class=”active”>Anasayfa</a></li>
<li><a href=”#”>Hakkımızda</a></li>
<li><a href=”#”>Hizmetlerimiz</a></li>
<li><a href=”#”>İletişim</a></li>
<li><a href=”#”>Destek</a></li>
</ul>
<select><option value=”#” selected=”selected”>Select</option>
<option value=”#”>Anasayfa</option>
<option value=”#”>Hakkımızda</option>
<option value=”#”>Hizmetlerimiz</option>
<option value=”#”>İletişim</option>
<option value=”#”>Destek</option>
</select>
</nav>

Aşağıdaki css kodu ile oluşturduğumuz iki menüden <select> etiketleri ile olan menüyü görüntüden kaldıralım.

nav select {
             display: none;            
}

Medya sorgusu ile menümüzün hangi ebatlarda <ul> etiketi ile görüneceğini veya <select> etiketi ile yer alan menünün görüneceğini kodlayacağız. Aşağıda yazılmış olan kodun açıklaması maximum 800px boyutuna kadar pencere büyüklüğünde <select> menüsü görünecek. 800px den sonra ise <ul> etiketleri arasında yer alan menü görünecek.

@media (max-width: 800px) {
nav ul {
            display: none;
            } 
nav select {
                  display: inline-block;
                  }
}

Pencere boyutuna göre değişen mobil cihazlara için açılır menü yapımı bu şekilde yapılmaktadır. Menünüzü değiştirmek ve güzelleştirmek için css bilginizle değişiklik yapabilirsiniz.

Paylaş :

Yeni Yorum Ekle

 Yorumunuz başarıyla gönderildi. Teşekkürler!   Yenile
Hata: Lütfen tekrar deneyin