Bạn muốn tạo menu bên trượt và đáp ứng trong Divi?
Khi tạo một Website, bạn thường băn khoăn không biết nên tạo loại tiêu đề nào. Được sử dụng nhiều nhất trên web là thanh menu ngang ở trên cùng, nhưng cũng có các tùy chọn khác, chẳng hạn như menu trượt.
Menu trượt thường giúp bạn giới hạn không gian chiếm bởi tiêu đề chung. Vì vậy, bạn có thể để một menu trượt xuất hiện khi khách nhấp vào biểu tượng bánh hamburger ở góc trên bên phải.
Do đó, việc sử dụng menu dạng trượt giúp bạn thêm tương tác vào Website.
Do đó, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một cái bằng cách sử dụng Trình tạo chủ đề của Divi.
Hãy bắt đầu nào!
khảo sát
Trước khi đi sâu vào hướng dẫn này, trước tiên chúng ta hãy xem kết quả mà chúng ta sẽ nhận được.
Đi tới Trình tạo chủ đề và tạo tiêu đề chung
Đi tới Trình tạo chủ đề
Để bắt đầu, hãy chuyển đến Trình tạo chủ đề từ menu Divi trong bảng điều khiển WordPress của bạn và nhấp vào “Thêm tiêu đề chung”.
Tạo tiêu đề chung
Tiếp tục bằng cách chọn 'Tạo tiêu đề chung'.
Tạo kiểu tiêu đề
Cài đặt phần
Màu nền
Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và làm cho màu nền trong suốt.
- Nền: rgba (255,255,255,0)
khoảng cách
Chuyển sang tab Kiểu và xóa tất cả các lề dưới cùng và trên cùng.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Poste
Tiếp theo, chúng tôi sẽ thay đổi vị trí của phần bằng cách chuyển đến tab nâng cao và thay đổi cài đặt vị trí.
- Chức vụ: Cố định
- Vị trí: Trung tâm hàng đầu
Thêm dòng đầu tiên
Cấu trúc của cột
Khi bạn đã hoàn tất cài đặt phần, hãy thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:
- Chiều rộng tối đa: 97%
- Chiều rộng tối đa: 100%
khoảng cách
Thay đổi cài đặt giãn cách.
- Ký quỹ nội bộ cao nhất: 1%
- Lề nội bộ dưới cùng: 0px
yếu tố chính
Tiếp theo, chuyển đến tab nâng cao và thêm hai dòng mã CSS vào thành phần chính của dòng. Điều này sẽ giúp chúng ta căn chỉnh theo chiều dọc nội dung của cột trong hàng của chúng tôi.
display: flex;
align-items: center;
Thêm mô-đun Hình ảnh vào cột 1
Tải logo
Đã đến lúc thêm mô-đun, bắt đầu với mô-đun Hình ảnh trong cột 1. Tải lên biểu trưng của bạn.
Thêm mô-đun Văn bản vào cột 3
Thêm 3 khoảng trắng vào khu vực nội dung
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Màu nền
Sửa đổi màu nền của mô-đun.
- Nền: rgba (0,0,0,0.04)
Cài đặt văn bản
Tiếp theo, chuyển sang tab Style và loại bỏ chiều cao dòng văn bản. Điều này sẽ giúp chúng tôi có toàn quyền kiểm soát các phạm vi mà chúng tôi đã thêm.
- Chiều cao dòng văn bản: 0em
kích thước
Chúng tôi sẽ sửa đổi các thông số định cỡ mô-đun.
- Chiều rộng tối đa: 120 pixel
- Căn chỉnh văn bản: phải
khoảng cách
Và chúng tôi sẽ hoàn thành các tham số của mô-đun bằng cách biến mô-đun thành một hình vuông. Đối với điều này, chúng tôi sẽ sử dụng các giá trị đệm tùy chỉnh trong cài đặt khoảng cách.
- Đỉnh lề bên trong: 40px
- Lề nội bộ dưới cùng: 60px
- Lề bên trong bên trái: 40px
- Lề trong bên phải: 40px
Thêm dòng thứ hai
Cấu trúc của cột
Hàng tiếp theo! Chúng tôi sẽ sử dụng dòng này để thiết kế toàn bộ menu trượt của chúng tôi. Sử dụng cấu trúc cột sau:
Màu nền
Không cần thêm mô-đun, hãy mở cài đặt hàng và thay đổi màu nền như sau:
- Nền: # e7e0e2
Hình nền
Chúng tôi cũng sử dụng một hình nền có hoa văn. Bạn có thể sử dụng một mẫu nền mà bạn chọn.
- Kích thước hình nền: kích thước thực tế
- Vị trí hình nền: trung tâm
- Lặp lại hình nền: Lặp lại
kích thước
Tiếp theo, chuyển sang tab Kiểu và thay đổi cài đặt kích thước cho phù hợp:
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Khoảng cách cột: 1
- Chiều rộng tối đa: 20% (máy tính để bàn), 40% (máy tính bảng), 60% (điện thoại)
- Chiều cao: 100vh
khoảng cách
Đồng thời thay đổi cài đặt giãn cách trên các kích thước màn hình khác nhau.
- Lợi nhuận nội bộ của hội nghị thượng đỉnh: 10 vw (máy tính để bàn), 30 vw (máy tính bảng), 40 vw (điện thoại)
Biên giới
Và hoàn thành các thông số đường bằng cách thêm một đường viền bên trái.
- Chiều rộng đường viền bên trái: 10px
- Màu viền trái: # 24394a
- Kiểu viền trái: Đôi
Thêm mô-đun Văn bản vào cột
Thêm nội dung
Đã đến lúc thêm mục menu Mô-đun văn bản đầu tiên! Thêm bản sao vào hộp nội dung.
Thêm một liên kết
Tiếp tục bằng cách thêm một liên kết có liên quan vào mục menu.
- URL liên kết mô-đun: #
Màu nền
Sau đó, thay đổi màu nền.
- Nền: rgba (216,210,212,0.35)
Cài đặt văn bản
Tiếp theo, chuyển sang tab Style'3 và thay đổi cài đặt văn bản như sau:
- Phông chữ văn bản: Domine
- Văn bản nhẹ nhàng: Văn bản in đậm
- Văn bản Màu Văn bản: # 000000
- Văn bản Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Căn chỉnh văn bản: Căn giữa
khoảng cách
Hoàn thành cài đặt mô-đun bằng cách thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.
- Biên dưới cùng: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lợi nhuận nội bộ cao nhất: 1vw
- Lề nội bộ dưới cùng: 1vw
Sao chép mô-đun văn bản (1 mô-đun cho mỗi mục menu)
Khi bạn đã hoàn thành mô-đun văn bản mục menu đầu tiên, bạn có thể sao chép nó nhiều lần nếu cần. Chỉ cần đảm bảo rằng các mô-đun của bạn không vượt quá chiều cao của cửa sổ.
Chỉnh sửa nội dung mô-đun Văn bản trùng lặp và liên kết
Sửa đổi nội dung và các liên kết của từng mô-đun Văn bản trùng lặp.
Thêm mô-đun nút vào cột
Thêm một bản sao
Mô-đun cuối cùng chúng ta cần trong hàng này là mô-đun Nút. Thêm một bản sao của sự lựa chọn của bạn.
Thêm một liên kết
Cũng thêm một liên kết.
- URL liên kết nút: #
sự liên kết
Chuyển sang tab Kiểu và thay đổi căn chỉnh nút.
- Căn chỉnh nút: căn giữa
Cài đặt nút
Tiếp tục bằng cách tùy chỉnh mô-đun Nút như sau:
- Sử dụng các kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 0,7 vw (máy tính để bàn), 1,5 vw (máy tính bảng), 2,5 vw (điện thoại)
- Màu văn bản của nút: # 000000
- Nút nền: rgba (0,0,0,0)
- Màu viền nút: # 24394a
- Nút Border Radius: 0 pixel
- Khoảng cách chữ cái nút: 4px
- Nút Phông chữ: Mở Không có
- Nút Soft Light: Chữ in đậm
- Sao chép nút kiểu: TT
khoảng cách
Và hoàn thành cài đặt mô-đun bằng cách thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.
- Lợi nhuận trên cùng: 5vw
- Lề nội bộ cao nhất: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lề bên trong đáy: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lề bên trong bên trái: 1,8 vw (máy tính để bàn), 3 vw (máy tính bảng), 4 vw (điện thoại)
- Lề trong bên phải: 1,8 vw (máy tính để bàn), 3 vw (máy tính bảng), 4 vw (điện thoại)
Thêm chức năng trượt
Thêm CSS ID vào mô-đun văn bản biểu tượng menu
Bây giờ chúng ta đã có tất cả các yếu tố, đã đến lúc tạo hiệu ứng menu trượt đáp ứng! Đầu tiên, mở mô-đun Văn bản (chứa phạm vi) trong cột thứ ba của hàng đầu tiên của bạn và sử dụng ID CSS tùy chỉnh trong tab nâng cao. Chúng tôi sẽ sử dụng CSS ID này để tạo một hàm nhấp chuột trong mã của chúng tôi.
- ID CSS: slide-in-open
Thêm lớp CSS vào dòng số 2
Sau đó, mở dòng thứ hai, chuyển đến tab nâng cao và thêm một lớp CSS tùy chỉnh. Khi nhấp vào, dòng sẽ trượt.
- Lớp CSS: slide-in-menu-container
Thay đổi vị trí của dòng số 2
Chúng tôi cũng sẽ đặt lại vị trí dòng này. Lưu ý cách độ lệch ngang khớp với chiều rộng dòng trên các kích thước màn hình khác nhau trong cài đặt định cỡ.
- Chức vụ: Tuyệt đối
- Vị trí: Trên cùng bên phải
- Độ lệch ngang: -20% (máy tính để bàn), -40% (máy tính bảng), -60% (điện thoại)
Thay đổi độ mờ của dòng 2
Và đưa độ mờ về 0 ở trạng thái mặc định.
opacity: 0;
Thêm mô-đun Mã vào cột thứ hai của hàng đầu tiên
Chèn mã CSS
Để tạo hiệu ứng hàm nhấp chuột và tạo kiểu cho biểu tượng bánh hamburger, chúng tôi sẽ cần một số mã CSS. Thêm mô-đun mã vào cột thứ hai của hàng đầu tiên của bạn và đặt các dòng mã CSS sau giữa các thẻ kiểu, như bạn có thể thấy trong màn hình in bên dưới:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Chèn mã JQuery
Chúng tôi cũng sẽ cần thêm một số JQuery cho chức năng nhấp chuột. Hãy chắc chắn rằng bạn đặt mã giữa các thẻ tập lệnh , như bạn có thể thấy trong màn hình in bên dưới:
jQuery (function ($) {$ ('# slide-in-open'). click (function () {$ (this) .toggleClass ('open'); $ ('. slide-in-menu-container') .toggleClass ('slide-in-menu');});});
Lưu các thay đổi của trình tạo chủ đề và hiển thị kết quả trên trang web
Khi bạn đã hoàn thành tất cả các yếu tố của tiêu đề chung, tất cả những gì bạn phải làm là lưu tất cả các thay đổi và hiển thị kết quả trên trang web của bạn!
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả lần cuối.
Kết luận
Kết luận, trong bài viết này, chúng tôi đã hướng dẫn bạn cách sử dụng trình tạo chủ đề của Divi để tạo menu trượt đáp ứng. Đối với điều này, chúng tôi đã kết hợp các yếu tố và tùy chọn tốt nhất được tích hợp sẵn của Divi với mã chức năng nhấp tùy chỉnh. Vì vậy, nó cho phép bạn tập trung vào việc thiết kế menu trượt ra và để mã quản lý phần chức năng của tiêu đề chung!
Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.
