1485 sujets

Web Mobile et responsive web design

Convertir la navigation en menu déroulant (select)

Salut à tous,

Je cherche à "convertir" mon menu en liste vers un menu déroulant.

Voici quelques exemples :

Exemple 1
Exemple 2

Le site sur lequel je travaille est un "One Page" fonctionnant avec des ancres et un système d'onglets ...

J'ai essayé différentes méthodes, mon menu déroulant s'affiche bien lorsque la taille du navigateur se rapproche de celle d'un smartphone (via mediaqueries) mais je ne parviens pas à changer de page (ou d'onglet) lorsque je choisis une option dans le select. Je ne sais pas si cela est dû à une erreur/oubli de code JS par rapport à l'utilisation des ancres ou si cela provient du script permettant l'affichage des pages via les onglets.

Quelqu'un peut-il m'aider ?

Voici mon code :

HTML (Menu)

<nav role="navigation">
<ul class="tabs">
<li class="tab"><a href="#section1" class="tab-section1">Page 1</a></li>
<li class="tab"><a href="#section2" class="tab-section2">Page 2</a></li>
<li class="tab"><a href="#section3" class="tab-section3">Page 3</a></li>
<li class="tab"><a href="#section4" class="tab-section4">Page 4</a></li>
<li class="tab"><a href="#section5" class="tab-section5">Page 5</a></li>
</ul>
</nav>


CSS

nav select { display:block;}
nav ul { display:none; }


JS (Pour le système d'onglets)

var $content = $("#content");
$content.easytabs({
animate : true,
updateHash : false,
transitionIn : 'fadeIn',
transitionOut : 'fadeOut',
animationSpeed : 200,
tabs : ".tab",
tabActiveClass :'active',
});
$content.find('.tabs li a').hover(
function() {
$(this).stop().animate({ marginTop: "-5px" }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
}
);


JS (Pour le select)

jQuery(document).ready(function($){
var $menu_select = $("<select />");	
$("<option />", {"selected": "selected", "value": "", "text": "Site Navigation"}).appendTo($menu_select);
$menu_select.appendTo("nav");
$("nav ul li a").each(function(){
var menu_url = $(this).attr("href");
var menu_text = $(this).text();
if ($(this).parents("li").length == 2) { menu_text = '- ' + menu_text; }
if ($(this).parents("li").length == 3) { menu_text = "-- " + menu_text; }
if ($(this).parents("li").length > 3) { menu_text = "--- " + menu_text; }
$("<option />", {"value": menu_url, "text": menu_text}).appendTo($menu_select)
})
field_id = "nav select";
$(field_id).change(function()
{
value = $(this).attr('value');
window.location = value;	
});
})


Merci !
Modifié par yank (11 Oct 2012 - 18:55)
Pour info, je viens de tester en ligne et non pas en local comme jusqu'à présent.

Lors du choix d'une option dans le select, le lien est bien pris en compte mais le changement de page n'a pas lieu.

Il m'affiche ça dans l'url : http://www.test.fr/#section2
Salut,

En fait, je pense que c'est lié à ton script "easytabs" qui gère l'affichage de tes contenus (en l'occurrence les onglets).
Lorsque tu passes en select, tu changes la CSS des onglets, tu essaies de repasser à une navigation avec des ancres mais, malheureusement, ton "easytabs" sévit toujours...

tm
tm™ a écrit :
Salut,

En fait, je pense que c'est lié à ton script &quot;easytabs&quot; qui gère l'affichage de tes contenus (en l'occurrence les onglets).
Lorsque tu passes en select, tu changes la CSS des onglets, tu essaies de repasser à une navigation avec des ancres mais, malheureusement, ton &quot;easytabs&quot; sévit toujours...

tm


C'est bien ce qu'il me semble aussi ...

Ma ... Comment régler ce conflit ? Smiley ohwell
Ton plugin ne semble pas proposer de méthode pour l'enlever...
A la vue de ceci, tu devrais t'en sortir avec un petit .show() bien placé...
Sinon, c'est aussi l'exemple typique d'utilisation d'un plugin qui embarque plein d'options pour un usage assez basique qui serait facilement re-développé en étant mieux adapté à ta version responsive !

tm
tm™ a écrit :
Ton plugin ne semble pas proposer de méthode pour l'enlever...
A la vue de ceci, tu devrais t'en sortir avec un petit .show() bien placé...
Sinon, c'est aussi l'exemple typique d'utilisation d'un plugin qui embarque plein d'options pour un usage assez basique qui serait facilement re-développé en étant mieux adapté à ta version responsive !

tm


Merci pour ton retour.

Je vais voir ce que ça donne avec ton exemple mais n'étant pas fan du CSS inclut directement dans le HTML, je vais quand même réfléchir à une autre solution de menu responsive.
Sujet clos
Aller à