Web Design Blog / Programowanie:

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.5 (90.48%) głosów: 21

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail