{"id":2332,"date":"2012-04-03T09:12:43","date_gmt":"2012-04-03T07:12:43","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2332"},"modified":"2015-06-02T20:46:59","modified_gmt":"2015-06-02T18:46:59","slug":"menu-deroulant-css3-transition-max-height","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/menu-deroulant-css3-transition-max-height","title":{"rendered":"Menu d\u00e9roulant en CSS3 avec transition et max-height"},"content":{"rendered":"

Il y a quelques temps d\u00e9j\u00e0, Lea Verou proposait<\/a> d’utiliser la propri\u00e9t\u00e9 max-height<\/code> afin d’effectuer des animations sur un \u00e9l\u00e9ment sans toucher \u00e0 la propri\u00e9t\u00e9 height<\/code>. Avec une petite adaptation, il est possible de cr\u00e9er un menu d\u00e9roulant au survol avec un petit d\u00e9lai cr\u00e9\u00e9 gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 CSS 3 transition<\/code>.<\/p>\n

D\u00e9monstration<\/a><\/p>\n

Le sujet du menu d\u00e9roulant est tr\u00e8s sensible. De par sa nature, il est bien souvent consid\u00e9r\u00e9 comme peu ergonomique, inaccessible et dans certains cas il est l’illustration d’un mauvais travail sur l’arborescence d’un site. Bref, l’article ici pr\u00e9sente une d\u00e9monstration en CSS, non une \u00e9tude approfondie des tenants et aboutissants d’un menu d\u00e9roulant.<\/p>\n

Un bout de HTML<\/h2>\n

Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonn\u00e9es.<\/p>\n

<ul id=\"menu\">\r\n\t<li><a href=\"#\">Menu 1<\/a>\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#\">Level 1.1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 1.2<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li><li><a href=\"#\">Menu 2<\/a>\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#\">Level 2.1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 2.2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 2.3<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 2.4<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li><li><a href=\"#\">Menu 3<\/a>\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#\">Level 3.1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 3.2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Level 3.3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n<\/ul><\/code><\/pre>\n
Les chevrons fermants et ouvrants des li<\/code> de premier niveau sont coll\u00e9s pour \u00e9viter le white-space<\/code>. (pour en savoir plus : Article sur display inline-block – Creative Juiz<\/a>)<\/p>\n
Place au CSS<\/h2>\n
\"\"
Le menu d\u00e9roulant termin\u00e9<\/figcaption><\/figure>\n
Je ne vais pas d\u00e9tailler ici la partie sur la cr\u00e9ation d’un menu horizontal. Je vous invite \u00e0 lire le tutoriel \u00ab\u00a0Cr\u00e9er un menu horizontal centr\u00e9<\/a>\u00a0\u00bb qui reprend une partie des explications.<\/p>\n
\/* partie positionnement et d\u00e9co *\/\r\n#menu a { \r\n\tdisplay:block; \r\n\tcolor: #fff; \r\n\ttext-decoration:none;\r\n}\r\n#menu > li,\r\n#menu > li li {\r\n\tposition: relative;\r\n\tdisplay:inline-block;\r\n\twidth: 110px;\r\n\tpadding: 6px 15px;\r\n\tbackground-color: #777;\r\n\tbackground-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);\r\n}\r\n#menu > li li { background: transparent none; }\r\n#menu > li li a { color: #444; }\r\n#menu > li li:hover { background:#eee; }\r\n#menu > li:first-child {\r\n\tborder-right: 1px solid #777;\r\n\tborder-radius: 8px 0 0 8px;\r\n}\r\n#menu > li + li {\r\n\tborder-left: 1px solid #aaa;\r\n\tborder-right: 1px solid #777;\r\n}\r\n#menu > li:last-child {\r\n\tborder-right: 0;\r\n\tborder-left: 1px solid #aaa;\r\n\tborder-radius: 0 8px 8px 0 ;\r\n}\r\n#menu > li:hover {\r\n\tbackground-color: #999;\r\n\tbackground-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);\r\n}\r\n\/* (presque) fin de la partie positionnement\/d\u00e9co *\/\r\n\/* dans cette d\u00e9claration, on fixe le max-height *\/\r\n#menu ul {\r\n\tposition: absolute;\r\n\ttop: 2em; left: 0;\r\n\tmax-height:0em;\t\r\n\tmargin: 0; padding: 0;\r\n\tbackground-color: #ddd;\r\n\tbackground-image: linear-gradient(#fff,#ddd);\r\n\toverflow: hidden;\r\n\ttransition: 1s max-height 0.3s;\r\n\tborder-radius: 0 0 8px 8px;\r\n}\r\n\/* ici on change la valeur de max-height au :hover *\/\r\n#menu > li:hover ul {\r\n\t\/* \u00e0 adapter, le minimum est le meilleur mais voyez large ;) *\/\r\n\tmax-height: 13em;\r\n}<\/code><\/pre>\n
Concentrons nous sur l’utilisation de max-height<\/code> et transition<\/code> pour effectuer notre animation.
\nLorsqu’on fixe, ligne 41, la valeur de max-height<\/code> \u00e0 0<\/code>, on lui dit clairement : ta hauteur maximale sera nulle (l’\u00e9l\u00e9ment ne sera pas visible).
\nPour que cela fonctionne, il faut coupler cette propri\u00e9t\u00e9 \u00e0 un d\u00e9bordement cach\u00e9 (ligne 45).<\/p>\n
Ligne 46, nous pr\u00e9voyons une transition sur la propri\u00e9t\u00e9 max-height<\/code> que nous allons faire varier par la suite. Cette transition se d\u00e9roulera sur 1s<\/code> et se d\u00e9clanchera 0.3s<\/code> apr\u00e8s le survol de l’\u00e9l\u00e9ment, et ce pour le confort de l’utilisateur. (\u00e7a \u00e9vite d’avoir des sous-menus qui se d\u00e9roulent d\u00e8s qu’on effleure le menu)<\/p>\n
Enfin, au survol de l’\u00e9l\u00e9ment li<\/code>, nous faisons varier la hauteur maximale du sous-menu (ligne 52).
\nEn pr\u00e9voyant large (mais pas trop), vous cr\u00e9erez un effet de d\u00e9lai avant l’animation de repliement. Ici 8em<\/code> seraient suffisant, j’en pr\u00e9voit 13.<\/p>\n
D\u00e9monstration<\/a><\/p>\n
N’h\u00e9sitez pas \u00e0 commenter si vous avez des zones floues \ud83d\ude09
\nAmusez-vous bien !<\/p>\n
\n
Sources et liens utiles<\/h2>\n