Từng bước thay đổi / xóa điều hướng di động trên Template Median UI
Source: jagodesain.com |
Màn hình menu điều hướng trên điện thoại di động được thực hiện để 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 Instagram, beberapa mobile browser, Pinterest, Youtube vân vân
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 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 and (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 screen and (max-width:640px){ tìm mã bên dưới và thay đổi mã theo hướng dẫn:
.header{padding:0 20px;position:absolute;}
Hapus bagian kode yang ditandai "position:absolute;" sehingga kodenya menjadi seperti ini:
.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ế) đoạn mã 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 thiết bị 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 nó lại. Tìm kiếm sau đó 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}
Kode kedua yang harus dihapus:
.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)}
Đăng nhận xét