{"id":3987,"date":"2014-04-12T20:35:40","date_gmt":"2014-04-12T18:35:40","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3987"},"modified":"2014-04-13T01:02:03","modified_gmt":"2014-04-12T23:02:03","slug":"effet-animation-transition-css3-menu-vertical","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-animation-transition-css3-menu-vertical","title":{"rendered":"Effet d’animation CSS3 sur menu vertical"},"content":{"rendered":"

On m’a demand\u00e9 une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre lat\u00e9rale de ce blog (si le design actuel est toujours le m\u00eame d’ici \u00e0 ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous expliquer le principe !<\/p>\n

<\/p>\n

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

La base HTML du menu<\/h2>\n

\u00c0 quelques variations pr\u00e8s, votre menu va certainement ressembler \u00e0 cela au niveau du code HTML :<\/p>\n

<ul class=\"menu-vertical\">\n    <li class=\"mv-item\"><a href=\"#\">Lorem ipsum<\/a><\/li>\n    <li class=\"mv-item\"><a href=\"#\">Dolor Sit<\/a><\/li>\n    <li class=\"mv-item\"><a href=\"#\">Amet consectetur<\/a><\/li>\n    <li class=\"mv-item\"><a href=\"#\">Adipiscing elit<\/a><\/li>\n<\/ul><\/code><\/pre>\n
Il s’agit d’une b\u00eate liste de liens. \u00c0 vous de voir s’il convient de la placer en plus dans un \u00e9l\u00e9ment HTML5 nav<\/code> ou pas.
\nLes classes sont \u00e0 adapter selon votre projet et votre nomenclature, bien entendu.<\/p>\n
Un exemple de CSS<\/h2>\n
Il va donc falloir supprimer les styles de base d’une liste, et animer les changements de propri\u00e9t\u00e9 gr\u00e2ce \u00e0 transition<\/code>.
\nJe mets des commentaires dans le code pour vous faciliter sa compr\u00e9hension.<\/p>\n
\/* style du bloc ul *\/\n.menu-vertical {\n  width: 250px; \/* optionnel, c'est pour la d\u00e9mo *\/\n  list-style: none; \/* supprime les puces de liste *\/\n  padding: 4px; \/* on fait un peu de place autour des liens *\/\n  margin: 0; \/* on annule les marges *\/\n  background: #F2F2F2;\n}\n \n\/* styles des liens et \u00e9l\u00e9ments de liste *\/\n.mv-item,\n.mv-item a {\n  \/* les liens et item deviennent des blocs *\/\n  \/* suffit th\u00e9oriquement \u00e0 virer les puces de liste *\/\n  display: block;\n}\n \n\/* styles des liens *\/\n.mv-item a {\n  margin: 1px 0; \/* espace les liens d'1 px *\/\n  padding: 8px 20px; \/* marges internes pour a\u00e9rer *\/ \n  color: #666;\n  background: #FFF;\n  text-decoration: none; \/* on vire le soulignement *\/\n\n  \/* on d\u00e9finit la transition pour les navigateurs *\/\n  -webkit-transition: all .3s; \/* Chrome\/Safari *\/\n  -moz-transition: all .3s; \/* Firefox (plus trop n\u00e9cessaire) *\/\n  transition: all .3s; \/* syntaxe officielle *\/\n}\n \n\/* styles changeants au survol et focus *\/\n.mv-item a:hover,\n.mv-item a:focus {\n  background: #1ABC9C;\n  color: #FFF;\n  padding-left: 30px; \/* d\u00e9calage du contenu de 10px vers la droite (30-20 = 10) *\/\n}<\/code><\/pre>\n
Grosso-modo le code force une largeur globale du menu, mais votre conteneur fera peut-\u00eatre d\u00e9j\u00e0 le travail, vous pouvez donc supprimer cette ligne width: 250px;<\/code> si vous placez le menu dans une barre lat\u00e9rale dimensionn\u00e9e.<\/p>\n
D\u00e9monstration<\/a><\/p>\n
Notez bien que les liens n’ont pas de largeur d\u00e9finie, du coup la marge int\u00e9rieure changeante ne provoque pas de redimensionnement complet de l’\u00e9l\u00e9ment. Si jamais vous avez donn\u00e9 un width<\/code> \u00e0 vos liens, il faudra peut-\u00eatre envisager d’utiliser le code suivant sur vos liens :<\/p>\n
\/* changement du type de bo\u00eete *\/\n.mv-item a {\n  -webkit-box-sizing: padding-box;\n  -moz-box-sizing: padding-box;\n  box-sizing: padding-box;\n}<\/code><\/pre>\n
La valeur border-box<\/code> peut-\u00eatre envisag\u00e9e si vous utilisez en plus une bordure sur vos liens.<\/p>\n
Amusez-vous bien !<\/p>\n","protected":false},"excerpt":{"rendered":"
On m’a demand\u00e9 une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre lat\u00e9rale de ce blog (si le design actuel est toujours le m\u00eame d’ici \u00e0 ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous […]<\/p>\n","protected":false},"author":4,"featured_media":3990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9],"tags":[120,428,468,157],"coauthors":[],"class_list":["post-3987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","tag-animation","tag-css3","tag-interface","tag-menu"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3987"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3987\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3990"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3987"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}