Comment faire pour créer Mobile-friendly Menu Responsive
Créer un menu Responsive
Fondamentalement, lorsque vous avez défini la largeur UL à 100% par le constructeur CSS sur la page ddmenu de Menucool, vous obtenez un menu réactif qui adaptera sa mise en page aux écrans.
Le menu ne soit pas 100% de large dans un grand écran de bureau
Vous pouvez facilement résoudre ce problème en donnant l'UL style max-width. Par exemple:
Gardez le menu un joli look en emballage à plusieurs lignes
Ceci peut être réalisé en utilisant des requêtes des médias CSS3. Dans le ddmenu.css du modèle 4 que vous pouvez télécharger à partir du ddmenu page. vous trouverez qu'il est accompli par le code suivant:
Les zones tactiles du menu devrait être plus grand et plus facile à sélectionner dans les appareils mobiles
La solution ajoute viewport balise meta dans la section HEAD de votre page réactif. Il racontera les appareils mobiles pour rendre la page à la résolution de pixels correct sans zoom sur le contenu de la page. Il garantira que les éléments du menu de navigation sont assez grand pour que les utilisateurs puissent facilement interagir avec eux.
balise meta viewport est également nécessaire pour les appareils mobiles pour comprendre les demandes des médias.
Dois-je inclure l'échelle maximale = 1 dans la fenêtre?
En général, vous n'avez pas besoin du réglage maximum échelle = 1 car il désactive la fonctionnalité à utiliser pincée de zoom sur les appareils mobiles.
Qu'est-ce que l'échelle maximale = 1 faire?
maximale échelle = 1 empêche la page de zoom lorsque l'orientation mobile est déplacée
Par exemple, la largeur de la fenêtre iPhone augmentera à 480 pixels en mode paysage. Vous verrez plus de mots dans chaque ligne dans le paysage que dans protrait. Si nous n'avons pas inclus la valeur maximale à l'échelle puis la fenêtre serait de 320 pixels de large à la fois portrait et paysage orientation.
- Les deux versions de base et avancées de ddmenu soutiendront les configurations ci-dessus.
- La section suivante, Création d'un menu adapté aux mobiles. est pris en charge uniquement par la version avancée de ddmenu.
Créer mobile convivial Menu
Si vous choisissez l'option version avancée lors du téléchargement d'un modèle de ddmenu, vous obtiendrez le menu de navigation qui transformera automatiquement à la disposition verticale lors de l'affichage avec les appareils mobiles. Il est également livré avec un bouton de menu qui, lorsque vous cliquez dessus, l'affichage bascule du menu principal.
Nous allons vous guider à travers ce code a été ajouté pour rendre le menu convivial mobile.
Ajouter viewport meta tag
Comme décrit précédemment, il est nécessaire d'inclure la fenêtre méta dans la page:Ajouter des styles pour la mise en page mobile vertical
Vous pouvez trouver le bloc de code suivant à la fin du fichier ddmenu.css:
Le code CSS est assez simple. Donc, nous ne parlerons que les éléments clés:
- Le #ddmenu div.menu-icône est configuré pour afficher: aucun d'abord. Nous utilisons la requête des médias pour rendre le bouton visible lorsque le dispositif se situe dans la plage de largeur spécifiée.
- Vous pouvez utiliser max-device largeur au lieu de largeur max.
Lequel dois-je utiliser: max-device largeur vs max-width?