Mobil Tasarım - HTML Dropdown (Açılır) Menü Yapımı

Mobil uyumluluğu olmayan siteleriniz için açılır menü yapmakta zorlanıyorsanız ya da birden fazla JavaScript içeren hazır çözümlerle uğraşmak istemiyorsanız doğru yere geldiniz. Az sonra göreceğiniz yöntemle sadece bir kaç satır kodla yapabileceğinizi göreceksiniz.

Öncelikle sitemizin kendi menüsüne ek olarak, hemen üst kısmına bir select/option element ağı oluşturuyoruz.

<select class="mobilMenu" name="select" id="mobilDrop">

        <option value="/">Sayfaya Git...</option>

        <option value="hakkimizda.html">Hakkımızda</option>

        <option value="iletisim.html">İletişim</option>

</select>

Buraya kadar geldiğinize göre Media Query ile CSS'de tasarımınızı nasıl mobil hale getireceğinizi muhtemelen biliyorsunuzdur. Fakat çok derine inmeden, burada yapacağımız olan kısmı kısaca tekrarlıyorum. (Normalde sitenizin HTML menüsünün sınıfını "menu" olduğunu var sayarak aşağıdaki kısmı yazdım. Sizinki farklı is değiştirebilirsiniz.)

        .mobilMenu {

            display: none;

        }

        @media only screen and (max-width: 767px) {

            .mobilMenu {

                display: block;

            }

            .menu {

                display: none;

            }

        }

Sırada ise JavaScript var. Buradaki scriptin çalışma mantığı, <option>'ların içerisindeki value değerine atadığınız string değerler doğrultusunda kullanıcının tarayıcısının yönlendiriyor olması.

        document.getElementById("mobilDrop").onchange = function () {

            if (this.selectedIndex !== 0) {

                window.location.href = this.value;

            }

        };

Menüyü istediğiniz gibi değiştirebilmeniz ve stil vermeniz mümkün. Ayrıca backend kısmında kullandığınız dil ne olursa olsun <select> / <option> yapısı <ul> / <li> gibi benzerlik gösterdiği için for ve foreach döngülerinde rahatlıkla kullanılabilecektir.

Demo için JSFiddle Linki: http://jsfiddle.net/iCromwell/9rmNc/

Takipte kalın, sevgiler...