{"id":4857,"date":"2015-11-01T02:59:32","date_gmt":"2015-11-01T02:59:32","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=4857"},"modified":"2015-11-01T02:59:32","modified_gmt":"2015-11-01T02:59:32","slug":"wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css\/","title":{"rendered":"[WordPress] T\u1ea1o thanh menu nhi\u1ec1u m\u00e0u s\u1eafc b\u1eb1ng CSS"},"content":{"rendered":"<p>M\u00e0u s\u1eafc l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t giao di\u1ec7n \u0111\u1eb9p, thu h\u00fat ng\u01b0\u1eddi xem. C\u00f3 bao gi\u1edd b\u1ea1n nh\u00ecn th\u1ea5y m\u1ed9t menu m\u00e0 m\u1ed7i m\u1ee5c c\u1ee7a n\u00f3 l\u00e0 m\u1ed9t m\u00e0u kh\u00e1c nhau ch\u01b0a? L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111\u01b0\u1ee3c m\u1ed9t menu nh\u01b0 v\u1eady? B\u00e0i vi\u1ebft h\u00f4m nay m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n t\u1ea1o ra m\u1ed9t menu nhi\u1ec1u m\u00e0u s\u1eafc h\u1ebft s\u1ee9c \u0111\u01a1n gi\u1ea3n.<!--more--><\/p>\n<p>\u0110\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y, ch\u00fang ta s\u1ebd th\u1ef1c hi\u1ec7n theo c\u00e1c b\u01b0\u1edbc sau:<\/p>\n<p>Th\u00eam l\u1edbp CSS cho m\u1ed7i menu<\/p>\n<p>Ch\u00fang ta s\u1ebd l\u00e0m vi\u1ec7c n\u00e0y b\u1eb1ng c\u00e1ch v\u00e0o Appearance -> Menus, click v\u00e0o Screen Options \u1edf g\u00f3c tr\u00ean b\u00ean ph\u1ea3i.<\/p>\n<p>Trong h\u1ed9p hi\u1ec7n ra, b\u1ea1n \u0111\u00e1nh d\u1ea5u tick v\u00e0o m\u1ee5c CSS Classes.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/luuduchieu.com\/upload\/repository\/tapchi\/2015\/wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css\/wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css-01.png\" alt=\"T\u1ea1o thanh menu nhi\u1ec1u m\u00e0u s\u1eafc b\u1eb1ng CSS\" \/><\/p>\n<p>Ti\u1ebfp theo, \u1edf m\u1ed7i menu m\u00e0 b\u1ea1n t\u1ea1o, b\u1ea1n s\u1ebd th\u1ea5y c\u00f3 th\u00eam m\u1ed9t m\u1ee5c l\u00e0 CSS Classes, b\u1ea1n \u0111i\u1ec1n t\u00ean l\u1edbp CSS v\u00e0o \u0111\u00f3 v\u00e0 l\u01b0u l\u1ea1i.<\/p>\n<p>Ch\u00fa \u00fd \u1edf m\u1ed7i menu b\u1ea1n ch\u1ecdn m\u1ed9t t\u00ean l\u1edbp CSS kh\u00e1c nhau \u0111\u1ec3 c\u00f3 th\u1ec3 t\u1ea1o m\u00e0u s\u1eafc kh\u00e1c nhau.<\/p>\n<p>Th\u00eam CSS code cho m\u1ed7i menu<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/luuduchieu.com\/upload\/repository\/tapchi\/2015\/wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css\/wordpress-tao-thanh-menu-nhieu-mau-sac-bang-css-02.png\" alt=\"T\u1ea1o thanh menu nhi\u1ec1u m\u00e0u s\u1eafc b\u1eb1ng CSS\" \/><\/p>\n<p>Vi\u1ec7c n\u00e0y kh\u00e1 \u0111\u01a1n gi\u1ea3n \u0111\u1ed1i v\u1edbi c\u00e1c b\u1ea1n bi\u1ebft v\u1ec1 CSS. Ta s\u1ebd th\u00eam c\u00e1c l\u1edbp \u0111\u00e3 t\u1ea1o \u1edf b\u01b0\u1edbc tr\u00ean v\u00e0o file style.css. \u1ede \u0111\u00e2y l\u1edbp m\u00ecnh t\u1ea1o c\u00f3 t\u00ean l\u00e0 home-nav nh\u01b0 b\u1ea1n th\u1ea5y \u1edf tr\u00ean.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\r\n.home-nav {\r\n    background: #fff !important;\r\n    color: #000;\r\n}\r\n.home-nav a:hover {\r\n    background: #e3e3e3 !important;\r\n}\r\n\r\n<\/pre>\n<p>Hai l\u1edbp CSS n\u00e0y s\u1ebd gi\u00fap thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a m\u1ee5c \u201cTrang Ch\u1ee7\u201d v\u00e0 m\u00e0u n\u1ec1n khi r\u00ea chu\u1ed9t l\u00ean menu n\u00e0y. C\u00e1c b\u1ea1n ch\u00fa \u00fd ta c\u00f3 th\u1ec3 th\u00eam thu\u1ed9c t\u00ednh !important \u1edf ph\u00eda sau \u0111\u1ec3 t\u1ea1o \u0111\u1ed9 m\u1ea1nh cho m\u00e0u s\u1eafc b\u1ea1n ch\u1ecdn, ph\u1ee7 \u0111\u1ecbnh c\u00e1c thu\u1ed9c t\u00ednh \u0111\u00e3 c\u00f3 s\u1eb5n.<\/p>\n<p>C\u1ee9 nh\u01b0 v\u1eady v\u1edbi m\u1ed7i menu b\u1ea1n t\u1ea1o m\u1ed9t l\u1edbp CSS kh\u00e1c nhau v\u00e0 ch\u1ecdn m\u1ed9t m\u00e0u n\u1ec1n kh\u00e1c nhau, v\u1eady l\u00e0 b\u1ea1n \u0111\u00e3 c\u00f3 \u0111\u01b0\u1ee3c m\u1ed9t menu v\u1edbi nhi\u1ec1u m\u00e0u s\u1eafc \u0111\u1eb9p m\u1eaft. Ch\u00fac b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u00e0u s\u1eafc l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t giao di\u1ec7n \u0111\u1eb9p, thu h\u00fat ng\u01b0\u1eddi xem. C\u00f3 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[143],"tags":[],"class_list":["post-4857","post","type-post","status-publish","format-standard","hentry","category-thu-thuat-wordpress"],"views":481,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4857","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=4857"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4857\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=4857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=4857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=4857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}