|
| Nguồn: jagodesain.com |
Màn hình menu điều hướng trên điện thoại di động được tạo ra để giúp người dùng nhấp vào các menu quan trọng trên blog dễ dàng hơn như nút menu điều hướng, nút tìm kiếm, nút chế độ tối và các nút khác
Như chúng ta biết người dùng bình thường sử dụng điện thoại thông minh bằng một tay và ngón tay cái gặp khó khăn khi lên đầu (tiêu đề) trên một trang, đó là lý do tại sao menu điều hướng trên thiết bị di động được chuyển xuống dưới cùng. Khái niệm này cũng được áp dụng trong một số ứng dụng nổi tiếng như Instagram , một số trình duyệt di động , Pinterest , Youtube , v.v.
Nhưng đối với những người bạn không thích sự xuất hiện của menu điều hướng trên thiết bị di động trong mẫu này và muốn giữ tiêu đề cố định trên chế độ xem trên thiết bị di động, bạn có thể thay đổi và xóa một số mã CSS bên dưới để menu điều hướng không ' t xuất hiện:
Tất cả mã CSS bên dưới đều có và được thêm vào phần CSS @media screen và (max-width: 640px) { , mã có nghĩa là nó chỉ hoạt động khi chiều rộng màn hình tối đa là 640px
Đầu tiên - trả lại tiêu đề cố định
Trong màn hình đặt mã CSS @media và (max-width: 640px) { tìm mã bên dưới và thay đổi nó theo hướng dẫn:
.header{padding:0 20px;position:absolute;}
Delete the section of code marked "position: absolute;" so the code looks like this:
.header{padding:0 20px;}Đoạn mã trên là để trả lại tiêu đề trở lại dính, tiếp theo
Trả về biểu tượng điều hướng và thêm biểu tượng tìm kiếm vào tiêu đề
Trong bài hiển thị biểu tượng điều hướng được chuyển thành nút quay lại trang chủ , để thay đổi, vui lòng tìm và xóa bộ sưu tập mã bên dưới:
.singleItem .navicon .nav{display:none;transform: rotate(180deg);-webkit-transform: rotate(180deg)}
.singleItem .navicon .nav.home{display:block}
.singleItem .navicon .nav i:nth-child(1){width:45%;margin-left:55%;-webkit-transform:translateY(3px) rotate(40deg);transform:translateY(3px) rotate(40deg)}
.singleItem .navicon .nav i:nth-child(2){width:95%;margin-left:0%}
.singleItem .navicon .nav i:nth-child(3){width:10%;margin-left:62.5%;background-color:transparent;-webkit-transform:translateY(0px) rotate(-40deg);transform:translateY(0px) rotate(-40deg)}Để biểu tượng nút tìm kiếm xuất hiện, vui lòng thay đổi (thay thế) mã bên trên bằng mã css bên dưới:
.header .navicon .navSearch{display:block;}Thứ hai - Ẩn menu điều hướng trên điện thoại di động
Phương pháp này không xóa vĩnh viễn mã điều hướng di động mà chỉ ẩn lại mã này. Tìm kiếm rồi xóa mã bên dưới:
/* Navigation mobile show */
.navigation-mobile{background-color:#fefefe;box-shadow:0 -10px 20px 0 rgba(30,30,30,.05);bottom:0}
.navigation-mobile li{visibility:visible;opacity:1}
.navigation-mobile .top-link a{display:block;position:relative;right:auto;bottom:auto;width:auto;height:auto;background-color:transparent;box-shadow:none}
The second code to delete:
.dark-mode .navigation-mobile svg{fill:$(night.colors)}
.dark-mode .navigation-mobile svg.line, .dark-mode .navigation-mobile .top-link svg.line{fill:none;stroke:$(night.colors)}
Xem trước
Vui lòng lưu mẫu của bạn và xem kết quả. Để biết ví dụ về ứng dụng của nó, bạn có thể mở bài đăng này trên điện thoại thông minh của mình: