Hướng dẫn tạo menu slide panel menu bằng bootstrap

Hướng dẫn tạo menu slide panel menu bằng bootstrap

Khi thiết kế website với wordpress bạn sẽ gặp phải một số yêu cầu từ khách hàng phải responsive menu trên thiết bị di động hiển thị menu giống như facebook tự động điều đó sử dụng js thật khống đơn giản chút nào. Sau đây Sơn Web sẽ hướng dẫn bạn cách tạo ra menu như vậy bằng js của boostrap chỉ việc custom đi một chút là ok.

hướng dẫn tạo menu slide panel trên worddpress

Các bước tạo menu trên mobile với slide panel menu bằng boostrap trên wordpress

Bước 1: Add js và css của menu boostrap vào website 

Bạn mở file functions.php và thêm dòng code sau để add js vào

Bước 2 : Tạo menu hiển thị trong theme wordpress của bạn

Để sử dụng menu trong wordpress bạn chèn code sau vào vị trí muốn hiền thị menu

ở đây bones_main_nav là một hàm mình dùng để hiển thị menu , hàm đó được viết như sau :

Về cách dùng hàm wp_nav_menu thế nào bạn có thể tham khảo tại wordpress.org.Ở đây bạn để ý tới button navbar-toggle khi click sẽ custom nó với menu mặc định của boostrap khác đi.Bạn để ý khi truy cập menu trên mobile thì menu sẽ được đẩy từ bên trái qua , chính vì vậy bạn cần bắt sư kiện click ở button navbar-toggle trên với js như sau:

Ý nghĩa của hàm js này là khi click button trên sẽ add thêm class in vào #mainContainer dưới menu , để đẩy menu hiển thị từ trái qua.Và khi màn hình hiển thị lớn hơn 768 sẽ remove class in đi.
Sau đó bạn chỉ cần css lại cho class in và menu lại là được đây là ví dụ:

Đây là trang web mình sử dụng cho cách trên : http://beatphoichuan.com/
bạn có thể tham khảo chi tiết tại : http://webedge.github.io/Bootstrap-3.1.1-OffCanvasMenu/
tuy nhiền hướng dẫn trên có 1 lỗi click trên mobile bạn cần vào file boostrap.min.js để sửa lại , đó là thay thế ontouchstart bằng disable-ontouchstart.

Nếu bạn cần thiết kế website tại quận 7 vui lòng liên hệ Sơn Web là công ty hàng đầu về dịch vụ thiết kế website tại tphcm

CÔNG TY TNHH GIA TẠI

Địa chỉ :24, Lê Văn Lương, Phước Kiểng, Nhà Bè, TP. Hồ Chí Minh

HOTLINE : 0932 644 183 Mr.Sơn

Share this post

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai.