B
BIBI' L'indiscipliné
Salut à tous, aujourd'hui on se retrouve pour un énorme tutoriel qui est pour moi, très utile.
J'espère qu'il vous plaira et je vous souhaite une bonne lecture.
Je vais commencer par vous présenter le sommaire.
Pour remédier au problème suivez bien le tutoriel à la lettre, c'est vraiment important !
Le fonctionnement est super simple : Votre site détecte si le visiteur a un mobile ou un ordinateur. Il redirige l'utilisateur en cas que celui ci navigue son son mobile. Le seul inconvénient c'est que vous aurez 2 fois plus de code à gérer, mais vous aurez le contrôle totale de la page.
Le désavantage de cette méthode c'est la redirection vers la version mobile qui est assez compliquée à mettre en place, de plus elle ne fonctionne pas forcément. Mais vous allez voir que l'autre méthode non plus n'est pas parfaite.
En résumé :
Ce qu'il faut savoir c'est que les navigateurs mobile vont afficher votre page avec une largeur par défaut qui sera celle d'un ordinateur (980 px). Ainsi votre site est affiché en tout petit sur votre téléphone.
Pour éviter ça il suffit de dire au navigateur qu'il respect les largeurs mobile.
Certains vont demander "Eu... Mais je fais ça comment moi? Je parle au navigateur?".
Bien sur que non, je vais vous expliquer !
Ça peut paraitre compliqué, certes mais c'est super simple. Il suffit de rajouter une balise dans votre code HTML pour que le navigateur mobile affiche votre site avec une largeur dite "correcte".
Vous pouvez comprendre cette balise comme : "La largeur de mon site correspondra à la largeur de l'appareil." Vous pouvez également utiliser la constante device-height avec la propriété height, mais cette utilisation est beaucoup moins courante.
Vous pouvez aussi mettre une valeur en pixel pour la largeur mais cette méthode est très déconseillée puisque votre page ne va pas s'adaptée aux différentes variantes de votre appareil (Mode portrait, paysage ...)
Vous pouvez déjà regarder votre site en rajoutant la balise pour voir qu'est ce qu'il y a de changé.
Beaucoup d'entre vous vont me dire "Mais je n'ai pas accès à internet via mon mobile, .. Attendez ça arrive !
Pour ça il existe des émulateur. Comme sur les ordinateurs, les navigateurs pour mobile sont nombreux, vous pouvez facilement trouver un émulateur. Il existe, je crois, un émulateur pour Opéra mobile qui a été fourni par la société sur le web (Faites des recherches).
Vous pouvez en trouver pleins mais je conseille
Sujet clos, qu'est ce qu'il c'est réellement passé ?
Pour que tout le monde puisse suivre je vais tester la balise sur une vraie page web.
Je vais prendre l'acceuil du site du zéro par exemple.
Ça donne ça :
C'est le site originale avec la balise. (Safari mobile)
Comme vous pouvez le remarquer ça a seulement dé-zoomé le site.
Or, si on regarde le CSS on peut lire ceci :
On va alors aussi modifier ça !
Notre but c'est simplement d'avoir la largeur du site qui soit bien affichée sur notre mobile.
On va essayer 300px, alors pourquoi 300px ? Tout simplement car 300px est une valeur qui fonctionne pas mal sur tout les navigateurs.
Là ça a changé, ce qui est bien c'est que le texte est lisible de suite et que certains éléments prennent le moins de place possible vous voyez ?
Mais bon c'est pas très bien encore.. Comme vous le voyez le design est tout écrasé, cassé, détruit..
Maintenant vous me croyez ? Cette balise c'est la clef de votre design, la suite se fera grâce à media queries.
C'est le zoom initial,minimal ou encore maximal.
Le zoom initial :
Comme je vous ai déjà dit, le zoom au chargement de la page est "aléatoire". Le truc c'est que si votre site est bien fait, le zoom s'adaptera comme vous le voudrez. En gros il n'y en aura pas, le zoom sera de 1.
Mais vous pouvez préciser à votre navigateur quel doit être le zoom initial.
Le zoom minimal :
Si un des visiteurs de votre site souhaite voir le site en plus petit, vous allez pouvoir définir de combien de fois il pourra. C'est option n'est pas très utile mais il faut que vous sachiez comment l'utiliser, voici donc comment l'utiliser :
A noter que la valeur 0.25 est celle par défaut du navigateur Safari mobile.
Le zoom maximal :
Comme pour le minimal vous pouvez indiquer un zoom maximal. Le navigateur aura parfois un comportement par défaut : C'est à dire que si vous zoomer trop et que le texte n'est plus visible, le navigateur dézoomera automatiquement.
Voici comment l'utiliser :
A noter que la valeur 5.0 est aussi la valeur par défaut de Safari mobile.
Cette option là, pour moi est plus utile que le zoom minimal.
Lorsque votre visiteur clique sur une zone de texte par exemple, le navigateur peut zoomer automatiquement. Définir le zoom maximal à 1.0 peut éviter que le navigateur fasse ceci.
Alors, en CSS on va se débrouiller pour que notre site ne dépasse pas une largeur que nous avons fixé.
Les media queries peuvent être utilisés de 2 façons : Une fois dans le CSS et l'autre depuis la balise <link> votre page HTML.
Pour la méthode en HTML voici comment procéder :
L'avantage de cette méthode c'est qu'un visiteur avec un appareil ne correspondant pas à la requête ne téléchargera pas ce dont il a besoin. C'est donc plus rapide pour lui. Pour votre serveur, cela évite de la bande passante inutile.
En CSS il faut prendre tout le code que vous destinez aux mobile dans un bloc.
Le code pour mobile est là pour réduire les marges, revoir les positions des éléments, masquer des éléments non désirés sur votre mobile ou encore augmenter la taille du texte si c'est nécessaire donc adapter le design pour des longueurs plus petites.
Le tableau suivant va vous expliquer :
Les smartphones : Largeur en pixel (320 à 480) | Condition utilisée : (max-width: 480px)
De smartphones à tablettes : Largeur en pixel (481 à 767) | Condition utilisée : (max-width: 767px)
Tablettes à petits écrans : Largeur en pixel (768 à 979) | Condition utilisée : (max-width: 979px)
Ordinateur : Largeur en pixel (980 à 1199) | Condition utilisée : -
Ecrans larges : Largeur en pixel (1200 et plus) | Condition utilisée : (min-width : 1200px)
Les propriétés des tablettes s'appliquent aussi aux mobiles avec les conditions que je vous ai montrées.
------------------------------------------
Le type de média : Le choix est déjà dispo dès la norme CSS2 mais il est possible que vous soyez passé à côté.
Vous pouvez spécifier à quel type de média votre feuille de style va s'appliquer, nous verrons un peu plus loin comment procéder. Vous avez le choix entre les valeurs suivantes :
Média
Concerne
All
Tous les médias. C'est la valeur par défaut.
Braille
Les appareils brailles.
Embossed
Les imprimeries en braille.
Handhelp
Les appareils mobiles (avec petits écrans ou une bande passante limitée).
Print
Les documents imprimés.
Projection
Les projecteurs et tout autre type de projection.
Screen
Les écrans d'ordinateur avec couleurs.
Speech
Les synthétiseurs de parole.
Tty
Les appareils à police fixe (généralement avec des capacités d'affichage limitées).
Tv
Les téléviseurs.
C'est génial pour cibler un certain type de média. Il suffit de trouver le bon nom et le tour est joué. Mais ce n'est qu'une théorie.. On cite souvent l'exemple de Safari Mobile qui se concidère comme un screen contrairement à ce qu'on peut attendre.
L'opérateur and permet de répondre à vos attentes : Les 2 propriétés (Ou plus) doivent être toutes correctes pour que la feuille de style soit affichée.
Si vous voulez prendre en compte plusieurs appareils qui n'ont pas de propriétés communes, vous pouvez écrire pleins de media queries à la suite en les séparant par une virgule pour chaque media queries. Vous pourrez donc utiliser les opérateur not et only à chaque requête.
Comme vous pouvez le voir, les possibilités offertes par CSS3 sont nombreuses.
---------------------------
(Image trouvé sur le web)
Mais ça reste ma version finale de ce site car après ça serait trop compliqué à expliquer.
Pour un site, normalement vous pouvez créer une version tablette. Une version mobile en un peu plus grand.. Ici ce n'est pas trop la peine mais vous pouvez par exemple mettre le <aside> plus large que haut.
Vous pouvez aussi faire une version "Big écran" avec une largeur supérieur à 1200px par exemple.
Au lieu de mettre simplement des marges vides sur le côté, mettez-y votre menu en <position: fixed;> pour simplifier encore plus l'utilisation de votre site !
Votre CSS ressemblera donc à ceci :
Les valeurs peuvent être, biensur modifiées selon vos envies.
Comment réparer ça ? Ca vous dit de le rajouter à votre site ?
Vous savez la fameuse phrase sur ce qu'il faut savoir sur les navigateurs mobiles ? Bref.
Non on ne peut pas l'enlever définitivement mais on peut l'enlever quand le visiteur le demande.
Certains sites, lorsque l'on y accède avec un mobile, vous renvois vers une page dite "spéciale" qui vous demande si vous voulez avoir la version mobile ou originale.
Perso je trouve ça chiant.. Je vais vous montrer une autre façon de procéder : On va afficher un (ou plusieurs) lien, uniquement sur la version mobile, pour accéder à la version pour ordinateur. Avec un paramètre dans l'URL couplé avec une condition, on mettra ou non la balise meta.
Le visiteur qui a un mobile pourra choisir la version qu'il veut :
Allons-y.
L'entête doit contenir la balise <head> pour pourvoir mettre la balise <meta>et le menu servira juste à afficher le lien, mais vous pouvez le mettre où vous le souhaitez.
Vous pouvez insérer le lien ou vous voulez y compris aux pieds de votre page.
On va maintenant, grâce à PHP, utiliser le paramètre qui sera présent dans l'URL afin d'enlever la balise <meta>. On va également utiliser les sessions afin de conserver le choix des utilisateurs. Voici le code :
La solution : Avec une condition en PHP, sur la variable "session", on s'assure qu'on n'affiche le code uniquement pour ceux qui l'ont demandé, et avec la classe .visible-desktop, on remplit la deuxième condition.
Et voilà c'est fini !
La condition que l'on a mis dans l'en-tête nous permet de rechanger à loisir la valeur de la variable session.
Je vous donne le code que j'utilise pour faire des boutons (C'est moche mais comme vous êtes des as vous allez mieux faire que moi).
N'oubliez pas de cacher le menu sous 600px lorsqu'on change sa présentation, avec <display: none>;.
Comme le tuto ne concerne pas que JS je vais directement vous donner ma solution.
Je vais quand même vous donner le code puisque je vais rien vous apprendre sur ce point là.
Ici, tout simplement, on va ajouter une "encre" à notre lien internet :
Ainsi, il vous suffit juste de rajouter un deuxième menu à la fin de votre page.
Et pour qu'il ne s'affiche pas pour les visiteurs qui n'ont en pas besoin il vous suffira de rajouter une balise <noscript>
Il ne faut pas oublier que l'on ne veut pas afficher que sur un petit écran (Moins que 600px) Je vous laisse faire.
Et maintenant, on a un problème avec le JS ! En effet, lorsqu'on clique pour dérouler le menu avec JavaScript activé, on est quand même redirigé vers #noscriptMenu, or on veut empêcher ce comportement.
Et bien on va annuler le comportement par défaut grâce aux paramètres qu'on envois à la fonction lors du clic.
Donc voilà ce petit tutoriel est fini, j'espère que ce tuto vous aura plus.
Sachez que j'ai mis 2 jours à penser, expliquer et rédiger le tuto donc ça représente pas mal de temps donc essayez d'être un minimum indulgent.
Je vous laisse.
A la prochaine.
BIBI
PS: Les images ont été trouvées sur Google image, mais le topic a été 100% réalisé par mes soins.
J'espère qu'il vous plaira et je vous souhaite une bonne lecture.
Je vais commencer par vous présenter le sommaire.
- Adapter son site au format mobile avec CSS3.
- La base des fonctionnements.
- La méthode utilisée.
- Une seule balise.
- Les quelques options.
- Les possibilités offertes par CSS3.
- Utiliser les Media queries.
- Les media, le choix.
- Adapter un exemple au format mobile.
- Les instructions pour réaliser cette manœuvre.
- Allez plus loin.
- Accéder à la version pour ordinateur.
- Les principes.
- L'exemple avec PHP.
- JavaScript : Le déroulement de ses menus.
- Créer son bouton.
- Gérer la désinstallation de JavaScript.
- Adapter son site au format mobile avec CSS3.
Pour remédier au problème suivez bien le tutoriel à la lettre, c'est vraiment important !
- La base des fonctionnement.
- La méthode utilisée.
- Un sous-domaine pour votre mobile.
Le fonctionnement est super simple : Votre site détecte si le visiteur a un mobile ou un ordinateur. Il redirige l'utilisateur en cas que celui ci navigue son son mobile. Le seul inconvénient c'est que vous aurez 2 fois plus de code à gérer, mais vous aurez le contrôle totale de la page.
Le désavantage de cette méthode c'est la redirection vers la version mobile qui est assez compliquée à mettre en place, de plus elle ne fonctionne pas forcément. Mais vous allez voir que l'autre méthode non plus n'est pas parfaite.
- Le visiteur demande la page.
- Le serveur ne s'occupe pas de savoir si le visiteur navigue via un mobile ou non, c'est à l'appareil de s'adapter.
En résumé :
- Avec la méthode du sous-domaine, le code sur le serveur sera sur-chargé mais le visiteur aura une navigation plus rapide, meilleure tout simplement.
- En utilisant les media queries vous n'aurez qu'une seule page à creer mais la page envoyée au visiteur sera beaucoup plus lourde.
- Une seule balise.
Ce qu'il faut savoir c'est que les navigateurs mobile vont afficher votre page avec une largeur par défaut qui sera celle d'un ordinateur (980 px). Ainsi votre site est affiché en tout petit sur votre téléphone.
Pour éviter ça il suffit de dire au navigateur qu'il respect les largeurs mobile.
Certains vont demander "Eu... Mais je fais ça comment moi? Je parle au navigateur?".
Bien sur que non, je vais vous expliquer !
Ça peut paraitre compliqué, certes mais c'est super simple. Il suffit de rajouter une balise dans votre code HTML pour que le navigateur mobile affiche votre site avec une largeur dite "correcte".
Vous pouvez comprendre cette balise comme : "La largeur de mon site correspondra à la largeur de l'appareil." Vous pouvez également utiliser la constante device-height avec la propriété height, mais cette utilisation est beaucoup moins courante.
Vous pouvez aussi mettre une valeur en pixel pour la largeur mais cette méthode est très déconseillée puisque votre page ne va pas s'adaptée aux différentes variantes de votre appareil (Mode portrait, paysage ...)
Vous pouvez déjà regarder votre site en rajoutant la balise pour voir qu'est ce qu'il y a de changé.
Beaucoup d'entre vous vont me dire "Mais je n'ai pas accès à internet via mon mobile, .. Attendez ça arrive !
Pour ça il existe des émulateur. Comme sur les ordinateurs, les navigateurs pour mobile sont nombreux, vous pouvez facilement trouver un émulateur. Il existe, je crois, un émulateur pour Opéra mobile qui a été fourni par la société sur le web (Faites des recherches).
Vous pouvez en trouver pleins mais je conseille
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
pour les iPhone qui fonctionne plutôt pas mal.Sujet clos, qu'est ce qu'il c'est réellement passé ?
Pour que tout le monde puisse suivre je vais tester la balise sur une vraie page web.
Je vais prendre l'acceuil du site du zéro par exemple.
Ça donne ça :
C'est le site originale avec la balise. (Safari mobile)
Comme vous pouvez le remarquer ça a seulement dé-zoomé le site.
Or, si on regarde le CSS on peut lire ceci :
On va alors aussi modifier ça !
Notre but c'est simplement d'avoir la largeur du site qui soit bien affichée sur notre mobile.
On va essayer 300px, alors pourquoi 300px ? Tout simplement car 300px est une valeur qui fonctionne pas mal sur tout les navigateurs.
Là ça a changé, ce qui est bien c'est que le texte est lisible de suite et que certains éléments prennent le moins de place possible vous voyez ?
Mais bon c'est pas très bien encore.. Comme vous le voyez le design est tout écrasé, cassé, détruit..
Maintenant vous me croyez ? Cette balise c'est la clef de votre design, la suite se fera grâce à media queries.
- Les quelques options.
C'est le zoom initial,minimal ou encore maximal.
Le zoom initial :
Comme je vous ai déjà dit, le zoom au chargement de la page est "aléatoire". Le truc c'est que si votre site est bien fait, le zoom s'adaptera comme vous le voudrez. En gros il n'y en aura pas, le zoom sera de 1.
Mais vous pouvez préciser à votre navigateur quel doit être le zoom initial.
Le zoom minimal :
Si un des visiteurs de votre site souhaite voir le site en plus petit, vous allez pouvoir définir de combien de fois il pourra. C'est option n'est pas très utile mais il faut que vous sachiez comment l'utiliser, voici donc comment l'utiliser :
A noter que la valeur 0.25 est celle par défaut du navigateur Safari mobile.
Le zoom maximal :
Comme pour le minimal vous pouvez indiquer un zoom maximal. Le navigateur aura parfois un comportement par défaut : C'est à dire que si vous zoomer trop et que le texte n'est plus visible, le navigateur dézoomera automatiquement.
Voici comment l'utiliser :
A noter que la valeur 5.0 est aussi la valeur par défaut de Safari mobile.
Cette option là, pour moi est plus utile que le zoom minimal.
Lorsque votre visiteur clique sur une zone de texte par exemple, le navigateur peut zoomer automatiquement. Définir le zoom maximal à 1.0 peut éviter que le navigateur fasse ceci.
- Les possibilités offerte par CCS3.
- Utiliser les Media queries
- La technique en CSS3.
Alors, en CSS on va se débrouiller pour que notre site ne dépasse pas une largeur que nous avons fixé.
Les media queries peuvent être utilisés de 2 façons : Une fois dans le CSS et l'autre depuis la balise <link> votre page HTML.
Pour la méthode en HTML voici comment procéder :
L'avantage de cette méthode c'est qu'un visiteur avec un appareil ne correspondant pas à la requête ne téléchargera pas ce dont il a besoin. C'est donc plus rapide pour lui. Pour votre serveur, cela évite de la bande passante inutile.
En CSS il faut prendre tout le code que vous destinez aux mobile dans un bloc.
Le code pour mobile est là pour réduire les marges, revoir les positions des éléments, masquer des éléments non désirés sur votre mobile ou encore augmenter la taille du texte si c'est nécessaire donc adapter le design pour des longueurs plus petites.
- Valeurs standards.
Le tableau suivant va vous expliquer :
Les smartphones : Largeur en pixel (320 à 480) | Condition utilisée : (max-width: 480px)
De smartphones à tablettes : Largeur en pixel (481 à 767) | Condition utilisée : (max-width: 767px)
Tablettes à petits écrans : Largeur en pixel (768 à 979) | Condition utilisée : (max-width: 979px)
Ordinateur : Largeur en pixel (980 à 1199) | Condition utilisée : -
Ecrans larges : Largeur en pixel (1200 et plus) | Condition utilisée : (min-width : 1200px)
Les propriétés des tablettes s'appliquent aussi aux mobiles avec les conditions que je vous ai montrées.
- Gérer les éléments problématiques.
------------------------------------------
- Les médias, le choix.
Le type de média : Le choix est déjà dispo dès la norme CSS2 mais il est possible que vous soyez passé à côté.
Vous pouvez spécifier à quel type de média votre feuille de style va s'appliquer, nous verrons un peu plus loin comment procéder. Vous avez le choix entre les valeurs suivantes :
Média
Concerne
All
Tous les médias. C'est la valeur par défaut.
Braille
Les appareils brailles.
Embossed
Les imprimeries en braille.
Handhelp
Les appareils mobiles (avec petits écrans ou une bande passante limitée).
Les documents imprimés.
Projection
Les projecteurs et tout autre type de projection.
Screen
Les écrans d'ordinateur avec couleurs.
Speech
Les synthétiseurs de parole.
Tty
Les appareils à police fixe (généralement avec des capacités d'affichage limitées).
Tv
Les téléviseurs.
C'est génial pour cibler un certain type de média. Il suffit de trouver le bon nom et le tour est joué. Mais ce n'est qu'une théorie.. On cite souvent l'exemple de Safari Mobile qui se concidère comme un screen contrairement à ce qu'on peut attendre.
- Les opérateurs logiques.
- L'opérateur and.
L'opérateur and permet de répondre à vos attentes : Les 2 propriétés (Ou plus) doivent être toutes correctes pour que la feuille de style soit affichée.
Vous pouvez noter que l'écran s'écrit sans parenthèse et qu'il y a un espace avant et après And alors faites attention.
- L'opérateur not.
- L'opérateur only
Si vous voulez prendre en compte plusieurs appareils qui n'ont pas de propriétés communes, vous pouvez écrire pleins de media queries à la suite en les séparant par une virgule pour chaque media queries. Vous pourrez donc utiliser les opérateur not et only à chaque requête.
Comme vous pouvez le voir, les possibilités offertes par CSS3 sont nombreuses.
---------------------------
- Aller plus loin.
(Image trouvé sur le web)
Mais ça reste ma version finale de ce site car après ça serait trop compliqué à expliquer.
Pour un site, normalement vous pouvez créer une version tablette. Une version mobile en un peu plus grand.. Ici ce n'est pas trop la peine mais vous pouvez par exemple mettre le <aside> plus large que haut.
Vous pouvez aussi faire une version "Big écran" avec une largeur supérieur à 1200px par exemple.
Au lieu de mettre simplement des marges vides sur le côté, mettez-y votre menu en <position: fixed;> pour simplifier encore plus l'utilisation de votre site !
Votre CSS ressemblera donc à ceci :
Les valeurs peuvent être, biensur modifiées selon vos envies.
- Accéder à la version pour ordinateur.
Comment réparer ça ? Ca vous dit de le rajouter à votre site ?
- Le principe.
Vous savez la fameuse phrase sur ce qu'il faut savoir sur les navigateurs mobiles ? Bref.
Non on ne peut pas l'enlever définitivement mais on peut l'enlever quand le visiteur le demande.
Certains sites, lorsque l'on y accède avec un mobile, vous renvois vers une page dite "spéciale" qui vous demande si vous voulez avoir la version mobile ou originale.
Perso je trouve ça chiant.. Je vais vous montrer une autre façon de procéder : On va afficher un (ou plusieurs) lien, uniquement sur la version mobile, pour accéder à la version pour ordinateur. Avec un paramètre dans l'URL couplé avec une condition, on mettra ou non la balise meta.
Le visiteur qui a un mobile pourra choisir la version qu'il veut :
- Si il veut la version originale (ordinateur) le serveur lui renvoit la page sans la balise <meta name="viewport">.
- Si il demande rien il sera envoyé sur la page par défaut.
- L'exemple avec PHP.
Allons-y.
- La préparation
L'entête doit contenir la balise <head> pour pourvoir mettre la balise <meta>et le menu servira juste à afficher le lien, mais vous pouvez le mettre où vous le souhaitez.
- Accéder à la version pour ordinateur.
Vous pouvez insérer le lien ou vous voulez y compris aux pieds de votre page.
On va maintenant, grâce à PHP, utiliser le paramètre qui sera présent dans l'URL afin d'enlever la balise <meta>. On va également utiliser les sessions afin de conserver le choix des utilisateurs. Voici le code :
- Revenir à la version mobile.
La solution : Avec une condition en PHP, sur la variable "session", on s'assure qu'on n'affiche le code uniquement pour ceux qui l'ont demandé, et avec la classe .visible-desktop, on remplit la deuxième condition.
Et voilà c'est fini !
La condition que l'on a mis dans l'en-tête nous permet de rechanger à loisir la valeur de la variable session.
- Créer son bouton avec JavaScript.
Je vous donne le code que j'utilise pour faire des boutons (C'est moche mais comme vous êtes des as vous allez mieux faire que moi).
N'oubliez pas de cacher le menu sous 600px lorsqu'on change sa présentation, avec <display: none>;.
- Avec un peu de JavaScript.
Comme le tuto ne concerne pas que JS je vais directement vous donner ma solution.
- Avec les frameworks.
- jQuery
Je vais quand même vous donner le code puisque je vais rien vous apprendre sur ce point là.
- Gérer la désinstallation de JavaScript.
Ici, tout simplement, on va ajouter une "encre" à notre lien internet :
Ainsi, il vous suffit juste de rajouter un deuxième menu à la fin de votre page.
Et pour qu'il ne s'affiche pas pour les visiteurs qui n'ont en pas besoin il vous suffira de rajouter une balise <noscript>
Il ne faut pas oublier que l'on ne veut pas afficher que sur un petit écran (Moins que 600px) Je vous laisse faire.
Et maintenant, on a un problème avec le JS ! En effet, lorsqu'on clique pour dérouler le menu avec JavaScript activé, on est quand même redirigé vers #noscriptMenu, or on veut empêcher ce comportement.
Et bien on va annuler le comportement par défaut grâce aux paramètres qu'on envois à la fonction lors du clic.
Vous voyez, la partie sur JavaScript à été la partie la moins difficile selon moi.
Donc voilà ce petit tutoriel est fini, j'espère que ce tuto vous aura plus.
Sachez que j'ai mis 2 jours à penser, expliquer et rédiger le tuto donc ça représente pas mal de temps donc essayez d'être un minimum indulgent.
Je vous laisse.
A la prochaine.
BIBI
PS: Les images ont été trouvées sur Google image, mais le topic a été 100% réalisé par mes soins.
Dernière édition par un modérateur:
