Transformacja menu (li / select)

Jeżeli chcemy w prosty sposób stworzyć inteligentne (lub jak kto woli: responsywne) menu strony, które z  postaci listy wypunktowanej będzie się przeistaczało na listę rozwijalną na stronach responsywnych polecam skorzystać z opracowanego przeze mnie kodu. Lista rozwijalna to nic innego jak formularz o konstrukcji select – option (ang. drop down list).

Ogólnie to stosuje się dwie metody. Jedna metoda polega na stworzeniu dwóch menu i ukrywaniu jednego z nich za pomocą instrukcji css visibility: hidden według zapytania medialnego, a druga polega, no własnie, na transformacji.

Ta druga metoda jest bardziej wyszukana i nie zaśmieca nam samego kodu html – wymaga za to obsługi JavaScript i trochę kombinowania. Coś za coś, dodatkowym argumentem przemawiającym za drugą metodą jest fakt, że w przypadku wyłączenia stylowania nie będziemy mieli dwóch menu. Na urządzeniach mobilnych z systemem android korzystamy z fajnego systemowego wyglądu listy rozwijalnej.

drop down menu

 

Stwórzmy więc skrypt transformujący listę linków menu głównego na listę rozwijalną. Korzysta się wówczas z interfejsu przeglądarki odpowiedzialnego za wybór elementu z listy w formularzu. Dla osiągnięcia tego celu wystarczy dodać znacznik select wewnątrz znacznika nav:

$("nav").append("<select/>");

Każdy odnośnik należy przekształcić w opcję listy rozwijalnej, która pobiera wartość z jego atrybutu href:

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

Aby zmiana wyboru listy spowodowała przejście do wskazanej strony, wystarczy obsłużyć zdarzenie change, przekazując do window.location aktualnie wybraną wartość opcji z listy:

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

Zachętą dla użytkownika do skorzystania z odmiennego menu jest tekst „Menu…”, jako opcja domyślnie wybrana i nieklikalna:

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

Efekt końcowy

Kod do pobrania: Responsive-Menu

Live demo do przetestowania: Drop Down Menu

 

Transformacja menu (li / select)
4.59 (91.76%) głosów: 17