mobil facabook tarzında responsiv menü yapma asp

quote:

Orijinalden alıntı: adildeveci

Merhaba arkadaşlar
https://m.facebook.com/ adresindeki gibi ekrana göre genişleyen bi menü yapmak istiyorum hatta bunun aynısı.
bunu asp ile nasıl yapaiblirim.
image button mu kullanmalıyım yoksa normal buton mu.
divlerle yaptığımda oluyo fakat div içindeki imageler genişliği dive tam oturunca çözünürlüğü geniştiyo yayılıyo bi yardımcı olun lütfen

quote:

Orijinalden alıntı: SokemoN

Responsive tasarım yapmak istiyorsan eğer statik bir width değeri yerine yüzde kullanmalısın. Mesela kullanıcının mobil bir cihazdan girdiğini kontrol ettikten sonra veya ekranın çözünürlüğünü kontrol ettikten sonra belli başlı css kalıplarını uygulamalısın. Örneğin senin koyduğun resimde 6 parça resim var. Yani 6 blok olduğunu varsayalım. Resimlerinde max width max height kullanarak maximum ulaşabileceği büyüklükleri belirlemen gerekiyor.

 
  <div class="menu"> 
      <div class="menu-block"> 
      </div> 
      <div class="menu-block"> 
      </div> 
      <div class="menu-block"> 
      </div> 
      <div class="menu-block"> 
      </div> 
      <div class="menu-block"> 
      </div> 
      <div class="menu-block"> 
      </div> 
      <div class="clear"> 
      </div> 
  </div> 
   
  .menu 
  { 
     width:100%; 
     height: 50px; 
  } 
   
  .menu-block{ 
     width:16.66%; 
     height:50px; 
     float:left; 
  } 
   
  .clear{ 
    clear:both; 
  }

.menu-blockları koyduktan sonra menu-block stili içerisinde float olduğu için altına birde clear:both içerikli boş bir div koymalısın ki aşağıya gelemen elementler yukarıdakileri yok saymasın. Böyle yaptığın zaman aşağı yukarı resimdeki gibi bir görüntüye kavuşacaksın. Artık height'i, padding i ortalamayı falan senin belirlemen gerekiyor.

quote:

Orijinalden alıntı: SokemoN

Imagebutonlarin genişlikleri 100% yaparsan bozulur çünkü image butonlar kendini 100%e eşitlemek için kendi üst nesnelerine verilen ilk sabit genişlik değerini alırlar. Buna görede imagelerin boyu %16.66 değil 100px olur. O yüzden senin minimum ekran boyutunu düşünerek veya calc() methodunu kullanarak boyutlandırma yapman gerekli css içerisinde.