Hướng dẫn sub menu trong wordpress

Hướng dẫn sub menu trong wordpress

Hướng dẫn sub menu trong web và wordpress

Việc dùng sub menu chỉ với 2 cấp đơn giản bạn có thể dùng css đơn giản nhưng với sub menu nhiều cấp bạn nên sư dụng các plugin jquery sẵn có.Sau đây mình sẽ hướng dẫn tạo sub menu trong web với superFish menu mà mình đã từng làm qua.

 

huong dan sub menu web

huong dan sub menu web

Đây là hình ảnh minh họa sub menu web

 Sub menu  với superFish Menu

+ Include file superfish.js và superfish.css cơ bản vào trong web, đối với wordpress để dùng css và js đúng cách bạn mở file functions.php và thêm các dòng này vào

[code type=php]

[/code]

Plugin superFish Menu hỗ trợ cả 2 loại sub menu dọcsub menu ngang.

+Superfish menu dọc:Để dùng sub menu dọc trong web và wordpress thật đơn giản , bạn chỉ việc thêm 2 bước nữa hầu như đã có plugin jquery superfish menu đã hỗ trợ sẵn bạn chỉ việc gọi ra . Trước tiên bạn include thêm file superfish-vertical.css vào trong web đối với wordpress thì bạn cũng làm tương tư như trên . Sau đó trong web bạn thêm code trong js
[code type=html]
jQuery(document).ready(function($) {
jQuery(‘ul.sf-menu’).superfish({
animation: {height:’show’}, // slide-down effect without fade-in
delay: 1200 // 1.2 second delay on mouseout
});
});
[/code]
note: Trong menu đó bạn cần thêm class “sf-menu sf-vertical”,để chỉnh css bạn chỉ cần chỉnh trong file superfish-vertical.css

sub menu doc web

sub menu doc web

Đây là hình web minh họa mình đã làm.

+Superfish menu ngang :

Để tạo sub menu ngang đa cấp thì bạn không cần thêm file superfish-vertical.css vào trong web, đối với wp nếu bạn muốn dùng tùy biến sub menu với superfish menu thì chỉ cẩn dùng hàm
[code type=php]
‘top_header_nav’, /* menu name */
‘menu_class’ => ‘sf-menu’,
‘theme_location’ => ‘top_header_nav’, /* where in the theme it’s assigned */
‘container’ => ‘false’, /* container class */

);
wp_nav_menu($args);
?>
[/code]

Để chỉnh sửa định dạng trực tiếp css menu bạn sửa file superfish.css .

huong dan sub menu superfish

huong dan sub menu superfish

Bạn có thể tải superfish menu trực tiếp tại link này https://github.com/joeldbirch/superfish/
Cảm ơn bạn đã đọc bài viết Hướng dẫn sub menu trong wordpress

Share this post

Comments (4)

  • Lbffdix Reply

    affordable car insurance – https://affordablecarinsurancehnb.org/ auto insurance coverage [url=https://affordablecarinsurancehnb.org/]compare auto insurance[/url] ’

    07/06/2017 at 3:07 sáng
  • Fedziccap Reply

    Обольстительные рассказы проституток на сайте Girls Room волшебным образом раскрасят ваши будни головокружительными красками и подарят неописуемое наслаждение. Здесь элитные проститутки не только полностью удовлетворят ваш интерес, но и оправдают любые даже самые смелые ожидания и фантазии. Истории проституток, которые вы здесь встретите помогут ощутить себя настоящим гигантом в сексе. А фото проституток только дополнят ваше удовольствие. Здесь проститутки Казани и проститутки Винницы откроют для вас дверь в мир сексуальных удовольствий, проститутки Воронежа и проститутки Харькова помогут Вам ощутить себя обожаемым и всегда желанным мужчиной, проститутки Крового Рога и проститутки Ростова расскажут самые откровенные истории из своей жизни, проститутки Красноярска и проститутки Николаева откроют для вас науку получения и доставления удовольствия от секса.
    Girls Room – Проститутки Санкт-Петербурга – проститутки днепропетровска

    14/06/2017 at 6:13 chiều
  • samahmud97 Reply

    Вечные ссылки с топовых ресурсов
    Выйди в топ 10 и получай трафик!
    Размещение вечных трастовых ссылок
    с тиц от +1000 до +45 000 !
    тут >>>>>>>progoner.ru<<<<<<<<<

    20/06/2017 at 10:56 sáng
  • Joseph77 Reply

    Производство светодиодных табло для спорта, бегущих строк, табло для АЗС. ledbelgorod.ru

    01/07/2017 at 6:30 sáng

Trả lời

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