Tutoriel Vidéo HTML-CSS : Menu accordéon

lan Il y a 38 minutes Répondre

Vraiment dommage que la transition ne marche pas en mettant :
.menu li:hover ul{height:100%;}
On est obligé de mettre une hauteur en px;

bilcoyotte Il y a 11 jours Répondre

bonjour,
très bon tuto, mais je cherche ton tuto pour faire le psd
merci

Zblex Il y a 17 jours Répondre

Salut merci pour le tuto, désolé hs mais juste pour savoir comment fais tu pour l'actualisation en direct sur ton navigateur ?

Alpha13 Il y a 19 jours Répondre

Merci

Maxime Il y a 27 jours Répondre

"Et voila, donc la c'est pas très compliqué, on va juste chercher le ul ul li a li ul, normal et on lui affecte un -moz-proprietedelamortquitue"

Tu m'énerves. Vraiment.

JacobDelcroix Il y a 1 mois Répondre

Merci bien pour ce tutoriel !

mixmil Il y a 2 mois Répondre

Merci bien !

calimerau57 Il y a 2 mois Répondre

Pas mal le tuto

philouelgeek Il y a 3 mois Répondre

Super tuto comme d'habitude

vivitar Il y a 3 mois Répondre

Super tuto mais pourquoi la nav bar s'affiche lors de la transition puis disparaît lorsque ça se termine ??

philippemilink Il y a 3 mois Répondre

Pourquoi est-ce que le validateur W3C CSS ne reconnait pas les rgba(...) et les transitions ?

Hotgeart Il y a 3 mois Répondre

http://tympanus.net/Tutorials/CSS3Accordion/index.html

NaetoH Il y a 3 mois Répondre

Un bon gros tuto comme je les aimes ^^

Darkstars Il y a 3 mois Répondre

dans le même genre en menu déroulent j'ai vu passé ceci http://is.gd/w7wpcy l'ocasion de voir les choses sous un autre angle :o)

Seyte Il y a 3 mois Répondre

salut à tous, et d'abord merci pour le tuto.
Par contre, j'ai un problème, je suis bloqué au niveau de :
.menu li:hover ul{
height: 100px;
overflow-y: auto;
Je n'ai absolument aucune de mes catégories qui réapparait!
donc si jamais vous pouvez m'aider, je pense avoir repris le code complètement sans erreur, et au fur et à mesure.
Merci à vous.

Azralth Il y a 3 mois Répondre

Et avec un display: none; display: block; au hover du .menu li pour afficher tout le sous-menu sans scroll ça fonctionnerait pas mieux pour afficher tout le sous-menu ?

thqloz Il y a 3 mois Répondre

Erf je peux pas éditer les commentaires, mais pour faire disparaitre la scroll bar :

Il faut changer
.menu li:hover ul {
height: 120px;
overflow-x: hidden;
overflow-y: auto;
}

par

.menu li:hover ul {
height: 120px;
overflow-x: hidden;
overflow-y: hidden;
}

kaffeine.be Il y a 3 mois Répondre

Je viens de faire un petit test rapide pour la scrollbar,
en rajoutant !important au overflow : hidden il a l'air de la prendre en compte
.menu ul{overflow:hidden ! important}

thqloz Il y a 3 mois Répondre

à noter qu'il est possible de customiser l'easing en passant l'équation qui va bien via l'attribut cubic-bezier.

En bonus les principales équations d'easing :
//Easing
@easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530);
@easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940);
@easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190);
@easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000);
@easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220);
@easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000);
@easeInQuint : cubic-bezier(0.895, 0.030, 0.685, 0.220);
@easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000);
@easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715);
@easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000);
@easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035);
@easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000);
@easeInCirc : cubic-bezier(0.950, 0.050, 0.795, 0.035);
@easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000);
@easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045);
@easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275);
@easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955);
@easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000);
@easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000);
@easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000);
@easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950);
@easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000);
@easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860);
@easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550);

Splaze Il y a 3 mois Répondre

Impeccable! :D

Empty Il y a 3 mois Répondre

Sous Safari, j'ai une scrollbar qui apparait le temps du slide d'un des menu puis elle disparait...

ipodtouchpro44 Il y a 3 mois Répondre

Je note au passage que dans la démo aussi les <li> ne sont pas fermés

ipodtouchpro44 Il y a 3 mois Répondre

Ça me titillais de voir que tu avais oublié de fermer les <li> au niveau des sous-menus ^^'

zenkiai Il y a 3 mois Répondre

Merci pour ce tuto Creatiq, les possibilités avec CSS3 sont vraiment très vastes.

extrarox Il y a 3 mois Répondre

Merci pour ce tuto

TWIK Il y a 3 mois Répondre

Merci, Super tuto ! J'aimerai savoir comment est constituer le font ?

VengeurK Il y a 3 mois Répondre

@Quentin: Je crois que si on ajoute scroll: none; ça peut changer ça

fantoche Il y a 3 mois Répondre

Super, comme Quentin8, dommage !!!

omar berrayti Il y a 3 mois Répondre

Merci bcp

Quentin8 Il y a 3 mois Répondre

Bien ! Merci !
Le seul point négatif que j'ai vu sur la démonstration c'est peut être la barre de scrool qui s'affiche pendant "l'ouverture" de l'onglet. Sinon t'es bon tuto et surtout très bon résultat !

VengeurK Il y a 3 mois Répondre

Merci beaucoup! Ca va énormément m'aider