Mình vừa thiết kế xong cho blog của mình một thanh Top Navigation Menu như các bạn có thể thấy (thanh menu ở trên cùng). Lý do mình tạo thêm thanh menu này vì mình muốn đưa thêm nhiều page ra ngoài trong khi Primary Navigation Menu thì lại quá ngắn. Thông thường một Genesis Childtheme có hai thanh menu là Primary Navigation và Secondary Navigation. Một số themes đặt Secondary Navigation Menu ở bên trên nhưng một số themes lại đặt ở bên dưới của Primary Navigation Menu. Bây giờ mình sẽ hướng dẫn các bạn đưa thanh Secondary Navigation Menu lên trên để thành Top Navigation Menu hoặc tạo ra thêm một thanh Top Navigation Menu hoàn toàn mới.

Sử dụng Secondary Navigation Menu

Cách đơn giản nhất để tạo Top Navigation Menu là sử dụng Secondary Navigation Menu. Nếu thanh Secondary Navigation nằm ở bên dưới, chúng ta sẽ chuyển nó lên trên top bằng cách thêm code sau vào file funstion.php trong childtheme:

Tạo thêm thanh menu mới

Trong trường hợp bạn vừa muốn sử dụng thanh Secondary Navigation Menu, vừa muốn có một thanh menu trên top. Khi đó chúng ta sẽ tạo thêm một thanh menu thứ ba. Để làm việc này, trước tiên chúng ta phải khai báo thêm một thanh menu mà mình đặt là Top Navigation Menu bằng cách sử dụng code:

Sau khi chèn code này vào file funstion.php, bạn vào Appearance -> Menus bạn sẽ thấy có thêm một thanh menu nữa có tên là Top Navigation Menu.

top navi

Tiếp theo chúng ta sẽ thêm nội dung cho menu này bằng cách dùng code:

Bây giờ bạn đã có được một thanh menu thứ ba, bạn có thể thêm các đối tượng cho thanh menu này giống như đối với Primary Navigation Menu và Secondary Navigation Menu.

Công việc cuối cùng là đưa Top Navigation Menu ra ngoài. Ta tiếp tục sử dụng code:

Còn một việc nữa là chúng ta sẽ design thanh Top Navigation Menu sao cho phù hợp với giao diện của blog. Để làm việc này chúng ta sẽ thêm một số lớp css sau vào file style.css:

Đây là code mình sử dụng, các bạn có thể thiết kế lại cho phù hợp với blog của mình.

Như vậy là bạn đã có được một thanh Top Navigation Menu hoàn chỉnh. Trong quá trình thực hiện nếu có vấn đề thắc mắc bạn hãy để lại comment bên dưới. Chúc bạn thành công! {c1}

Leave a Reply

Your email address will not be published. Required fields are marked *

Đăng ký nhận tin khuyến mãi

Đăng ký nhận tin khuyến mãi

Không bỏ lở những khuyến mãi Hosting - Domain - WordPress Themes - WordPress Plugins hấp dẫn nhất!

 

Bạn đã đăng ký thành công!