Menu extensible utilisant html5 et css3

Je suis en train de concevoir un site web mobile. Sur la page d'accueil, j'ai des éléments de menu qui disent 'a', 'b', 'c', ..., 'h'. Je souhaite afficher uniquement les trois premiers éléments de menu et créer un bouton "Afficher tous les éléments" qui se développe en cliquant pour afficher tous les éléments. Le bouton doit également devenir "Afficher moins d'éléments" après avoir cliqué dessus.Menu extensible utilisant html5 et css3

Je veux le faire en utilisant seulement HTML5 et CSS3 et pas de JavaScript. Aussi je veux que cette fonctionnalité soit réutilisable autour du site Web.

Comment dois-je faire?

- Merci d'avance!

Source

2012-04-27 hkasera

Vous devez cesser d'essayer d'implémenter la logique d'interaction côté client sans utiliser JavaScript. J'éviterais également d'insister sur des versions spécifiques de technologies à moins que l'exigence soit pour la compatibilité avec les clients plus anciens (ce que les brouillons inachevés sont les moins susceptibles de vous donner). – Quentin

pourquoi pas de javascript? – Alp

J'évite Javascript car il ne fonctionne pas bien avec tous les navigateurs mobiles. – hkasera

Les navigateurs mobiles modernes prennent tous en charge JavaScript, mais offrent aux utilisateurs finaux (au moins dans le cas d'Android, pas sûr d'iOS) un paramètre de configuration pour le désactiver. Votre meilleur choix en tant que développeur est d'utiliser la stratégie "fail safe": Expédier le code HTML avec le menu entièrement développé, et utiliser JavaScript pour réduire le menu immédiatement en charge (ou sur DOM prêt). De cette façon, si vous avez des utilisateurs mobiles avec JavaScript désactivé, ils verront le menu entier. La plupart de vos utilisateurs devraient avoir JavaScript activé, auquel cas ils obtiendront la fonctionnalité d'expansion/réduction que vous décrivez.

Source

2012-04-27 19:42:11 emackey

Il est irréaliste de s'attendre à implémenter ceci sans JavaScript, et si vous pouvez trouver une solution, je ne crois pas que ce soit aussi stable que de simplement utiliser JavaScript. En termes de masquage des éléments de menu, vous pouvez définir leur propriété CSS sur display: none; et placer un bouton qui cible ces éléments de menu et bascule leur propriété d'affichage.

Source

2012-04-27 20:08:24 Jack

Menu extensible utilisant html5 et css3

Répondre

Questions connexes