Bạn đã bao giờ vào một trang web và thấy rằng menu điều hướng 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 chúng biến mất khi cuộn trang. Các menu điều hướng luôn hiển thị nổi và như vậy 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 một trang web hoặc một blog trên WordPress, chúng tôi mời bạn tham khảo Cách cài đặt một blog WordPress trong 7 bước 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 nó được thực hiện, chúng ta hãy tìm hiểu những gì chúng ta quan tâm ngày 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 cần nhập CSS ID của menu điều hướng mà bạn muốn thả nổi.
Bạn sẽ cần sử dụng công cụ "kiểm tra" của trình duyệt để 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:
Trong ví dụ này, ID CSS của menu điều hướng của chúng tôi là " site Navigation '.
Hãy tiếp tục và nhập CSS ID của menu trong cài đặt plugin như sau “# site-navigation”.
Tùy chọn tiếp theo trong cài đặt plugin là đặt không gian giữa đầu 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 một mục mà bạn không muốn ẩn. Nếu không, hãy bỏ qua cài đặt này.
Sau đó, bạn cần nhấp vào hộp ngay bên cạnh tùy chọn: "Kiểm tra Quản trị Thanh". Đ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 vào 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 đang 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 hiển thị menu này trên thiết bị di động và máy tính bảng. Nếu không thích, 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 " 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 theo cách thủ công
Phương pháp này yêu cầu thêm mã CSS tùy chỉnh vào theme WordPress.
Trước hết, bạn phải truy cập " Giao diện> Tùy chỉnh Để khởi chạy Trình tùy chỉnh WordPress.
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, thì mã CSS này có thể chồng lên tiêu đề và tiêu đề của trang web.
Bạn có thể dễ dàng điều chỉnh điều này bằng cách thêm lề trên vùng tiêu đề của bạn bằng đoạn mã sau:
.site thương hiệu {margin-top: 60px; }
Đến đâ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 menu nổi trên trang web của mình.
Nếu bạn đang tìm kiếm khác plugin WordPress điều này sẽ cho phép bạn quản lý các menu, đây là một số plugin WordPress phí bảo hiểm 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 tùy chỉnh của riêng mình trong một vài bước khá dễ dàng. Đặc biệt, nó cho phép bạn dễ dàng và trực quan tạo một menu WordPress trang nhã và chuyên nghiệp. Từ menu mega giàu tính năng phức tạp nhất đến menu thả xuống đơn giản nhất, Plugin WordPress HeroMenu thiết lập bất kỳ loại menu nào và khởi động và chạy 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 trình đơn cho WordPress. Nó có thể được sử dụng để tạo nhiều cấp menu một cách không giới hạn, cũng như các thanh bên với nội dung phong phú, nhiều tùy chọn tạo kiểu và hiệu ứng động.
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à hơn thế nữa. Plugin này hoàn toàn đáp ứng và có hơn 45 hình ảnh động 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 premium cho phép bạn thêm menu canvas vào trang web của mình để tạo cho nó một giao diện làm nổi bật thông tin của bạn một cách đơn giản. Nó sử dụng tính năng menu mặc định của WordPress để tạo menu.
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.
- Làm thế nào để đưa phong cách cho menu điều hướng của bạn
- Làm thế nào để thêm một thuộc tính tiêu đề trong menu WordPress
- Các plugin 8 WordPress để tạo một megamothy trên blog của bạn
Kết luận
Đây ! Đó là nó 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 mình. Chúng tôi mời bạ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.
...
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 hoàn hảo!
Nhưng dù tôi có tìm kiếm trên mạng đến đâu, tôi cũng không thể tìm ra câu trả lời cho câu hỏi của mình:
Làm thế nào để thực hiện, sau khi menu nổi được tạo (trong CSS hoặc với phần mở rộng nào đó), để các phần của tôi xuất hiện sau menu chứ không phải sau menu?
Nó đặc biệt khó chịu trong trường hợp của tôi vì nó là một trang và các mục trong menu của tôi do đó đề cập đến các phần của trang, mỗi lần xuất hiện phía 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!
Tôi đã tự hỏi liệu có thể làm cho mục lục của một trang "dính" ...
Bonjour,
Chưa bao giờ thử nghiệm. Tôi không thể trả lời bạn.
Xin chào; Chào
Tôi đã thử với một chủ đề đã tải xuống (wallstreet) nhưng trong khi làm theo hướng dẫn của bạn, không có gì thay đổi… Tôi không biết còn thiếu cái gì…
Tôi thích nó và tôi ước mình có thể sử dụng nó ...
Merci
Raul
Xin chào,
Hãy thử tắt tất cả các plugin WordPress khác và xem màn hình tiếp theo.
Cảm ơn bạn đã hướng dẫn của bạn, đơn giản như hello tất cả là để biết!
Bonjour,
Rất vui vì tôi đã hữu ích.