Cách làm dropdown menu bằng Superfish

Tạo menu dropdown bằng Superfish

Hi các bác!

Em là Onion Trần, hôm nay em sẽ hướng dẫn các các cách tạo một menu dropdown cho riêng mình bằng cách sử dụng Superfish jQuery, để em nói sơ qua về Superfish trước nhé. Superfish là một plugin jQuery giúp chúng ta tích hợp/sử dụng làm một dropdown menu một cách rất rât là dễ dàng, phù hợp với nhiều nhu cầu của nhiều đối tượng, từ người mới tìm hiểu đến các bạn thiết kế website.

Tạo menu dropdown bằng Superfish

Menu dropdown sử dụng SuperFish

Bài hướng dẫn của mình sẽ được thực hiện với 7 bước, mỗi bước ngốn của các bạn khoảng 2 phút, vì thế, với tut này, các bạn có thể hoàn thành trong khoảng 15p là xong tất cả, bác nào muốn đẹp đẹp một chút thì bỏ công, làm thêm công đoạn css cho đẹp đẹp 1 chút là được. Thế thôi nhé, làm nào!

1/ Download Superfish

Đâu tiên, việc gì cũng vậy, các bác đi cày phải có trâu, làm menu dropdown phải có superfish jquery, haha. Các bác click vào đây để download Superfish . Trong trang download, em khuyên các bác nên download file .zip, vì nó chứa tất cả các file cần thiết, với cả một điều rất quan trong nữa là: trong bài viết này em dùng file .zip, LOL.

superfish-download-wordpress-theme

Download superfish jquery – tải “cái cày” trước khi ra “ruộng”

2/ Sắp xếp các file vừa tải về

Các bác vào hosting, tạo 1 thư mục tên superfish, tạo thêm 2 thư mục con là css và js, thư mục superfish ngang hàng với theme hiện tại của các bác. Sau khi tải “đồ nghề” xong, các bác giải nén ra sẽ được thư mục superfish-master, điều hướng đến thư mục src chúng ta sẽ được 2 thư mục con là cssjs, các bác copy file superfish.css và superfish-navbar.css vào thư mục css vừa tạo, copy superfish.jssupersub.js vào thư mục js vừa tạo. Các bác xem hình dưới

Sắp xếp file css và js vừa download về

Sắp xếp file css và js vừa download về

3/ Gọi các file js và css vừa copy bằng wp_enqueue_scripts

Sau khi đã chuẩn bị đầy đủ “súng” và “đạn”, chúng ta sẽ tiến hành load nó ở phần header, để khi sử dụng ở các nơi khác thì chỉ cần gọi hàm thôi, không phải load đi load lại mãi. :).

Các bác copy/paste đoạn code sau đây vào file functions.php trong theme hiện tại của các bạn nhé.


add_action( 'wp_enqueue_scripts', 'superfish_libs' );
function superfish_libs()
{
	// đăng kí những file js cần load ở header
 wp_enqueue_script('superfish', get_stylesheet_directory_uri() . '/superfish/js/superfish.js');
 wp_enqueue_script('supersubs', get_stylesheet_directory_uri() . '/superfish/js/supersubs.js');
// đăng kí những file css cần load ở header
 wp_enqueue_script('superfish', get_stylesheet_directory_uri() . '/superfish/css/superfish.css');
 wp_enqueue_script('supersubs', get_stylesheet_directory_uri() . '/superfish/css/superfish-navbar.css');

Các bạn có thể thấy, chúng ta vừa đăng kí “hộ khẩu” cho 4 file chúng ta vừa copy/paste xong, từ giờ trở đi, 4 file này sẽ có những phần đất để tự động load mà không cần can thiệp gì của chúng ta nữa. Các bác cũng có thể thấy là tại sao em không copy/paste luôn 2 file css vào file style.css, làm vậy chi cho khổ, thực ra, thứ nhất em muốn các file được bố trí gọn gàng, thứ hai khi cần chỉnh sửa, cứ vào thư mục này mà sửa, mỗi khi mở file style.css với khoảng 2000 dòng thì rất là choáng và không biết phải thế nào. Nếu không thích, muốn đỡ load cho site thì mở 2 file superfish.css và superfish-navbar.css ra, copy/paste toàn bộ nội dung trong đó vào style.css, sau đó chỉ xóa 2 dòng đăng kí load css đi là ok!.

Tiếp theo, công việc này đòi hỏi chúng ta thực sự khéo léo, rất rất khéo léo, đó là copy/paste tiếp ạ =)). Các bác mở file header.php của theme hiện tại ra, thêm dòng này ngay dưới dòng WP_HEAD()


<script type="text/javascript">
jQuery(function($){
    $(document).ready(function(){
      // superFish
       $('ul.sf-menu').supersubs({
       minWidth:    16, // minimum width of sub-menus in em units
       maxWidth:    40, // maximum width of sub-menus in em units
       extraWidth:  1 // extra width can ensure lines don't sometimes turn over
     })
    .superfish(); // call supersubs first, then superfish
     });
});
</script>

Bổ sung từ Thạch Phạm

Bạn có thể làm theo cách gọn mà an toàn hơn đó là lưu đoạn code trên thành một file có tên là superfish_wp.js và upload vào thư mục wp-content/themes/tên_theme_đang_dùng, sau đó chèn thêm đoạn code sau đây vào file functions.php (chèn dưới cuối hoặc đầu tiên, miễn là nằm trong <?php và  ?>).



function add_superfish() {
 wp_enqueue_script('superfish_wp',bloginfo('template_directory').'/superfish.js',array(jquery));
}
add_action('wp_enqueue_scripts','add_superfish');


4/ Tìm đến doạn cần hiển thị menu (hoặc nơi đang hiển thị menu)

Bước tiếp theo, khi các bạn đang ở file header.php, các bạn tìm đến đoạn hiển thị menu của các bạn, đa số là vậy, vì ở file header.php thường là nơi chứa đoạn code hiển thị menu, ở đây mình sử dụng theme mặc định là twentytwelve, và mình tìm được 1 đoạn thế này trong file header.php

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Như  các bạn đã thấy, trong đoạn code trên, chúng ta có 1 mảng là array(..), trong đó:

  • theme_location => primary : ở đây, primary là id của menu cần hiển thị
  • menu_class => nav-menu: cái này quy định style cho menu sắp ra đời của chúng ta

Vì đã thay thế và không còn sử dụng kiểu cũ của menu wordpress nữa, chúng ta sẽ tiến hành thay class cho menu, bằng cách thay thế nav-menu bằng sf-menu

5/ Tạo menu bằng chức năng menus trong wp-admin

Như các bạn đã biết, từ khi đổi đời lên wordpress 3.0 đã có rất nhiều sự thay đổi, trong đó có một chức năng là menus. Chức năng này giúp các bạn tạo các menu như ý muốn bao gồm: trang, chuyên mục, custom post type hoặc external link.

Quay trở lại vấn đề, các bạn vào wp-admin > appearances > menus. Tại đây các bạn có thể tạo menu theo ý mình, các bạn xem hình sau sẽ rõ:

wordpress-menus

Tạo menus theo ý mình bằng WordPress Menus

6/ Chỉnh sửa CSS cho phù hợp.

Sau khi đã tạo được menus theo ý mình, các bạn sẽ thấy nó hiển thị ra trang chủ như thế này:

6_before_styling

Ghê quá – xấu!. Đây là menu superfish khi chưa chỉnh sửa css

Vâng, nó đó các bạn, thành quả nãy giờ đó :), nhưng mà có vẻ…xấu, nhỉ?, vậy làm sao cho nó đẹp?. Chúng ta sẽ tiến hành tiếp công việc “nặng nhọc” từ đầu đến giờ =)).

Các bạn mở file superfish.css ra, tìm đoạn


.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	background:		#BDD2FF;
}

thành


.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#999; /*#13a;*/
}
.sf-menu li {
	background:		#ccc;/*#BDD2FF;*/

Tiếp tục tìm


.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#CFDEFF;
	outline:		0;
}

thay thế bằng


.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#eee;
	outline:		0;
	color: 			#111;
}

Và đây là thành quả

7_after_styling

7/ Chốt

Qua bài viết này, mình hi vọng đã giúp các bạn tạo được một menu cho riêng mình mà không cần phải nhờ vả ai cả, dù gì thì cái gì của mình vẫn hơn. Ngoài ra cũng mong muốn giúp các bác có ít thời gian tìm hiểu wordpress có thể làm được những cái mình muốn, từ từ từng chút một, hôm nay menu, hôm sau post, hôm sau và cả hôm sau nữa, các bài viết của mình mang tính chất mì ăn liền, có thể áp dụng ngay, chúc các bạn vui!

Nguồn: Cách làm dropdown menu bằng Superfish | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Những điều cần biết về SEO by Yoast WordPress
Giảm tải hình ảnh với plugin Hammy
Tác giả

Bình luận

KbcxMono

canadian king pharmacy canadian drugstore online shoppers drug mart pharmacy

Jbbvtooff

mexican pharmacies hormones online pharmacy school

Kuikurilk

branded viagra generic viagra viagra cialis trial pack

FvfcRoarm

i want buy viagra in mumbai wats rate wo is shop viagra coupon walgreens viagra price

JbnbFralf

hiv best canadian pharmacies dapoxetine

Fqhhtooff

get prescription online northwest pharmacy/com Cialis Soft Tabs

Ahkdtooff

canada drug discount pharmacy online canadianpharmacyusa24h

Lbsxtooff

canadian drugs online pharmacy generic viagras next day delivery canadian pharmaceuticals online safe

KvaxMono

payday loan places in los angeles cash loans kwinana payday loans paid on weekend

KndnMono

viagra for men for sale generic viagra in usa what drugs should not be taken with viagra?

FjjuRoarm

viagra at walmart how to take viagra foods that enhance viagra

Leave a Message

Registration isn't required.

NguyenLp LarTheme