1485 sujets

Web Mobile et responsive web design

Faire apparaître un autre menu sur mobiles

Bonjour à tous,

J'ai pourtant bien cherché sur le forum mais je n'ai pas trouvé la réponse à ma question... Merci aux personnes qui pourront m'aider. Smiley confused

Je suis en train de construire mon site en version mobile, seulement sur mobile je ne veux plus un menu normal horizontal, je voudrais un menu "select". Le problème c'est que je ne sais pas comment dire dans mon code "si la taille de l'écran est supérieure à 480px mettre ce menu sinon mettre menu 2".
Je pensais au PHP mais j'ai lu sur le net que ce n'était pas possible et qu'il fallait utiliser du javascript... Or je ne maîtrise pas du tout le javascript et je ne trouve pas de code qui pourrait me faire comprendre comment ça doit fonctionner... Smiley confus

Si quelqu'un arrive à m'aider ça serait gentil, cela fait 2 semaines que je bloque sur ça et je suis sur que c'est pas grand chose... Smiley sweatdrop

Merci beaucoup
Ha oui, l'ai chercher à fond dans le forum, mais pas dans les articles Smiley ohwell quel idiot ! Merci en tout cas ! J'étais en train de faire ça de façon très.... artisanale mdr. En cachant le menu normal lorsqu'on utilise la feuille de style du mobile, et cacher le menu du mobile sur la feuille de style de la page normale... (oula je suis pas sûre d'avoir été clair) lol.

M'enfin tout ça pour dire merci Smiley smile j'ai envi de tester le SelectNav

Merci
Bonjour,

Un code js pour changer une liste html en sélecteurs (à adapter au besoin) :

/* changer une liste en sélecteurs */

if (window.matchMedia("(max-width: 780px)").matches) {

$('.nav-mobil').hide();

$("<select />").insertAfter(".nav-mobil");
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Menu"
}).appendTo("nav select");
$(".nav-mobil a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});
$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});
}

Source du code :

http://css-tricks.com/4064-unobtrusive-page-changer/
http://css-tricks.com/examples/ConvertMenuToDropdown/
Modifié par Olivier C (14 Mar 2013 - 01:01)
Sujet clos
Aller à