Với sự trợ giúp của HTML, CSS và JavaScript, có thể tạo menu điều hướng với tab hoạt động cong. Điều này có thể được thực hiện bằng cách sử dụng. trước và. sau các phần tử giả để tạo hình dạng mong muốn, sau đó sử dụng JavaScript để thêm lớp hoạt động vào phần tử
HTML cho menu điều hướng này rất đơn giản. Có một phần tử ul với một lớp "nav" và trong đó, có sáu phần tử li, mỗi phần tử có một lớp "nav-item"
- Home
- About
- Services
- Portfolio
- Contact
CSS cho menu điều hướng này khá đơn giản. Các. trước và. sau khi các phần tử giả được sử dụng để tạo hai nửa của tab đang hoạt động. Sau đó, chúng được định vị tuyệt đối để chúng nằm trên các tab khác
Các. lớp nav-item được sử dụng để tạo kiểu cho phần còn lại của menu điều hướng. Các phần tử a được hiển thị khối để chúng lấp đầy toàn bộ khoảng trống của các phần tử li
.nav { position: relative; list-style: none; padding: 0; margin: 0; } .nav::before, .nav::after { content: ""; position: absolute; top: 0; width: 50%; height: 100%; background: #fff; z-index: 1; } .nav::before { left: 0; border-radius: 0 0 0 50%; } .nav::after { right: 0; border-radius: 0 0 50% 0; } .nav-item { position: relative; float: left; width: 16.66667%; } .nav-item a { display: block; padding: 10px 20px; border: 1px solid #ccc; text-decoration: none; color: #333; position: relative; z-index: 2; }
JavaScript cho menu điều hướng này rất đơn giản. Nó chỉ cần thêm lớp đang hoạt động vào phần tử khi nó được nhấp vào. Điều này có thể được thực hiện với sự trợ giúp của thuộc tính classList
var navItems = document.querySelectorAll[".nav-item"]; for [var i = 0; i < navItems.length; i++] { navItems[i].addEventListener["click", function[] { this.classList.add["active"]; }]; }
Thí dụ
Dưới đây là chương trình làm việc đầy đủ để tạo tab hoạt động trong menu điều hướng. Chúng tôi sử dụng HTML, CSS và JavaScript đã thảo luận ở trên để đạt được mục tiêu này
- Home
- About
- Services
- Portfolio
- Contact
Tóm lại, có thể tạo menu điều hướng với tab hoạt động cong bằng HTML, CSS và JavaScript. Điều này có thể được thực hiện bằng cách sử dụng. trước và. sau các phần tử giả để tạo hình dạng mong muốn, sau đó sử dụng JavaScript để thêm lớp hoạt động vào phần tử
Theo mặc định, WordPress thêm một lớp hoạt động vào các trang đơn trên mục menu, tôi. e. nếu người dùng đang ở trang 'Giới thiệu' ngay bây giờ, họ sẽ thấy trang 'Giới thiệu' được đánh dấu trên thanh điều hướng. Đây là cách thực hành Trải nghiệm người dùng [UX] tốt vì nó mang lại cho người dùng phản hồi trực quan tốt để giúp họ hiểu rõ hơn và không bị nhầm lẫn về vị trí của họ, điều này sẽ cho phép họ điều hướng qua trang web tốt hơn
Tuy nhiên, nếu bạn đã tạo một loại bài đăng tùy chỉnh, WordPress sẽ không tự động thêm lớp đang hoạt động vào mục menu cho bạn khi bạn truy cập bài đăng đơn lẻ của loại bài đăng cụ thể đó
Ví dụ: nếu chúng tôi tạo một loại bài đăng mới có tên là 'Tin tức' và chúng tôi có trang danh sách 'Tin tức' trên menu chính của mình, nó sẽ được đánh dấu để phản hồi cho người dùng rằng họ đang ở trong một phần của trang web trong 'Tin tức
Trong bài viết này, chúng tôi sẽ xem xét cách dễ dàng thực hiện những điều trên — để cho phép WordPress thêm một lớp hoạt động cho loại bài đăng tùy chỉnh trên menu điều hướng khi xem một bài đăng
Để đạt được điều này, bạn chỉ cần chèn đoạn mã sau vào hàm của mình. php
Đoạn mã này thêm lớp 'menu-mục tùy chỉnh' vào mục menu của loại bài đăng của bạn bất cứ khi nào bạn truy cập các bài đăng đơn thuộc loại bài đăng này. Nếu mẫu của bạn có UX tốt, bạn sẽ thấy rằng có phản hồi trực quan bất cứ khi nào bạn truy cập các trang bài đăng đơn lẻ. Điều này là do ‘custom-menu-item’ là lớp hoạt động mặc định cho các mục menu trong WordPress
Nếu bạn không thấy bất kỳ thay đổi nào, hãy thử xóa plugin bộ nhớ cache, đăng xuất, xóa bộ nhớ cache của trình duyệt hoặc kiểm tra trang web của bạn trên cửa sổ ẩn danh. Nếu bạn vẫn không thấy bất kỳ thay đổi nào, thì có khả năng chủ đề của bạn chưa thực hiện mã hóa css để đảm bảo rằng lớp 'menu-mục tùy chỉnh' có phản hồi trực quan. Nếu đúng như vậy, thì bạn sẽ cần đến biểu định kiểu của mình để làm như vậy
Mã hóa tùy chỉnh để làm nổi bật hình ảnh css của lớp đang hoạt động sẽ phụ thuộc vào từng chủ đề [chúng có thể có gạch chân, được in đậm, nền có màu hoặc màu khác, v.v.]. Do đó, chúng tôi sẽ không thể chứng minh điều đó trong bài viết này. Nếu bạn cần trợ giúp về vấn đề này, vui lòng liên hệ với chúng tôi. Chúng tôi sẽ có thể trợ giúp rất nhanh chóng và ở mức rất thấp cho những việc như thế này
Không chắc chắn nơi để chèn này? . Chúng tôi có nhiều kinh nghiệm về WordPress và phát triển web và được trang bị để giải quyết mọi vấn đề mà bạn có thể gặp phải