Blog iamvdo.meNavigation slide CSS3 avec :target et transitions
Utilisation de :target pour créer une navigation design
Création: janvier 2011Modifié:
Contenu
Full CSS Pas de JavaScript Pas d’imagesNavigateurs
Firefox Safari Chrome Opera Internet ExplorerDémo 100% CSS. Aucune images, aucun script. Gestion des clics avec :target, ajout d’ombres et d’effet de lumières avec ::after et ::before. Transitions CSS3 sur dégradés (fausse transition) et sur déplacement de textes.
#1par Benjamin, le 16 février 2011
Très belle réalisation ! Bravo
#2par Ben, le 4 avril 2011
Wow c’est vraiment chouette ! Dommage que vous n’ayez pas posté le code comme dans d’autres exemples.
#3par sacri, le 8 avril 2011
Super le site, mais dommage toujours pas les codes pour ce menu :s j’ai essayé de le refaire impossible ça foire...
#4par css3create, le 8 avril 2011
Salut !
A quel moment est ce que ca foire ? Tu peux regarder le code CSS de la page (dans le head) pour t’aider, ou pose tes questions ici...
#5par sacri, le 8 avril 2011
Salut ^^
Ben malgré la copie du code, la partie texte qui est normalement caché ici, ne l’ai pas sur la version que j’ai faite... Et pour dire vrai je ne comprend pas trop bien les codes là, il y en a tellement que je ne sais ou mettre les yeux lool.
#6par css3create, le 8 avril 2011
Le principe pour les textes est exactement le même que pour le reste. A savoir, lors du :target, le margin-left de chaque boite est modifié : regarde dans le code a partir du commentaire /*:target*/
Regarde ensuite à la fin du code CSS les styles appliqués aux blocs de textes (.... #textes)
#7par sacri, le 15 avril 2011
Salut, j’ai regardé ce que tu m’as dis et ça change rien j’arrive pas a caché le texte qui est à droite, je sais pas comment tu as fait... :s
#8par lorenzo, le 18 mai 2011
bonjour
ton boulot est vraiment très impressionnant
comme dit plus haut j’ai essayer de copier le code source mais le résultat est bien loin du tiens
sous firefox 4.0.1 il y a bien transition de couleur mais les différents textes ne changent pas, ils apparaissent les un en dessous des autres
j’ai enlevé le "=" apres div id="wrap3" mais du coup au chargement il va sur la 4eme page
je twitte ton modele a+
#9par css3create, le 18 mai 2011
@lorenzo : J’ai testé mon code à nouveau et il n’y aucun soucis chez moi ! Vérifie que tu as bien pris tout le code HTML+CSS.
Sinon, juste comme ça, essaie de voir la taille de la div id="textes", car si les textes apparaissent les uns en dessous des autres, c’est surement qu’ils n’ont pas la place d’être côte à côte...
#10par Simon, le 5 juillet 2011
Salut ! Ce que tu fais est vraiment très impressionnant et magnifique par la même occasion !
Mais en tentant de le refaire, je me retrouve avec le même problème que sacri !
La partie normalement cachée ne l’est plus. Mais je pense en avoir trouver la raison, en voulant l’intégrer a mon projet de site, l’image c’est mise en haut de l’écran, et non dans le cadre blanc ou il devrai se trouvé, lui bien situé a sa place comme il le faut, a la suite de mon texte.
Mais n’étant qu’un débutant dans ces domaines, je ne sait pas quoi modifier afin de le faire revenir a sa place, et je ne vois pas non plus ou et quoi changer pour en modifier la taille.
Et continu a faire de nouvelles demos ; elles sont super !
#11par css3create, le 5 juillet 2011
@simon : As tu un exemple de code en ligne pour que je puisse t’aider ?
PS : Merci pour les encouragements !
#12par Simon, le 5 juillet 2011
Je na sais pas quelle ligne te donner :/
A quel ligne pensais tu ?
#13par css3create, le 5 juillet 2011
@simon : je voulais dire ’en ligne sur internet’, que je puisse t’aider à débugger ! ;)
#14par Simon, le 5 juillet 2011
Ha ^^
Et bien non je ne sais pas..
Mais j’ai un design qui n’a pas été créé par moi, peut être que sa pourrait t’aider.
Le voila
http://www.creer-son-website.fr/gen...
Je l’ai évidemment modifier comme retirer un des menus vertical, modifier le placement du logo etc..
Mais lorsque je tente d’intégrer ta démo, le carré blanc qui est son reflet se trouve a la suite du texte, et la démo en elle même tout au dessus, mais toujours aligné.
Mais comme j’ai dis, je ne suis qu’un débutant... Je ne connais que ce qui se trouve dans le tuto de Matteo 21 sur le site dus zéro concernant le HTML/CSS.
ps : si tu télécharge le design, tu verras toute la structure, et a sa je n’y ai pas toucher. (Mais je ne voudrais pas non plus abuser de ton temps ;) )
#15par Simon, le 5 juillet 2011
Le design mit dans le lien change.. :/
Mais la structure reste en gros la même.
#16par Simon, le 5 juillet 2011
essai de taper celui-ci si tu veux :
h**p ://www.creer-son-website.fr/cha...
#17par Simon, le 5 juillet 2011
Voila le dernier marche, c’est en gros mon design.
Je m’excuse pour cette multitudes de commentaires, j’espère qu’ils ne sont pas inutiles..
#18par css3create, le 7 juillet 2011
@simon : Je ne peut pas trop t’aider si je ne vois pas le code CSS utilisé pour reproduire la démo. Essaie vraiment de mettre ta démo en ligne que je puisse voir ça.
#19par Manlis, le 25 juillet 2011
Superbe travail , toujours un plaisir à voir.
#20par med youss, le 8 octobre 2011
C’est vraiment magnifique, Bravo !
#21par Christophe, le 17 octobre 2011
Excellent mais j’ai un soucis avec les ancres html : lorsque j’intègre ce module dans ma page, si les boutons"1","2","3" et "4" ne sont pas en haut de page, quand je clique sur un des boutons, la page scroll automatiquement sur les ancres et c’est plutôt gênant. Peut-on bloquer le défilement de page provoqué au clic des lien comportant les ancres ? C’est le seul soucis. Merci ^_^.
#22par asn, le 4 décembre 2011
Salut, j’ai un petit soucis je suis novice en programmation là et je commence à me créer un petit design. Je voudrais créer un slider d’images, et en fait avoir un bandeau (qui contient une image )sous lequel on aurait 4 boutons. Quand on click sur l’un des boutons, on anim le bandeau pour changer d’image (translation ou fading par exemple)
p’tite astuce rapide ?
lahssen.khouader@estaca.eu
#23par css3create, le 7 décembre 2011
@asn : oula... Le mieux est peut-être d’avoir des avis sur des forums adaptés comme sur alsacreations. Et de réaliser des tutoriels sur internet avant de se lancer dans quelque chose de complexe...
#24par KrustyDaClown, le 27 janvier 2012
Pour toutes les personnes ayant le problème des textes affichés côte à côte, il suffit d’aller dans la div "article27 demowrap" et modifier comme suivant :
position:absolute;top:-400px;
width:580px;
height:800px;
border:solid;
overflow:hidden;
Encore un grand merci à toi Vincent pour ces oeuvres d’art :D
#25par grizzly, le 21 février 2012
C ’est magnifique , je suis incapable de le refaire sans le code si quelqu’un peut le poster ça serai simpa ;)
#26par ju, le 19 mars 2012
salut, ou est le code css svp..?
super site sinon
#27par ju, le 19 mars 2012
bon ben j’ai pioché dans le code source, ce menu est super mais je capte pas trop comment faire le corp qui change en fonction du menu etc
#28par Anonyme, le 2 mai 2012
Wah ! Un super effet, clean, splendide, qui en met plein la vu, comme tout sur ce site, en general ;)
#29par Thor Gogolin, le 2 mai 2012
Salut css3create !
Un p’tit mot pour te remercier de ce bout de code génial, c’est pile ce que je recherchais pour faire ma navigation :)))
J’ai laissé ton nom/url dans l’entête de ma css (nav.css) dédiée à la navigation !! (bon, pour le moment, c’est encore le bordel, mais le site n’est pas finalisé)
A voir ici : http://bit.ly/JOkXUD (n’est visible que pour les def de 1024 et +)
Encore merci (je met ton site en favoris)
#30par Cyrille, le 16 mai 2012
Félicitations pour ce joli code.
changer les slides
changer le background DU MENU.
Je l’ai décortiqué comme je pouvais et j’ai réussi à séparer le "menu" du "slider". Mais je n’arrive pas à combiner les deux actions suivantes quand je clique sur les boutons :
Sais tu si on peux combiner deux "target" différentes ?
#31par Cyrille, le 16 mai 2012
Car en fait, il y a 3 actions pendant le click :
fondu du background
défilement du "textes" (margin-left)
déplacement de la "flèche" (margin-left)
Sachant que j’ai 2 conteneurs (un pour le menu et un pour le texte), je voudrais faire deux actions dans l’un (fondu+flèche dans mon menu) et une action dans l’autre (défilement du texte dans mon slider).
#32par Cyrille, le 17 mai 2012
Je ne trouve rien sur le net ... :-(
#33par Dilkia, le 12 juin 2012
Pour cacher le texte a droite : faut enlever le width pour #texte
#34par davevkb, le 8 juillet 2012
Super beau !!
Mais où peut-on récupérer le code svp !!
#35par lobodol, le 14 juillet 2012
Super c’est exactement ce que je cherchais, mais même après avoir décortiqué le code, j’ai du mal à comprendre comment ça fonctionne... un petit tuto :D ?
#36par miyu., le 10 septembre 2012
J’aimerai savoir s’il est possible d’avoir le code, car il me semble qu’il n’est point affiché.
#37par Osmancorp, le 23 septembre 2012
Super pour cette exemple et Merci à l’auteur
#38par mcoule@gmail.com, le 7 février 2013
Salut
Félicitation pour ce super DEMO
Cependant je souhaiterai connaitre comment modifier le width et le height des boutons wrap #1 ; #2...
Merci
#39par hamel-dan, le 24 février 2013
salut,
Tout d’abord merci pour ce jolie menu !
Pour ceux qui ont du mal à trouver le code !
Avec Mozilla :
Clic droit sur la page "Code source de la page"
Pour le CSS sélectionnez de la ligne
99 à 372 inclus
Pour la PHP HTML sélectionnez de la ligne
1249 à 1275 inclus
Pour rogner le scroll horizontal
Ajouter un "overflow:hidden ; "
à
#article27 #demoWrap
et diminuer width:2340px ; a
width:585px ;
#40par hamel-dan, le 24 février 2013
salut,
Tout d’abord merci pour ce jolie menu !
Pour ceux qui ont du mal à trouver le code !
Avec Mozilla :
Clic droit sur la page "Code source de la page"
Pour le CSS sélectionnez de la ligne
99 à 372 inclus
Pour la PHP HTML sélectionnez de la ligne
1249 à 1275 inclus
Pour rogner le scroll horizontal
Ajouter un "overflow:hidden ; "
à
#article27 #demoWrap
et diminuer width:2340px ; a
width:585px ;
#41par Ananka, le 9 mars 2013
Pas mal du tout, et très interessant !
J’essaye par moi même de le reproduire, mais je ne vois pas comment se fait la liaison entre le click et toute les modifications visuelles, car le :target s’applique uniquement à l’ancre, et non à la div fleche, la transition de texte, de couleur etc... je me trompe ?
#42par Dr.BiT, le 11 mai 2013
Bonjour, superbe code.
Comment faire pour définir (par exemple) que l’item #3 soit celui sélectionné par default quand la page apparait ?
#43par habanas, le 20 mai 2013
Bonjour
j’admire régulièrement le travail effectuer sur ce site, développant surtout du bas niveau ( c ,c++ ) je manque de recul et de technique quand a la mise en place d’un design lors de la création d’un site .
j’aimerais reproduire le comportement de cette exemple mais je ne trouve pas le code ,si quelqu’un pouvais m’aider ?
merci
#44par Sam, le 21 juillet 2013
Habanas : il suffit de regarder les précédents commentaires ;) Notamment le #39, celui de hamel-dan.
Personnellement, j’ai le même problème que certains : l’animation s’effectue, mais la page scroll vers le bas lorsque je clique sur l’ancre… Je vais continuer à chercher dans le code source, doit bien y avoir un moyen…
#45par Sam, le 21 juillet 2013
Alors ce site, css3create, ben il rocks. Une petite recherche sur le net, et je retombe dessus pour nous indiquer comment procéder pour empêcher le scroll d’un :target ! :)
http://www.css3create.com/Astuce-Em...
#46par Suare, le 11 août 2013
Bonjour,
Elle est merveilleuse cette démo, je vous en remercie !
Malheureusement, ça marche pas sur IE9... (en tout cas, pas chez moi).
#47par Alex Ewanga, le 15 janvier 2014
Ceci est vraiment un des meilleurs tuto qui puisse exister !!! CSS3 CREATE m’a épater et je l’avoue !!!
#48par Torak, le 9 février 2014
Super script ! je cherchais un petit slide sans Jquery pour mon forum, voilà qui est fait ! merci ! Le code est super facile a trouver et ça marche du 1er coups :)
Je découvre le site, je crois bien que je vais le mettre en favoris !