Mobil cihazlar için menüleri açılır menülere dönüştürmek

Hızlı bir şekilde gelişen mobil cihazlar ve mobil internet fiyatının ucuzlamasıyla mobil uyumlu internet sitelerine olan yönelim çoğaldı. Bu tarz sitelerde ise en zor noktalardan bir tanesi; Normal şartlarda yatay veya dikey olarak döşediğimiz ana menünün mobil cihazlarda açılır menü haline gelmesi.

iPhone, Samsung (S3, S4, Galaxy ve üst serileri) , Nokia ve HTC'nin Windows Phone modelleri ayrıca ios, android ve phone8 yüklü telefonlarda açılır menülere tıklandığında mobil cihazın yada tabletin seçim kutusu açılacağından seçenekler okunaklı ve büyük bir şekilde gösterilecektir.

Mobil cihazlarda ekranı büyütürken yada menülere tıklanırken yanlışlıkla tıklamak istediğimiz sayfanın linkinin yerine başka bir linke tıklamışızdır. Ayrıa bir çok cihazda açılır menülerde sorunlar yaşanmaktadır. Bu sayfada anlattğımız sistemde menüler büyüdüğü için site ziyaretçilerimizin hatalı sayfa linkine tıklama olasılığıda ortadan kalmış oluyor.

HTML

Bildiğinizin üzere, <select> ve <option> etiketleri, <a> etiketi gibi hareket etmemektedir ve , <select> ve <option> etiketlerinin arasına <a> etiketi eklenememektedir. Bu yüzden, her iki menüyüde HTML içerisinde kullanmamız zorunludur.

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

HTML kısmını şimdilik burada bırakıyoruz.

The CSS

By default we'll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.

nav select {
  display: none;
}

Then using media queries, we'll do the switcheroo at some specific width. You can determine that on your own (here's some standard breakpoints).

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

But now you gotta maintain two menus?

Well yeah, that's one concern. Maybe your menus are created dynamically and you can't control the output easily. Maybe you and hand crafting menus but want to make sure you don't accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.

Using jQuery, we can do that with just a few lines of code:

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

Then to make the dropdown menu actually work...

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

But aren't dropdown menus kinda obtrusive?

Kinda. Most small screens these days are mobile and most mobile devices are JavaScript friendly, so not a huge concern. But, if you want to ensure this works with or without JavaScript I have an article about that.

Demo & Download

View Demo Download Files

Video

Quick video example in case you are reading this from somewhere you can't adjust the browser size and play with it to see what the heck we're talking about here.

Variations

• A variation of the same concept, where there is nested menus and it makes optgroups in the select based on the parent/child relationships.
• Submenu's with a dash by Daryn St. Pierre