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

Par : Hugo

Hugo — Thu, 15 Jul 2010 10:16:24 +0000

Bonjour à tous, tout d’abord merci à toi ‘JBJ’ pour ce post..;
Je ne m’y connais absolument pas en codage hmtl, le plaisir de comprendre n’existe donc pas pour moi, parceque je travaille sur iWeb, qui est extrêmement très restreint.

J’aimerais beaucoup insérer le code de la barre de menu apple à mon site, mais iWeb propose uniquement un Widget « Fragment HTML ».
je n’arrive pas à faire fonctionner le code html et le CSS ensemble…

Est-ce que quelqu’un pourrait m’aider ?

Merci d’avance, Hugo .

Par : Maxou2009

Maxou2009 — Wed, 24 Feb 2010 15:14:46 +0000

Bonjour et merci pour le tuto,
Cela est il applicable pour un menu vertical ?

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:23:47 +0000

Bon vous l’aurez compris les guillemets français on en mets pas, on mets des guillemets anglais…

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 ?