Commentaires sur : Tuto CSS: Recréer le menu du site d’Apple

Par : Pierre-Jean

Pierre-Jean — Tue, 16 Feb 2010 08:36:39 +0000

Désolé j’ai dit des bétises hier. ça marche pas ma solution pour les ON STATES !

En fait on peux pas avoir des ON STATES et des ON PRESSED sans javascript

La solution pour se passer du javascript est d’abandonner les ON PRESSED et de changer les ON STATES de
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
en
#globalheader #globalnav li#gn-iphone a:focus { background-position: -468px -114px !important; }
sur l’exemple on supprime donc le .iphone et on rajoute le :focus

Si quelqu’un a une solution pour faire marcher le a:active par dessus le a:focus (en css et sans javascript bien sûre) je suis preneur…

Par : Pierre-Jean

Pierre-Jean — Mon, 15 Feb 2010 11:21:10 +0000

On comprend rien à ce que j’ai écrit juste au dessus donc je reprend :

Phil, le ON STATES chez apple fait appel à un javascript qui rajoute la class mais on peux contourner le problème en modifiant le html d’abord :
Pour chaque balise li on rajoute la class comme ceci li id=gn-iphone class=iphone (on rajoute class=nom_de_l’id_moins_gn- dans la balise li)
Pour que ça marche il faut également modifier le css :
On déplasse la class dans les ON STATES
Par exemple au lieu d’avoir #globalheader.iphone… on a #globalheader #globalnav li#gn-iphone.iphone a { background-position: -468px -114px !important; }

Voilà je crois que ça marche pas trop mal. A vous d’affiner…

Par : Pierre-Jean

Pierre-Jean — Mon, 15 Feb 2010 11:15:58 +0000

Bonjour, bonjour

Voici comment résoudre deux petits problèmes soulevé plus haut :

ph40, pour les pointillé persistants sous FF rajouter cette ligne dans le css
:-moz-any-link {
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: medium; }

Phil, le ON STATES chez apple fait appel à un javascript qui rajoute la class mais on peux contourner le problème en modifiant le html d’abord :
Pour chaque on rajoute la class comme ceci iPhone (on rajoute class= »nom_de_l’id_moins_gn- » dans la balise li)
Pour que ça marche il faut également modifier le css :
On déplasse la class dans les ON STATES
Par exemple au lieu d’avoir #globalheader.iphone… on a #globalheader #globalnav li#gn-iphone.iphone a { background-position: -468px -114px !important; }

Voilà je crois que ça marche pas trop mal. A vous d’affiner…

Par : Phil

Phil — Fri, 20 Mar 2009 01:42:14 +0000

Bonjour et merci pour ce TUTO,
J’ai repris le tout, puis transformer l’image ainsi que la taille en largeur, etc.

Par contre je ne comprends pas comment on peut afficher la dernière image (celle tout en bas) une fois arrivé sur une page afin que le bouton reste enfoncé et non cliquable ! (ce doit être ans la partie « ON STATES ») ?

J’ai regardé sur le site d’Apple et j’ai vu sur la page iphone ceci :

Merci de votre aide.
Phil

Par : ph40

ph40 — Sat, 13 Dec 2008 09:11:15 +0000

Superbe démo !
Merci beaucoup
Toujours ce problème de pointillés presistants (une fois un bouton enfoncé ) sous FF

Par : jbj

jbj — Mon, 18 Aug 2008 17:39:58 +0000

Au mec qui à laissé un commentaire le 18/08/2008: Je l’ai effacé par mégarde (merci les spams!).
Pour modifier les libellés, tu dois éditer l’image, il ne suffit pas de modifier le code html.

Par : LuciferX

LuciferX — Mon, 04 Aug 2008 07:33:53 +0000

Intéressant ce tutoriel, le rendu est assez sympa !

Est-ce qu’il s’agit de la technique des portes coulissantes ?

Par : BlackKrystal

BlackKrystal — Thu, 31 Jul 2008 23:57:04 +0000

Waou… Ca tombe bien j’ai un site a refaire =)

Par : Greg-J

Greg-J — Sat, 26 Jul 2008 16:49:05 +0000

Très sympa ce tuto pour comprendre le positionnement des images en CSS

Par : jbj

jbj — Thu, 24 Jul 2008 05:34:18 +0000

Salut Valdun, en effet par défaut Wordpress vire tout semblant de code html, par sécurité semble-t’il. C’est assez gênant dans le cadre d’un blog comme le mien, il faudrait que je parte à la recherche d’un plugin qui empêcherait ce comportement..
Sinon, un grand merci pour tes remarques tes pertinentes, en effet on pourrais alléger le code à certains endroits! Ce code provient intégralement du site Apple, je ne l’ai pas retouché à part pour l’url de l’image de fond.