TẠO MENU NGANG TRONG WORDPRESS

      111

Bài viết sau đây, thietkewebhcm.com.vn sẽ hướng dẫn chúng ta cách tạo menu ngang trong wordpress cực đối kháng giản cho chính mình tham khảo. Hãy cùng theo dõi nhé


*

Cách tạo menu ngang trong wordpress


Bước 1: Đầu tiên bạn phải Backup CSS 

Bước 2: Thêm đoạn code sau vào Custom Css và styles.css trong Thesis 2

/**************

**********/ ul.fmt_dropdown, ul.fmt_dropdown li, ul.fmt_dropdown ul  list-style: none; margin: 0; padding: 0;  ul.fmt_dropdown  position: relative; z-index: 597; float: left;  ul.fmt_dropdown li  float: left; line-height: 1.3em; vertical-align: middle; zoom: 1;  ul.fmt_dropdown li.hover, ul.fmt_dropdown li:hover  position: relative; z-index: 599; cursor: default;  ul.fmt_dropdown ul  visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;  ul.fmt_dropdown ul li  float: none;  ul.fmt_dropdown ul ul  top: 1px; left: 99%;  ul.fmt_dropdown li:hover > ul  visibility: visible;  ul.fmt_dropdown-linear  width: 100%;  ul.fmt_dropdown-linear ul li  float: left;  ul.fmt_dropdown-linear li.hover, ul.fmt_dropdown-linear li:hover  position: static;  ul.fmt_dropdown-linear ul ul  display: none !important;  ul.fmt_dropdown  font-weight: bold;  ul.fmt_dropdown li  padding: 12px 10px; border-left: 1px solid #7E6500; color: #FFF; border-right: 1px solid #E2B80E; text-transform: uppercase;  ul.fmt_dropdown li:last-child border-right:none; ul.fmt_dropdown li.hover, ul.fmt_dropdown li:hover  color: #000;  ul.fmt_dropdown a color:#fff;background:none;border:0 ul.fmt_dropdown a:visited color: #fff; text-decoration: none;  ul.fmt_dropdown a:hover color: #eee;  ul.fmt_dropdown a:active color: #eee;  /* -- level mark -- */ ul.fmt_dropdown ul  width: 150px; margin-top: 1px;  ul.fmt_dropdown ul li  font-weight: normal;  ul.fmt_dropdown *.sub-menu  padding-right: 20px; background-position: 100% 50%; background-repeat: no-repeat;  ul.fmt_dropdown  width: 1000px; margin: 0 auto; float: none; display: block;  ul.fmt_dropdown li  background:none;  , ul.fmt_dropdown li:hover  color: #fff;  ul.fmt_dropdown ul  max-width: 980px; margin-top: 40px; background: #EBD852; /*Background menu con*/ height: 42px; /* Chieu cao menu nhỏ */ left:0; width: auto; padding-left:0px; text-transform: uppercase;  ul.fmt_dropdown li ul li apadding:8px 15px; /**Chú ý Chú ý**/ li.menu-item-15 ul.sub-menupadding-left:250px;width:730px /* tong cong 980px */ li.menu-item-80 ul.sub-menupadding-left:425px;width:555px/* tong cong 980px */ ul.fmt_dropdown li ul li a, ul.fmt_dropdown li ul li a:visited color:#000 ul.fmt_dropdown ul li a line-height:15px ul.fmt_dropdown ul li a:hover  margin: 0; border: none; color:#BF8D00; background:none;  ul.fmt_dropdown ul *.sub-menu  padding-right: 7px; background-image: none;  ul.sub-menu li background:none;border:0 /*-----*/Bước 3

Trong trường hợp với theme thông thường, bạn phải thêm đoạn code sau vào functions.php:

Còn đối với Thesis bạn truy cập vào Editor HTML, tìm box thực đơn box đồng thời phân phối class fmt_dropdown fmt_dropdown-linear

Bước 4: sửa đổi màu sắc, độ cao cho cân xứng với menu của bạn. 

Trên đây, thietkewebhcm.com.vn đã cung cấp cho bạn cách tạo thực đơn ngang vào wordpress.

Xem thêm: Tạo Tài Khoản Teamobi Miễn Phí 2021 ❤️️ Tặng Acc Free, Tài Khoản Avatar Miễn Phí 2021 ❤️️ Tặng Acc Free

Hy vọng, những tin tức mà thietkewebhcm.com.vn cung cấp hữu ích với bạn. Ví như còn bất cứ điều gì băn khoăn, hãy mang lại thietkewebhcm.com.vn biết trải qua phần bình luận bên dưới. Hay xuyên truy cập website thietkewebhcm.com.vn để update thêm nhiều nội dung bài viết hữu ích khác nhé!

hotlive