Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

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
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

184 votes4.66

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... ). Les animations sont remplacées par des transitions CSS dans les navigateurs non compatibles.

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 2012

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

#11par MarBil, le 15 mars 2012

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 2012

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

#13par abdelmalek khettouf, le 24 mai 2012

pas possible d’avoir le source j’imagine :(

#14par css3create, le 29 mai 2012

@abdelmalek khettouf : Tu peux regarder dans le code source de la page. Le CSS est assez visible.

#15par CSS3 debutant , le 22 octobre 2012

Bonjour,
Merci pour mettre tes codes en libre acces. Je veux réutiliser ton menu pour mon site. Je n’ai que très peu modifié le code CSS3 afin de changer la taille et la position du menu. Tout fonctionne très très bien en utilisant Chrome... par contre avec Safari ca déconne complétement... le positionnement des icons qui défilent plante complétement... Y a t il quelque chose que j’ai manqué quelque part... car cette page elle fonctionne parfaitement sur les deux navigateurs.
Merci de ton aide car j’ai cherché partout dans ton code sans comprendre ce qui ne marchait pas... J’aimerais vraiment garder ce menu, mais si je ne trouve pas la solution je devrais en utiliser un autre...
Merci d’avance pour ton aide

#16par geek, le 14 novembre 2012

tu as essayé de mettre un display:none pour masquer les applications quand on passe du lien 1 au 3 ? peut-être que ça marche.

#17par fab, le 26 février 2013

Vraiment beau ! Et tout ça en full CSS. Impressionnant !

#18par Maxmad, le 30 mai 2013

Très impressionnant !! En Full CSS en plus ....


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

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