Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 527

Enregistré le: 30 Juil 2014

Message le Mer Mar 15, 2017 18:20

Bonjour,

Pour les téléphones mobiles, qu'est-ce qui est le mieux : faire un menu avec un formulaire select et un bouton input, ou plutôt un menu déroulant en CSS ?

Merci d'avance pour vos réponses.
Haut
11 Réponses
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Mar 16, 2017 12:21

Le mieux dans quel sens et dans quel contexte ?

Si c'est pour naviguer dans le site je vote pour une liste dans un bloc de type nav.
Code: Tout sélectionner
<nav>
<ul>
<li></li>
</ul>
</nav>


Si c'est pour filtrer / rechercher des données le formulaire.
Haut
Messages: 527

Enregistré le: 30 Juil 2014

Message le Jeu Mar 16, 2017 12:30

Salut niap,

Le mieux au sens ergonomie et compatibilité, pour le client. Un truc qui s'affiche correctement sur tous les mobiles (ou presque) sans faire des barres de scroll etc... Pour ça, je crois que le CSS serait mieux. Le problème c'est qu'alors il faut du javascript et là, peut-être que ça bloque avec certains mobiles, ce qui ne serait pas le cas avec un simple form + select option.

Me dis-je.
Haut
Messages: 2079

Enregistré le: 9 Aoû 2005

Message le Jeu Mar 16, 2017 12:37

Le problème c'est qu'alors il faut du javascript


Tu as des milliers de possibilités de faire du menu css responsive sans js.

Un exemple pris au hasard :
https://medialoot.com/preview/css-only-navigation-menu/index.html
https://codepen.io/andreasstorm/pen/lriga
Faut mettre un peu les mains dedans pour le personnaliser..

T'en a des milliers comme ca...
Haut
Messages: 527

Enregistré le: 30 Juil 2014

Message le Jeu Mar 16, 2017 12:40

Ah oui, j'avais lu ça il y a quelques années. Javascript est désormais inutile pour les menus déroulants en CSS.

Et donc, ces menus fonctionnent bien sur tous les mobiles ? De toute façon, il n'y a pas trop le choix, il me semble.

Mais bon, je voulais être sûr.

**edit**

Et merci pour les liens, soit-dit en passant.
Haut
Messages: 2079

Enregistré le: 9 Aoû 2005

Message le Jeu Mar 16, 2017 12:42

Et donc, ces menus fonctionnent bien sur tous les mobiles ?


Jusqu'à present aucun souci a l'horizon...

Et merci pour les liens, soit-dit en passant.


Pas de quoi :D

Fouille sur Codepen, tu devrais trouver ton bonheur
Modifié en dernier par Furtif le Jeu Mar 16, 2017 12:51, modifié 1 fois.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Mar 16, 2017 12:51

Furtif a écrit:https://codepen.io/andreasstorm/pen/lriga

C'est pas con son truc de la case à cocher.
Mais au niveau accessibilité je me demande ce que ça donne.
Haut
Messages: 8554

Enregistré le: 14 Mai 2003

Message le Jeu Mar 16, 2017 12:57

J'ai déjà vu des menu select sur smartphone ça se transforme en radios, et des select multiple en checkboxes (nativement, sans JS/CSS).
Haut
Messages: 2911

Enregistré le: 8 Avr 2011

Message le Jeu Mar 16, 2017 13:00

Ah bin je vais regarder ca également. J'utilise jusqu'à present le menu du framework boostrap mais je ne suis pas completement satisfait et il tourne avec du js.
Si je peux m'en passer ca serait une bonne chose. Merci Furtif :wink:
Haut
Messages: 527

Enregistré le: 30 Juil 2014

Message le Jeu Mar 16, 2017 13:11

spout a écrit:J'ai déjà vu des menu select sur smartphone ça se transforme en radios, et des select multiple en checkboxes (nativement, sans JS/CSS).


Justement, c'est pire que sur pc, il y a encore plus d'OS et de version d'OS.
Il y a là matière à faire un sondage, pour savoir quelle est la meilleure solution pour gérer des listes de liens, sur mobile.
Haut
Messages: 2079

Enregistré le: 9 Aoû 2005

Message le Jeu Mar 16, 2017 13:32

J'utilise jusqu'à present le menu du framework boostrap mais je ne suis pas completement satisfait et il tourne avec du js.


Voila de quoi trouver ton bonheur (en cherchant un peu)..

http://www.webdesigndev.com/20-responsive-menu-tutorials-free-scripts/
https://www.script-tutorials.com/css3-responsive-menu/
https://sitesforprofit.com/incredibly-useful-list-of-responsive-naviga ... u-patterns
http://www.dynamicdrive.com/style/csslibrary/category/C1/P0/
https://tympanus.net/Development/ResponsiveMultiLevelMenu/index.html
Haut
Messages: 2911

Enregistré le: 8 Avr 2011

Message le Jeu Mar 16, 2017 23:49

Chercher c'est nul :mrgreen: , je préfère quand ca tombe du ciel ou du moins sur les forums

Merci :wink:

Cela dit j'avais cherché (apparemment très mal, bien chercher c'est tout un art et je devrais surtout apprendre a chercher en anglais) mais je ne suis pas tombé sur quelque chose de satisfaisant, je n'ai pas insisté et me suis contenté du menu de boostrap qui fait son job malgré tout.

Le fait qu'on en parle ici j'en profite pour me pencher à nouveau dessus :)
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.