Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb \u0111\u1ebfn c\u00e1c b\u1ea1n m\u1ed9t Drop Menu. Ch\u00fang ti\u1ebft ki\u1ec7m kh\u00f4ng gian cho c\u00e1c menu c\u00f3 nhi\u1ec1u n\u1ed9i dung.<\/p>\n\n\n\n\n\n\n\n
C\u1ea5u tr\u00fac c\u1ee7a menu nh\u01b0 sau:<\/p>\n\n\n
\n<div id="dl-menu" class="dl-menuwrapper">\n <button class="dl-trigger">Open Menu<\/button>\n <ul class="dl-menu">\n <li><a href="#">Item 1<\/a>\n <ul class="dl-submenu">\n <li><a href="#">Sub-Item 1<\/a><\/li>\n <li><a href="#">Sub-Item 2<\/a><\/li>\n <li><a href="#">Sub-Item 3<\/a><\/li>\n <li><a href="#">Sub-Item 4<\/a>\n <ul class="dl-submenu">\n <li><a href="#">Sub-Sub-Item 1<\/a><\/li>\n <li><a href="#">Sub-Sub-Item 2<\/a><\/li>\n <li><a href="#">Sub-Sub-Item 3<\/a><\/li>\n <\/ul>\n <\/li>\n <li><!-- ... --><\/li>\n <\/ul>\n <\/li>\n <li><!-- ... --><\/li>\n <li><!-- ... --><\/li>\n <!-- ... -->\n <\/ul>\n<\/div>\n<!-- \/dl-menuwrapper -->\n<\/pre><\/div>\n\n\nC\u1ea5u h\u00ecnh CSS l\u00e0m chuy\u1ec3n \u0111\u1ed9ng nh\u01b0 sau:<\/p>\n\n\n
\n.dl-menu.dl-animate-out-1 {\n\tanimation: MenuAnimOut1 0.4s linear forwards;\n}\n\n@keyframes MenuAnimOut1 {\n\t50% {\n\t\ttransform: translateZ(-250px) rotateY(30deg);\n\t}\n\t75% {\n\t\ttransform: translateZ(-372.5px) rotateY(15deg);\n\t\topacity: .5;\n\t}\n\t100% {\n\t\ttransform: translateZ(-500px) rotateY(0deg);\n\t\topacity: 0;\n\t}\n}\n\n.dl-menu.dl-animate-in-1 {\n\tanimation: MenuAnimIn1 0.3s linear forwards;\n}\n\n@keyframes MenuAnimIn1 {\n\t0% {\n\t\ttransform: translateZ(-500px) rotateY(0deg);\n\t\topacity: 0;\n\t}\n\t20% {\n\t\ttransform: translateZ(-250px) rotateY(30deg);\n\t\topacity: 0.5;\n\t}\n\t100% {\n\t\ttransform: translateZ(0px) rotateY(0deg);\n\t\topacity: 1;\n\t}\n}\n<\/pre><\/div>\n\n\nTh\u00eam plugin jQuery v\u00e0 g\u1ecdi th\u1ef1c hi\u1ec7n:<\/p>\n\n\n
\n$( '#dl-menu' ).dlmenu({\n animationClasses : { \n classin : 'animation-class-name',\n classout : 'animation-class-name'\n }\n});\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb \u0111\u1ebfn c\u00e1c b\u1ea1n m\u1ed9t Drop Menu. Ch\u00fang ti\u1ebft ki\u1ec7m kh\u00f4ng […]<\/p>\n","protected":false},"author":6,"featured_media":7001,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-5308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-thu-thuat-jquery"],"views":421,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=5308"}],"version-history":[{"count":19,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5308\/revisions"}],"predecessor-version":[{"id":8551,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5308\/revisions\/8551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/7001"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=5308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=5308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=5308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}