Bỏ qua đến nội dung chính

Làm thế nào để tạo ra một thực đơn nổi trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn đã bao giờ truy cập một trang web và nhận thấy rằng một menu điều hướng luôn luôn hiển thị ở trên cùng?

Về nguyên tắc, các menu điều hướng được hiển thị theo cách biến mất khi cuộn trang. Các menu điều hướng luôn hiển thị nổi và cho dù người dùng cuộn xuống như thế nào.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một menu nổi trên blog WordPress của bạn.

Nếu bạn chưa tạo ra một trang web hoặc blog trên WordPress, chúng tôi mời bạn tham khảo Làm thế nào để cài đặt một bước 7 blog WordPress sau đó, Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn

Nếu xong, chúng ta hãy đi vào những gì có liên quan đến chúng ta hôm nay.

Phương pháp 1: Cách thêm Menu nổi trên WordPress bằng cách sử dụng Plugin

Phương pháp này dễ dàng hơn và nhanh chóng. Nếu bạn chưa thiết lập menu điều hướng, bạn có thể học cách làm.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin " Thực đơn dính (hoặc Bất cứ điều gì!) Chúng tôi Di chuyển ". Nếu bạn không biết cách cài đặt plugin, bạn có thể đọc hướng dẫn của chúng tôi.

Sau khi kích hoạt, bạn phải truy cập " Cài đặt »Menu dính Để cấu hình các cài đặt của plugin này.

Trước tiên, bạn phải nhập số nhận dạng CSS của menu điều hướng mà bạn muốn nổi.

Bạn sẽ cần sử dụng công cụ "kiểm tra" trình duyệt của mình để tìm CSS được sử dụng.

Chuyển đến trang web của bạn và di chuyển chuột đến menu điều hướng. Sau đó, bạn phải nhấp chuột phải và chọn "Kiểm tra".

Đi xa hơn bằng cách khám phá Làm thế nào để tùy chỉnh một chủ đề WordPress với Pencil Vàng

Điều này sẽ phân chia (theo mặc định) màn hình trình duyệt của bạn và bạn sẽ có thể thấy mã nguồn của menu điều hướng. Bạn phải tìm một dòng tương tự như thế này:

<Nav id = "Site Navigation" class = "main-menu" role = "menu">

Trong ví dụ này, ID CSS của menu điều hướng của chúng tôi là " site Navigation '.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Hãy tiếp tục và nhập ID CSS của menu trong cài đặt plugin dưới dạng "# site-navigation".

Tùy chọn tiếp theo về cài đặt plugin là xác định khoảng trắng giữa đỉnh màn hình và menu điều hướng nổi. Bạn có thể sử dụng cài đặt này nếu menu của bạn trùng lặp với thứ bạn không muốn ẩn. Nếu không, bỏ qua cài đặt này.

Sau đó, bạn phải nhấp vào hộp bên cạnh tùy chọn "Kiểm tra quản trị viên". Điều này cho phép plugin thêm một số không gian cho thanh công cụ WordPress được thêm cho người dùng đã đăng nhập.

Tùy chọn tiếp theo trong trang cài đặt cho phép bạn ẩn menu điều hướng nếu người dùng truy cập trang web của bạn bằng màn hình nhỏ hơn, chẳng hạn như thiết bị di động.

Bạn có thể kiểm tra cách menu này xuất hiện trên thiết bị di động và máy tính bảng. Nếu bạn không thích nó, bạn có thể thêm 780px vào tùy chọn này.

Khám phá quá Làm thế nào để tạo ra một thực đơn đáp ứng cho WordPress di động

Đừng quên nhấp vào nút « Lưu cài đặt Để lưu các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của bạn để xem menu điều hướng nổi của bạn hoạt động.

Phương pháp 2: Cách thêm menu điều hướng bằng tay

Phương pháp này yêu cầu thêm mã CSS tùy chỉnh vào chủ đề WordPress của bạn.

Đầu tiên, bạn phải ghé thăm " Giao diện> Customize Để khởi chạy Trình tùy chỉnh WordPress.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Bấm vào CSS bổ sung Trong khung bên trái, sau đó thêm mã CSS này.

# Trang web chuyển hướng {background: #fff; height: 60px; z-index: 170; margin: 0 tự động; border-bottom: 1px #dadada rắn; width: 100%; position: fixed; top: 0; trái: 0; phải: 0; text-align: center; }

Thay thế " # Site Navigation Theo định danh của menu điều hướng của bạn và nhấp vào nút « Enregistrer '.

Bây giờ bạn có thể truy cập trang web của bạn để xem menu điều hướng nổi của bạn hoạt động.

Nếu menu điều hướng của bạn thường xuất hiện sau tiêu đề trang web, mã CSS này có thể chồng lấp tiêu đề và tiêu đề trang web.

Điều này có thể dễ dàng điều chỉnh bằng cách thêm một lề vào khu vực tiêu đề của bạn bằng cách sử dụng mã sau đây:

.site thương hiệu {margin-top: 60px; }

Ở đây kết thúc hướng dẫn của chúng tôi, bây giờ bạn sẽ có thể tạo hoặc thêm một menu nổi trên trang web của bạn.

Nếu bạn đang tìm kiếm các plugin WordPress khác sẽ cho phép bạn quản lý các menu, đây là một số plugin WordPress cao cấp dành riêng cho nhiệm vụ này.

1. đơn Anh hùng

Plugin này cho phép bạn tạo menu WordPress được cá nhân hóa của riêng bạn trong một vài bước dễ dàng. Nó cho phép bạn dễ dàng và trực quan tạo ra một menu WordPress thanh lịch và chuyên nghiệp. Từ menu mega phức tạp nhất có đầy đủ các tính năng, đến menu đơn giản nhất với menu thả xuống, plugin WordPress HeroMenu thiết lập bất kỳ loại menu nào và làm cho nó hoạt động trong vài phút.

Về các tính năng mà nó cung cấp trong số những thứ khác: chức năng hoàn hảo trên PC, máy tính bảng và điện thoại thông minh, dễ sử dụng, nội dung có thể tùy chỉnh, CSS tùy chỉnh để thêm các kiểu menu của riêng bạn, trình thiết kế menu lớn, trình duyệt được hỗ trợ: Chrome, Firefox, Safari , Opera, IE9 và nhiều hơn nữa.

Tải về | Bản demo | Web hosting

2. Menu Slick

Menu Slick không chỉ là một plugin menu cho WordPress. Nó có thể được sử dụng để tạo nhiều cấp menu theo cách không giới hạn, cũng như các thanh bên có nội dung phong phú, nhiều tùy chọn kiểu và hiệu ứng hoạt hình.

Mỗi cấp độ menu có thể tùy chỉnh với màu nền, hình ảnh, video, phông chữ tùy chỉnh, v.v. Plugin này hoàn toàn đáp ứng và có nhiều hình ảnh động 45 hơn cho các mục menu.

Tải về | Bản demo | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu là một plugin WordPress cao cấp cho phép bạn thêm một menu canvas trên trang web của bạn, để cung cấp cho nó một cái nhìn nổi bật và đơn giản thông tin của bạn. Nó sử dụng chức năng menu mặc định của WordPress để tạo các menu của nó.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Bạn sẽ có thể thêm các yếu tố bổ sung vào các mục menu mặc định, chẳng hạn như biểu tượng, khẩu hiệu menu, tiêu đề nhóm giả và mô tả dài. Nó cũng đi kèm với trình soạn thảo WYSIWYG để giúp bạn nắm bắt mô tả dài của bạn theo cách thân thiện với người dùng. Với trình chỉnh sửa này, bạn cũng có thể sử dụng mã ngắn.

Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Nếu bạn muốn đi xa hơn trong việc tạo hoặc tùy chỉnh các menu của blog hoặc trang web của bạn, chúng tôi cũng khuyên bạn nên tham khảo các liên kết dưới đây.

Kết luận

Thế thôi! Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn thêm một menu nổi vào blog WordPress của bạn. Chúng tôi mời bạn đến chia sẻ bài viết này với bạn bè của bạn trên các mạng xã hội của bạn.

Nếu bạn có bất kỳ đề nghị hoặc nhận xét, họ sẽ được chào đón. Và nếu bạn chưa quen với WordPress, tham khảo ý kiến ​​này tài nguyên.

...

Bài viết này chứa comments 7

  1. Bonjour,

    Trước hết cảm ơn bạn vì hướng dẫn này thực hiện công việc một cách hoàn hảo!
    Nhưng tôi đã tìm kiếm trên mạng, không thể tìm thấy câu trả lời cho câu hỏi của tôi:
    Làm thế nào để làm, một khi menu nổi tạo (trong CSS hoặc với phần mở rộng không quan trọng), để các phần của tôi xuất hiện sau menu chứ không phải phía sau menu?
    Điều này đặc biệt rắc rối trong trường hợp của tôi vì nó là một onepage và các mục trong menu của tôi đề cập đến các phần của các trang, mỗi lần quay lại sau menu của tôi ...

    nó có nói chuyện với bạn không?

    Cảm ơn bạn trước!

      1. Xin chào; Chào

        Tôi đã thử với một chủ đề được tải xuống (wallstreet) nhưng, trong khi làm theo hướng dẫn của bạn, không có gì chuyển động ... Tôi không biết những gì còn thiếu ...
        Tôi thích nó và tôi ước tôi có thể sử dụng nó ...

        Merci
        Raul

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
5 cổ phiếu
cổ phiếu2
tweet
Enregistrer3