Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Créer le nouveau menu Mac Apple en CSS3

Pure CSS3, sans utilisation de Javascript

Création: janvier 2011Modifié:

Images Copyright ©Apple

Contenu
HTML + CSS NO JS NO IMG
Navigateurs
Safari Chrome
Partagez
Facebook Twitter

Votez

68 votes4.68

Démo Full CSS, sans images, sans javascript. Le but était "d’essayer" de reproduire le nouveau menu Mac, sur le site d’Apple, sans utilisation de javascript. Défi en parti réussi. Jetez donc un oeil...

Le défi est en parti réussi

Tout d’abord, la démo fonctionne parfaitement ( en tout cas, au mieux... ) avec Safari / Chrome, notamment sur les animations. Sur Opéra et Firefox 4, les animations sont remplacées par des transitions CSS.

Les "bugs" ...

Tout d’abord l’arrivée du contenu "Applications" qui se fait exclusivement depuis la droite. Normalement, il faudrait que celui-ci arrive, de la droite ou de la gauche, en fonction du contenu qui était affiché juste avant, donc soit les produits, soit les Accessoires. Mais pas facile de savoir...

Deuxième problème, le fait que l’on voit passer les icônes du contenu "Applications" lorsque que l’on passe du lien 1 au lien 3 directement. La encore, pas facile de trouver une méthode pour arriver à quelque chose de propre. Le tout bien sur, sans javascript...

Voilà donc les 2 problèmes auxquels je n’ai pas ( encore ) trouvé de solution. Tous mes essais de techniques différentes n’ont pas été convaincants.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par oliverpool, le 20 février 2011

avec la dernière version de Opéra (11.01), la démo est parfaite (je n’observe pas le 1er des bugs mentionnés)

#2par css3create, le 20 février 2011

Hum... De quel bug parles-tu ? Parce que normalement le bug 1 ( le fait que le menu "application" arrive exclusivement par la droite) n’est pas géré ! Peux tu m’en dire un peu plus ?

#3par macexpress, le 3 mars 2011

c’est dommage, ça aurait été sympa de voir ton code css afin d’admirer plus en détails

#4par Almux, le 6 mai 2011

Et c’est fait sans jquery ?

#5par css3create, le 17 mai 2011

@macexpress : Tu peux trouver le code CSS dans la source.

@Almux : Oui ! pas de jQuery, pas de javascript, pas d’images. Juste les propriétés CSS3.

#6par narf, le 6 juillet 2011

sur FF5, le menu application arrive par la gauche quand on vient de "accessoires".

Beau travail j’aimerais etre aussi calé que toi en css !

#7par justaman, le 10 août 2011

Un tutoriel serait le bienvenu, le code est trop étoffé pour sélectionner uniquement les balises nécessaires.

#8par microgeek, le 27 août 2011

voila ma question es que vos réalisation son "libre" ou téléchargeable, si non sa serait un plus pour votre site de proposé c’est service. à moins que vous ne le vouliez pas.

#9par Tonio, le 22 octobre 2011

Il serait super de pouvoir le télécharger avec du code commenté pour pouvoir le modifier à sa sauce ! Merci en tout cas !

#10par Zebulonbof, le 15 janvier

Oui sans jquery puisque c’est précisé sans javasrcipt ...

#11par MarBil, le 15 mars

Salut, j’ai trop aimé le slide c’est parfait ton travail, mais la seule chose que je n’arrive pas a comprendre pourquoi tu l’as mis ici sans source ni des tutos ! par contre dans le titre c’est bien écris "Creer le nouveau Menu Mac Apple en CSS3. Merci

#12par XwaySoft, le 1er avril

Le menú est sous copyright ou on peux l’utiliser ? Sinon, quelle menu serai paraille et le code source est indecriptible, trop mélanger avec le code de laa page


Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)