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.
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
[crayon]
wp_register_style( ‘bootstrap’, get_template_directory_uri() . ‘/library/css/bootstrap.min.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘bootstrap’ );
wp_register_script( ‘bootstrap’,
get_template_directory_uri() . ‘/library/js/bootstrap.min.js’,
array(‘jquery’),
‘1.2’ );
wp_enqueue_script(‘bootstrap’);
[/crayon]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
[crayon] [/crayon] ở đây bones_main_nav là một hàm mình dùng để hiển thị menu , hàm đó được viết như sau :[crayon] function bones_main_nav() {
// display the wp3 menu if available
wp_nav_menu(
array(
‘menu’ => ‘main_nav’, /* menu name */
‘menu_class’ => ‘main_nav sf-menu’,
‘theme_location’ => ‘main_nav’, /* where in the theme it’s assigned */
‘container’ => ‘false’, /* container class */
‘fallback_cb’ => ‘bones_main_nav_fallback’, /* menu fallback */
‘depth’ => ‘3’, /* suppress lower levels for now */
‘walker’ => new Bootstrap_Walker()
)
);
}
[/crayon] 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: [crayon] $(‘document’).ready(function () {
$(‘.navbar-toggle’).on(‘click’, function () {
$(‘.collapse, #mainContainer’).toggleClass(‘in’);
});
});
$(window).resize(function () {
if ($(window).width() > 768) {
$(‘.collapse, #mainContainer’).removeClass(‘in’);
};
});
Sau đó bạn chỉ cần css lại cho class in và menu lại là được đây là ví dụ:
[crayon] .navbar-collapse.collapse {
border: none;
display: block;
background: #151515;
position: absolute;
left: -100%;
top: 70px;
width: 80%;
max-height: none;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.navbar-collapse.collapse.in {
left: 15px;
}
[/crayon]
Đâ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
