HTML Mobil Menü Oluşturma

HTML Mobil Menü Oluşturma: Bilirsiniz ki bir sitenin olmazsa olmazları arasında olan mobil sürümlerini yapmak epey yorucu olsa da çoğu arama motorlu tarafından olsun, kullanıcı talepleri doğrultusunda olsun artık şart olmuş bir konudur. Sitenizi ister ayrı bir uzantıda yani m.siteadi.com gibi ister aynı siteniz üzerinden responsive olsun yaptığınızda sitenin bütün kısımlarını hızlıca azıcık html bilginiz var ise tamamlarsınız. Gel gelelim benim de yaşadığım sorunlardan biri mobil menü kısmıdır. Sitenizin masaüstünde menünüz çok güzel ve şıktır. Bunu aynı şekilde mobil görünümünüze doğal olarak taşımanız pek mümkün değildir. Sizlere bu gün göstereceğim yöntem ile güzel sade ve şık bir mobil menü ile sitenizin mobil sayfasını tamamlayıp sayfa yayınına başlayabilirsiniz.

HTML Mobil Menü Oluşturma

Mobil sayfası günümüz teknolojisinde artık bilgisayardan çok internet erişimini cep telefonu ve tabletlerimiz üzerinden gerçekleştirmekteyiz. Hal böyle olunca illaki web sitenizin bir mobil görünümüne ihtiyaç duymaktadır. Sitenize gelen misafirleriniz telefonları veya tabletlerinde siteniz ile ilgili bir takım sorun ile karşılaşabilir buda misafirlerinizin sizden verim almadan sitenizden kaçması neden olabilir. Sonuçta bir web sitesi yapıyor iseniz sitenizde misafirlerinize bir takım bilgiler, görseller vb. veriler aktarmanız gerekebilir buda misafirlerinizin sizden verim alması adına, mobil sürüm veya tablet sürümü olmayan web siteniz gelen misafirleriniz tarafından olumsuz karşılanabilir ve prestij değerinizi düşürebilir. Bu durum aynı şekilde Google, Yandex, Bing gibi arama motorları tarafından da takip edilerek size gerekli puanlamayı düşük puanlama ve istenmeyen sonuçlara sebebiyet verebilir.

HTML Mobil Menü Oluşturma

Gelelim Kodlarımıza:

HTML kısmımızda aşağıdaki örnekte gibi temamızın ilgili kısmına id ve class sitillerimizi ekleyelim.

<ul class="mobmen" id="mymobmen">
  <li><a href="#anasayfa">Ana Sayfa</a></li>
  <li><a href="#haberler">Haberler</a></li>
  <li><a href="#iletisim">İletişim</a></li>
  <li><a href="#hakkimizda">Hakkımızda</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

HTML Kısmımıza aşağıdaki java kodumuzu ekleyelim.

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("mymobmen");
    if (x.className === "mobmen") {
        x.className += " responsive";
    } else {
        x.className = "mobmen";
    }
}
</script>

Temamızın css stil dosyamıza ise aşağıdaki kodları ekleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
ul.mobmen {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
ul.mobmen li {float: left;}
ul.mobmen li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.mobmen li a:hover {background-color: #555;}
ul.mobmen li.icon {display: none;}
 
@media screen and (max-width:680px) {
  ul.mobmen li:not(:first-child) {display: none;}
  ul.mobmen li.icon {
    float: right;
    display: inline-block;
  }
}
 
@media screen and (max-width:680px) {
  ul.mobmen.responsive {position: relative;}
  ul.mobmen.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.mobmen.responsive li {
    float: none;
    display: inline;
  }
  ul.mobmen.responsive li a {
    display: block;
    text-align: left;
  }
}

Yukarıdaki tüm kodları temamıza uyarladıktan sonra sitemize girdiğimiz mobil ölçeğine tarayıcımız üzerinden ayarlayarak giriş yapalım. Örneğimiz aşağıdaki gibi gerçekleşmişse mobil temamız web sitemize bütünleşmiştir.

HTML Mobil Menü Oluşturma

Sitenizi muhakkak mobil sürüme çeviriniz ister bu responsive ölçeklendirme olsun ister ayrı bir tasarımda mobil subdomain adresimiz üzerinden fark etmiyor ama muhakkak siteniz mobil uyumlu olmasını tavsiye ederiz. Mobil Menü Oluşturma HTML

Umarım yardımcı olmuşumdur.

Comments are closed.