tôi thêm chiều cao tối đa. 100vh; . Tự động; . Nó đang cuộn một chút, nhưng không đến cuối menu. nó cũng không hoạt động khi chiều cao màn hình tăng lên một chút Show
Tôi đã thử thêm một loạt phần đệm vào cuối menu lớn để kiểm tra xem đó có phải là sự cố hay không và nó vẫn không cuộn xuống dưới cùng khi menu không được thu gọn (di động) Bất kỳ ý tưởng? Không có gì bí mật rằng một menu lớn sẽ không bao giờ gây thất vọng khi xử lý một menu có nhiều tùy chọn và mục con. Dù hiệu quả đến đâu, bạn luôn có thể nâng nó lên cao hơn với sự trợ giúp của hiệu ứng di chuột. Nó giúp truy cập khá dễ dàng vì người dùng không cần nhấp vào tùy chọn để biết các chi tiết khác. Thay vì nhấp vào nó, di chuột vào nó là đủ để hiển thị tất cả các mục con  Đôi khi, thật khó để biết liệu bạn đã chọn mục mà bạn muốn hay chưa. Một lần nữa, hiệu ứng di chuột có ích và làm nổi bật những gì bạn đã chọn, do đó tránh nhấp nhầm vào tùy chọn. May mắn thay, có một số ví dụ mà nhà phát triển có thể sử dụng để đạt được điều đó càng sớm càng tốt. Hãy tiếp tục đọc khi chúng tôi tiết lộ tới 21 menu lớn Bootstrap Responsive trên các ví dụ di chuột 1. Menu Bootstrap 4 Mega với Hiệu ứng di chuộtNền màu xanh nhạt được sử dụng trên trang và nền màu trắng được chọn cho menu làm nổi bật hai phần riêng biệt. Ngoài ra, menu kết hợp các liên kết đơn giản, menu thả xuống và menu lớn cho các tùy chọn khác nhau và điều hướng dễ dàng. Hiệu ứng di chuột cũng rõ ràng trong nhiều dịp khác nhau. Chẳng hạn, các mục menu con của các tùy chọn menu được hiển thị khi di chuột vào mục sau. Thứ hai, màu nền của một mục menu thay đổi từ trắng sang xanh nhạt khi di chuột qua mục đó. Nó sử dụng HTML JS và CSS, trong khi tác giả là Mdwaris198 lấy mã 2. Menu Bootstrap MegaXem Pen Responsive Mega Menu – Điều hướng bằng hẻm samir (@samiralley) trên CodePen Menu lớn Bootstrap này cũng đáp ứng. Khi di chuột vào một mục menu, màu nền của nó sẽ thay đổi. Quan trọng không kém, nó hiển thị các mục menu phụ của tùy chọn menu mà bạn di chuột qua Tôi chúng tồn tại. Ngoài một menu lớn, nó còn có các liên kết đơn giản và menu thả xuống. Tác giả của nó là Samir Alley, trong khi các ngôn ngữ là HTML, CSS và JS lấy mã 3. Menu Bootstrap Mega với CSSXem menu Pen Bootstrap Mega với CSS của redfrost (@redfrost) trên CodePen Điều quan trọng cần lưu ý là menu lớn này đơn giản với một vài mục. Nó có một phần logo, một liên kết đơn giản và một menu lớn. Nếu bạn muốn biết các mục con của cái sau, tất cả những gì bạn phải làm là di chuột qua chúng. Chúng có màu xanh nhạt để đảm bảo rằng người dùng không chú ý đến chúng. Nó sử dụng HTML, JS và CSS, trong khi người tạo ra nó là Redfrost lấy mã 4. Mega Menu Trượt xuống khi di chuột với CarouselMã này có nhiều tính năng khiến nó trở nên lý tưởng cho một cửa hàng trực tuyến cần điều hướng tuyệt vời và hơn thế nữa. Khi di chuột qua nó, các mục con của menu lớn sẽ trượt xuống để người dùng nhìn thấy chúng. Thật thú vị, nó cũng có một tính năng đáng chú ý khác, băng chuyền. Nó giúp chủ sở hữu trang web dễ dàng hiển thị các ưu đãi lớn nhất hiện có trên trang web Thương mại điện tử. Nhờ dễ dàng truy cập vào các giao dịch tốt nhất này, có nhiều khả năng chuyển đổi và bán hàng cũng tăng lên. Được tạo bởi maridlcrmn, mã sử dụng HTML, CSS và JS lấy mã 5. Menu thả xuống Bootstrap 3 Mega Thanh điều hướngXem Thanh điều hướng menu thả xuống Pen Bootstrap 3 Mega của Jacob Lett (@JacobLett) trên CodePen Với việc sử dụng thuật ngữ menu thả xuống, rất có thể người ta sẽ loại bỏ nó khi tìm kiếm một menu lớn. Tuy nhiên, đó là một menu lớn tuyệt vời, hoàn hảo nếu bạn có nhiều menu phụ để dễ dàng đặt cho người dùng của bạn dùng một lần mà không ảnh hưởng đến điều hướng trang web của bạn trong quá trình này. Quan trọng không kém, khi di chuột vào tùy chọn menu lớn, các mục con của nó sẽ được hiển thị ngay lập tức. Mã này cũng làm nổi bật mục bạn di chuột vào để biết bạn đang trỏ gì vào mỗi thời điểm tương tác với menu lớn. Công nghệ được sử dụng bao gồm HTML, CSS và JS và người tạo ra nó là Jacob Lett lấy mã 6. Menu Bootstrap 4 Mega khi di chuộtXem Pen Bootstrap 4 Mega Menu on hover của Nick Smith (@smudge02) trên CodePen Đây là một lựa chọn tuyệt vời khác cho ai đó đang tìm kiếm một menu lớn với hiệu ứng lơ lửng. Nó đảm bảo rằng người dùng không gặp khó khăn khi nhìn thấy các mục con của nó. Rốt cuộc, tất cả những gì họ phải làm là di chuột qua nó và chúng sẽ được hiển thị sau một hành động đơn giản như vậy. Nó có một số menu lớn và các liên kết đơn giản. Tiêu đề của các menu phụ có màu sắc khác nhau để dễ dàng phân biệt chúng với các mục con. Nó sử dụng HTML và CSS, trong khi tác giả là Nick Smith lấy mã 7. Bootstrap Responsive Mega Menu trên HoverXem menu mega Bootstrap Pen Responsive của Martin Stanek (@skywalkapps) trên CodePen Đây là mã mà bất kỳ nhà phát triển nào cũng có thể dễ dàng sao chép và dán để đưa ra cả ba khía cạnh được mong đợi từ những ví dụ này. Chẳng hạn, nó đáp ứng rất tốt cho cả màn hình nhỏ và lớn. Ngoài ra, đây là một menu lớn do đó hoàn hảo để chứa nhiều tùy chọn menu và menu phụ một cách gọn gàng. Cuối cùng nhưng không kém phần quan trọng, nó có hiệu ứng lơ lửng; . Tác giả của nó là Lamen và Newt nghịch ngợm, và công nghệ này là sự kết hợp giữa HTML và CSS lấy mã 8. Menu Mega thả xuống đẹp mắt với jQuery và BootstrapMã này là sự kết hợp của một số liên kết và một menu lớn. Đó là sự kết hợp đã được chứng minh là đủ để đưa điều hướng trong trang web của bạn lên một cấp độ hoàn toàn mới. Hiệu ứng lơ lửng đáng chú ý đầu tiên là cách nó làm nổi bật một tùy chọn menu khi chỉ vào nó. Một ví dụ khác là hiển thị các mục con của menu lớn ngay khi bạn di chuột qua chúng. Các mục con và tiêu đề của chúng có màu sắc khác nhau để bạn dễ dàng phân biệt những gì cần nhấp vào. Mong đợi một phần logo là tốt. Nó sử dụng HTML, CSS và JS để thực hiện tất cả điều này lấy mã 9. Bootstrap Responsive Mega Menu trên HoverCác tùy chọn menu có màu nền xanh lam, trong khi màu nền của các mục con có màu trắng. Mã này cũng chứa một số menu lớn để điều hướng tuyệt vời. Khả năng phản hồi và các menu phụ trong các mục con cũng khá ấn tượng. Nó sử dụng HTML và CSS, trong khi tác giả là kybarg lấy mã 10. Menu Mega Bootstrap đáp ứngW3bài học. info cũng đã xuất bản một đoạn mã đáng để nhà phát triển chú ý, những người muốn tạo một menu lớn dễ điều hướng mà không cần nỗ lực nhiều. Cần lưu ý rằng hiệu ứng lơ lửng thể hiện rõ khi trỏ con trỏ của bạn đến một tùy chọn menu nhất định. Màu sắc của nó thay đổi từ xám sang đen, do đó nổi bật. Tuy nhiên, đó là tất cả hiệu ứng lơ lửng mà bạn sẽ nhận được. Tác giả của nó là Karthikeyan K, trong khi các ngôn ngữ là HTML, CSS và JS lấy mã 11. Tốt hơnNavXem Pen BetterNav của Georgi Demirev (@nicotinell) trên CodePen Bạn đã bao giờ rơi vào tình huống yêu cầu bạn tạo một menu với nhiều tùy chọn và menu phụ chưa? . Nó cho phép bạn đặt các danh mục chính trên menu chính. Sau đó, mã bao gồm các danh mục con tương ứng và nếu chúng có thể được phân loại thêm, cho phép bạn thêm các mục con khác, v.v. Bạn có thấy khả năng thêm nhiều tùy chọn như vậy trên cùng một menu không? . Tuy nhiên, bạn phải nhấp vào menu lớn để có các tùy chọn và menu phụ của nó. Nó sử dụng HTML, JS và CSS, trong khi người tạo ra nó là Georgi Demirev lấy mã 12. Menu Mega đáp ứng BootstrapXem Pen Bootstrap Responsive Mega Menu của Subodh Ghulaxe (@subodhghulaxe) trên CodePen Menu lớn này phản hồi nhanh và cũng có thể chứa nhiều thông tin. Bạn có thể sử dụng nó để giới thiệu các giao dịch sinh lợi mới nhất của mình vì nó có một phần dành cho băng chuyền có thể phục vụ đúng mục đích đó. Nó cũng chứa các blog mới nhất để đảm bảo rằng độc giả của bạn có thể dễ dàng đọc chúng. Không thể không nhắc đến bản đồ Google và các chi tiết bổ sung. Quan trọng không kém, tất cả các mục phụ và thông tin trong menu lớn của bạn được hiển thị bằng cách di chuột qua nó. Được tạo bởi Subodh Ghulaxe, mã sử dụng HTML, CSS và JS lấy mã 13. Menu Mega đáp ứng BootstrapXem menu lớn đáp ứng Pen Bootstrap của Daniela Iordache (@Iordache) trên CodePen Bên cạnh việc chia sẻ tên với menu lớn trước đó, các tính năng của hai ví dụ này cũng có một điểm tương đồng nổi bật. Mọi thứ đều giống nhau, bao gồm menu lớn, menu thả xuống và các liên kết khác nhau. Có một thanh tìm kiếm là tốt. Đối với bản thân menu lớn, nó có bản đồ Google, các blog gần đây và băng chuyền cho các giao dịch khác nhau. Trên thực tế, người ta có thể nói mà không sợ mâu thuẫn rằng cả hai đều giống nhau, chỉ khác tác giả. Công nghệ được sử dụng bao gồm HTML, CSS và JS và người tạo ra nó là Daniela Lordache lấy mã 14. Mega Menu Trượt xuống khi di chuột với CarouselXem trình đơn Pen Mega trượt xuống khi di chuột bằng băng chuyền của Buğra Yazar (@bugrayazar) trên CodePen Đúng như tên gọi, menu lớn này chắc chắn sẽ trượt xuống khi di chuột qua nó để hiển thị nội dung của nó, bao gồm cả menu phụ. Nó có thể chứa rất nhiều thông tin, không quên tổ chức tuyệt vời khi ở đó. Nhờ có băng chuyền, thật hoàn hảo để trang web Thương mại điện tử của bạn hiển thị các giao dịch khác nhau mà bạn cần người dùng dễ dàng nhận thấy và khả năng phản hồi cũng đáng được đề cập. Nó sử dụng HTML, CSS và JS, trong khi tác giả là Bugra Yazar lấy mã 15. Bootstrap Mega Menu với nhiều cột thả xuốngXem menu lớn Pen Bootstrap với nhiều cột thả xuống của mahesh bhagat (@mymahesh11) trên CodePen Menu lớn này có thể chứa khá nhiều, không còn nghi ngờ gì nữa. Ngoài ra, nó đưa tổ chức lên một tầm cao hơn bằng cách giới thiệu các cột. Mỗi cột đại diện cho một danh mục hoặc chủ đề khác nhau để dễ dàng truy cập. Các mục phụ của nó sẽ trượt xuống ngay khi bạn di chuột qua tùy chọn và điều đó đủ để thu hút sự chú ý của khách truy cập. Băng chuyền với các giao dịch thông báo cho người dùng rằng các ưu đãi tồn tại, khơi dậy sự tò mò để nghĩ về chúng. Đó là một bước tiến gần hơn đến chuyển đổi hoặc bán hàng, không còn nghi ngờ gì nữa. Tác giả của nó là Mahesh Bhagat và công nghệ này là sự kết hợp của HTML, JS và CSS lấy mã 16. MegaMenu di chuộtXem Pen MegaMenu Hover của Divyesh Joshi (@divyesh-joshi) trên CodePen Menu này hoàn toàn rõ ràng vì nó là tùy chọn duy nhất mà mã chứa. Menu có những thứ cần thiết để chứa nhiều mục phụ và thông tin. Việc dễ dàng truy cập vào các mục này cũng đáng chú ý vì tất cả những gì người dùng phải làm là di chuột qua tùy chọn menu. Trong những trường hợp như vậy, thông tin bổ sung sẽ khó bị bỏ qua. Bên cạnh các danh mục và danh mục phụ, nó còn chứa một băng chuyền và một biểu mẫu mà người dùng cần biết ngay khi họ truy cập trang web của bạn. Mỗi cấp độ menu có màu sắc riêng để dễ dàng nổi bật. Tác giả là Divyesh Joshi và nó sử dụng HTML, CSS và JS để thực hiện tất cả điều này lấy mã 17. Menu Mega đáp ứng (Bootstrap)Xem Pen Responsive Mega Menu (Bootstrap) của Peter (@peterdillon) trên CodePen Tùy chọn này là hoàn hảo cho ai đó đang tìm kiếm một menu lớn độc đáo. Hiệu ứng di chuột đầu tiên bạn sẽ nhận thấy là khi trỏ con trỏ vào một tùy chọn menu nhất định. Màu nền của nó thay đổi từ đen sang trắng. Đó cũng là cách bạn làm quen với người đang hoạt động. Khi nhấp vào nó, các mục phụ và nhiều menu phụ khác nhau sẽ bật lên. Cũng cần lưu ý rằng sẽ có hiệu ứng hoạt hình khi di chuột vào các mục con. Nó sử dụng HTML, JS và CSS, trong khi tác giả là Peter lấy mã 18. Thanh điều hướng menu Bootstrap 4 Mega với các biểu tượngMenu mega đáp ứng Bootstrap tiếp theo của chúng tôi khi di chuột thể hiện rất nhiều sự đơn giản trong nháy mắt. Nó cũng có thể chứa nhiều mục menu cùng một lúc. Ngoài ra, nó kết hợp các nhãn và biểu tượng, làm cho menu lớn hấp dẫn trực quan. Hiệu ứng di chuột dẫn đến thay đổi màu chữ của những gì bạn đã chọn từ đen sang đỏ. Tác giả của nó là Omkar Bailkeri, trong khi các ngôn ngữ là HTML, CSS và JS lấy mã 19. Menu thả xuống Bootstrap 4Mã này kết hợp một menu lớn và các liên kết đơn giản để đảm bảo rằng mọi khách truy cập đều dễ dàng điều hướng trang web. Nhờ hiệu ứng di chuột, người ta có thể dễ dàng biết mục menu mà con trỏ đang trỏ tới. Nó sử dụng HTML và CSS, trong khi người tạo ra nó là BBBootstrap lấy mã 20. Bootstrap Responsive Mega Menu trên HoverMột lần nữa, chúng ta lại có một ví dụ tuyệt vời khác về menu siêu đáp ứng bootstrap khi di chuột. Đúng như tên gọi của nó, nó hoàn hảo cho mọi kích thước màn hình. Menu lớn cũng có thể chứa nhiều danh mục và danh mục con. Ngoài ra, nó có hiệu ứng lơ lửng khó bỏ lỡ. Được tạo bởi newbedev, mã sử dụng HTML và CSS lấy mã 21. Menu Mega đáp ứng bằng cách sử dụng React BootstrapCuối cùng nhưng không kém phần quan trọng là ví dụ này của Grouparoo. Nó khá đơn giản, nhưng bạn có thể yên tâm rằng nó sẽ không làm bạn thất vọng. Nó sử dụng hiệu ứng lơ lửng để làm nổi bật tùy chọn đã chọn. Công nghệ được sử dụng bao gồm HTML, CSS (SASS) và JS, và người tạo ra nó là Teal Larson |
