Hướng dẫn tạo Responsive Menu cho WordPress Mobile

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hướng dẫn tạo Responsive Menu cho WordPress Mobile

Hôm nay mình sẽ hướng dẫn cách tạo responsive menu hay còn gọi là sliding menu cho website sử dụng jquery. Trong bài này mình sử dụng jQuery.Mmenu.

tạo responsive menu với jquery mmenu

jQuery.Mmenu là một plugin của jquery cấp phép tạo slide navigation menu núp ở sườn website trên thiết bị mobile. Thiết kế này sẽ tự tin hơn, làm web của bạn bài bản hơn rất nhiều. Nào chúng ta hãy bắt đầu nhé.

Tạo response menu

Để bắt đầu, trước hết bạn download jQuery.Mmenu tại đây. Trong thí dụ mình sử dụng giao diện mặc định của plugin. Mình sẽ trình bày cơ bản các đoạn mã cần dùng để bạn có thể áp dụng cho mọi trang web trước sau đó mình áp dụng vào wordpress sau.

Vì này là jquery plugin, bạn cần include thư viện jquery (gọi là: dependencies) trước mắt và theo thứ tự jQuery, jquery.mmenu.js and jquery.mmenu.css . Chèn đoạn code như dưới đây vào trong thẻ head.

    <  head  >      ..      <    link   type  =    "text/css"   rel  =    "stylesheet"   href  =    "jquery.mmenu.css"     />       <  script type  =    "text/javascript"   src  =    "jquery.js"    >       <  script type  =    "text/javascript"   src  =    "jquery.mmenu.js"    >      ..      </ head  >    

Tất cả các gì để có thể tạo response menu là 1 file mmenu.js và mmenu.css.

Tạo Menu

Chúng ta sẽ sử dụng các thẻ nav , ul, li và a để tạo giao diện HTML của menu. Có thể dùng thêm span lồng trong tag a . Ví dụ sau đây bạn copy đoạn code sau vào sau thẻ body:

    <  nav id  =    "menu"    >       <  ul  >       <  li   class    =    "Selected"    >       <  a href  =    "demo.html"    >   Basic Horizontal Menu   </ a  >       <  ul  >       <  li  >  <  a href  =    "#"    >   First sub  -  menu   </ a  >  </ li  >       <  li  >  <  a href  =    "#"    >   Second sub  -  menu   </ a  >       <  ul  >       <  li  >  <  a href  =    "#"    >   First sub  -  sub  -  menu   </ a  >  </ li  >       <  li  >  <  a href  =    "#"    >   Second sub  -  sub  -  menu   </ a  >  </ li  >       <  li  >  <  a href  =    "#"    >   Third sub  -  sub  -  menu   </ a  >  </ li  >       </ ul  >       </ li  >       <  li  >  <  a href  =    "#"    >   Third sub  -  menu   </ a  >  </ li  >       </ ul  >       </ li  >       </ ul  >       </ nav  >    

Bước tiếp theo, chúng ta tạo nút để kích hoạt menu, thêm dòng html sau vào trong file:

    <  div   class    =    "header"    >  <  a href  =    "#menu"    >  </ a  >   Demo   </ div  >    

Tiếp đó bạn gọi hàm tái tạo mmenu jquery. Chèn đoạn js vào trong thẻ head:

    <  script type  =    "text/javascript"    >    $  (    function    (    )     {   $  (    'nav#menu'    )    .  mmenu  (    )    ;     }    )    ;    

Lưu ý: bạn cũng có thể có thể thay tên id của nav theo ý muốn, nhớ đổi cả cho hàm jquery nữa đấy nav#menu .

Để jquery mmenu cũng có thể có thể hoạt động được, chúng mình cần thêm đoạn css này nữa. Chèn đoạn css sau vào style.css.

 html  ,   body   {     padding    :     0    ;     margin    :     0    ;     }   body   {     background-color    :     #fff    ;     font-family    :   Arial  ,   Helvetica  ,   Verdana  ;     font-size    :     14px    ;     line-height    :     22px    ;     color    :     #666    ;     min-height    :     100%    ;     position    :     relative    ;   -webkit-text-size-adjust  :     none    ;     }       .mm-label    .button     {     text-indent    :     0   !important  ;     padding    :     20px     20px     40px     20px   !important  ;     }     nav  :    not    (  .mm-menu  )     {     display    :     none    ;     }     .header  ,   .content  ,     .footer     {     text-align    :     center    ;     }   .header  ,     .footer     {     background    :     #777    ;     font-size    :     16px    ;     font-weight    :     bold    ;     color    :     #fff    ;     line-height    :     40px    ;     -webkit-box-sizing  :     border-box    ;   -moz-box-sizing  :     border-box    ;     box-sizing    :     border-box    ;       width    :     100%    ;     height    :     40px    ;     padding    :     0     50px    ;     }     .header   a   {     background    :     center     center     no-repeat     transparent    ;     background-image    :     url    (   data  :    image  /png  ;  base64  ,  iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC   )    ;       display    :     block    ;     width    :     40px    ;     height    :     40px    ;     position    :     absolute    ;     top    :     0    ;     left    :     10px    ;     }   

Đoạn css trên cho bạn định dạng thanh header có nút kích hoạt slide menu nằm kế bên trái. Nhiều bạn sẽ quên đổi lại phần css trùng với tên sử dụng trong html. Nếu bạn thay tên id của menu thì hãy nhớ đổi lại trong css cho phù hợp.

Trang web sử dụng sliding menu có 3 phần: header chứa nút kích hoạt menu, nội dung menu và khung hiển thị nội dung chính của trang web. Chúng ta sẽ thêm cấu trúc html cho nội dung chính, sử dụng thẻ bao div , 3 thành phần này được nằm ở trong thẻ bao ngoài (wrapper) tạo nên cấu trúc của trang web.

  
Demo

This is a demo.
Click the menu icon to open the menu.

For more demos, a tutorial, documentation and support, please visit mmenu.frebsite.nl

Kết quả:
demo jquery mmenu

nếu cấu trúc trang không sử dụng DIV , mà sử dụng một thẻ khác tỉ dụ SECTION thì bạn phải khai báo trong thuộc tính offCanvas.pageNodetype .

Các bạn cũng đều có thể xem demo ở trong file tải về. Nếu bạn muốn tùy biến menu nâng cao hơn thì có thể xem các tutorial của nó tại chỉ dẫn này http://mmenu.frebsite.nl/tutorial

Tạo response menu cho wordpress

Bạn chỉ việc thay menu phía trên thành menu của wordpress. Chúng ta sẽ cực kỳ cần đến 2 menu. Mở functions.php thêm vào code tạo menu:

 register_nav_menus  (     array    (     'main-menu'     =>      'Main Menu'    ,     'mobile-menu'     =>      'Mobile Menu'     )     )    ;   

Thiết kế 1 menu dành riêng cho mobile và cái menu còn lại hiển thị trên thiết bị desktop. Theo nguyên tắc ẩn hiện với từng thiết bị:

  • Màn hình di động: ẩn Main Menu, hiện Mobile Menu.
  • Màn hình desktop: ẩn Mobile menu, hiện Main Menu.

Chèn code hiển thị menu mobile thay thế nội dung thẻ nav > ở phần trên.

    <   ?php wp_nav_menu  (     array    (     // Hiển thị menu di động     'theme_location'     =>      'mobile-menu'    ,     'container'     =>      'nav'    ,     'container_menu'    ,     'container_mobile-menu'     )     )    ;     ?>    

Còn phần code hiển thị menu cho thiết bị desktop thì đặt tùy ý theo ý của bạn trong header.php hoặc index.php .

    <   ?php wp_nav_menu  (     array    (     // Hiển thị menu Desktop     'theme_location'     =>      'main-menu'    ,     'container'     =>      'nav'    ,     'container_main-menu'     )     )    ;     ?>    

Tương tự với menu dành riêng cho desktop thì ta sẽ có một chiếc khung container bằng thẻ nav với class là main-menu bọc lại nó để tương lai chúng ta dễ dàng viết CSS.

Viết CSS Dropdown menu

Chúng ta sẽ tiến hành viết CSS cho cái Main Menu, mình sẽ code để các bạn hiểu nguyên lý. Mình nghĩ việc các bạn tự vọc và tìm cách thức các đoạn mã hoạt động thì có thể dàng lấy code của người khác và tự custom riêng thành của mình. Đoạn code tạo dropdown menu sẽ là:

   /* CSS for Dropdown Menu */     .main-menu     {     background    :     #3C8BE0    ;     border    :     1px     solid     #2082C4    ;     margin    :     2em     0em    ;     }     .main-menu   ul  ,     .main-menu   li   {     display    :     inline-block    ;     list-style-type    :     none    ;     }     .main-menu   ul li a  ,     .main-menu   ul li   .sub-menu     {     text-decoration    :     none    ;     color    :     #fff    ;     display    :     inline-block    ;     margin    :     0     10px    ;     }     .main-menu   li   {     position    :     relative    ;     padding    :     0.8em    ;     }     .main-menu   ul li   .sub-menu     {     position    :     absolute    ;     display    :     none    ;     top    :     32px    ;     width    :     auto    ;     background    :     #3c8be0    ;     }     .main-menu   ul li  :    hover   .sub-menu  {     display    :     block    ;     }     .main-menu     .sub-menu   li   {     padding    :     5px     0.5em    ;     }     .main-menu     .sub-menu   a   {     padding    :     10px    ;     margin    :     0    ;     }   

Kết quả ta sẽ được 1 dropdow menu khá đơn giản, nhớ là hãy bỏ thêm các item con vào menu để test nhé.
dropdown-menu

Ẩn/Hiện menu ở từng thiết bị

Do chúng ta sẽ sử dụng hai menu khác nhau nên sẽ thật cần cho ẩn/hiện các menu vào chính xác thời điểm khác nhau, cụ thể trên từng thiết bị sử dụng css conditional. Chúng ta sẽ làm điều này bằng cách viết các dòng CSS sau đây vào file style.css

   /* CSS for show/hide menu on each device */     @media   all and   (    max-width    :     1023px    )     {     /* CSS cho thiết bị di động */     .main-menu     {     display    :     none    ;     }     .mobile-menu     {     display    :     block    ;     }     }     @media   all and   (    min-width    :     1024px    )     {     /* CSS cho thiết bị desktop */     .main-menu     {     display    :     block    ;     }     .mobile-menu     {     display    :     none    ;     }     }   

Bạn cũng sử dụng cấu trúc css conditional này để không cho sử dụng đoạn css mà dùng để tạo dáng cho jquery mmenu trên giao diện desktop. Bạn bỏ đoạn css dài dài ở trên vào trong ngoặc css này nhé:

   @media   all and   (    min-width    :     1024px    )     {     /* CSS cho thiết bị desktop */   ......   }   

Phần chèn script và style của jquery.mmenu vào trong thẻ head, bạn cũng có thể có thể sử dụng hook wp_head :

   function   jquerymmenu  (    )     {   wp_enqueue_script  (     'jmmenu-script'    ,   get_template_directory_uri  (    )    .    "/js/jquery.mmenu.js"    ,     array    (    'jquery'    )    ,     true     )    ;   wp_enqueue_style  (     'jmmenu-style'    ,   get_template_directory_uri  (    )    .    "/css/jquery.mmenu.css"     )    ;     }   add_action  (     'wp_enqueue_scripts'    ,     'jquerymmenu'     )    ;   

Bài viết Hướng dẫn tạo Responsive Menu cho WordPress Mobile được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang