Create menu xuất hiện trái ( phải ) trong website

Menu ngày càng đa dạng và phổ biến, menu không còn đơn thuần nằm ngang dạng truyền thống nữa mà chúng còn có thể được tùy biến để xuất hiện từ trái qua, phải qua hay thậm chí từ trên xuống hoặc từ dưới lên và kiểu toàn màn hình cũng có nữa. Vậy thì để làm kiểu menu như vậy thì hôm nay mình sẽ viết bài hướng dẫn các bạn làm menu cách đơn giản nhé.

THỨ TỰ CÁC BƯỚC LÀM

Bước 1: Dựng HTML

<div id="popup">
    <div class="popup">
 <!-- Nội dung bạn muốn chèn -->
    </div>
</div>

Phân tích:

#popup là thằng cha bao gồm tất cả các thẻ còn lại nằm trong nó. Nhiệm vụ của #popup chính là cái nền màu đen đen toàn bộ website bạn nhìn thấy được khi click vào cái chuông thông báo ấy.
.popup chính là cái menu có nền màu trắng xuất hiện từ phía phải sang khi bạn click cái chuông. Toàn bộ cái gì cần nhét vào đây để hiển thị thì bạn cho hết vào <!– Nội dung bạn muốn chèn –> nhé. Có thể là hình ảnh, text, dropdown menu hay bất kì cái gì bạn muốn.

Nếu như bạn chưa rõ nên chèn code này ở đâu để không bị lỗi hoặc bạn mới bập bõm lập trình thì mình khuyên tốt nhất là cho toàn bộ HTML trên ngay sau thẻ mở <body> nhé. Nếu không tìm thấy <body>thì hãy tìm <body là nhất định sẽ ra vì sau nó còn có class hay id gì kèm theo chẳng hạn.

Bước 2: Viết CSS cho đống HTML bên trên

Dưới đây là toàn bộ CSS cho phần tử popup mình đã tạo ở trên, sẽ có chú thích ngay bên cạnh 1 số thuộc tính nhé.

#popup {
    position: fixed;
    top: 0;
    /* Đặt giá trị 0 cho top, bottom, left, right để background đen sẽ dàn đều ra toàn bộ website */

    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    /* Đặt độ trong suốt là 0 tức không hiển thị trên màn hình */

    visibility: hidden;
    /* Ẩn tạm thời #popup */

    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    /* Đặt z-index - thứ tự ưu tiên hiển thị của phần tử */

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#popup.active {
    opacity: 1;
    visibility: visible;
}

#popup .popup {
    background: #fff;
    width: 320px;
    position: fixed;
    top: 0;
    right: -320px;
    /* Đặt -320px chính là giá trị của độ rộng .popup */

z-index: 999999999;
    height: 100%;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#popup .popup.active {
    right: 0;
    /* Làm xuất hiện .popup bằng cách đặt lại giá trị là 0 thì width của .popup sẽ hiển thị hết */

    opacity: 1;
    visibility: visible;
}

Ở CSS bên trên mình viết cho cái popup (menu) này xuất hiện từ phải qua. Nếu bạn muốn cho menu xuất hiện từ trái qua thì chỉ cần thay đổi và thêm bớt các giá trị vị trí như top, bottom, left, right sao cho hợp lý là được. Còn nếu muốn phá cách cho menu xuất hiện từ dưới lên hay từ trên xuống thì ngoài việc thay đổi 4 thuộc tính vị trí, bạn phải đổi width (độ rộng) thành height (chiều cao) vì nó từ trên xuống, dưới lên thì phải dùng chiều cao đúng không?!

Và dĩ nhiên, toàn bộ CSS sẽ đặt trong cặp thẻ <style>Nội dung CSS</style> là chung chung. Đối với Blogspot, bạn đặt trước ]]></b:skin>.

Bước 3: Khởi tạo Jquery

$(document).ready(function() {
    $(".bell-noti").click(function() { // Gán event cho phần tử có class là .bell-noti
        $("#popup, .popup").addClass("active"); // Thêm class .active cho #popup và .popup, để ý CSS phía trên thì class .active này sẽ kích hoạt #popup, .popup hiện lên
    });
});
$(document).mouseup(function(e) {  // Hiểu đơn giản là khi click chuột ra ngoài menu thì nó sẽ tự ẩn đi, khá tiện lợi khi không phải tạo thêm 1 nút để ẩn menu
    if (!$(".popup").is(e.target) & amp; & amp; $(".popup").has(e.target).length === 0) {
        $("#popup, .popup").removeClass("active");
    }
});

Bước 5: Tạo phần tử nhận click

Bản chất chính là tạo ra 1 nút hay text… để khi click vào phần tử đó thì menu của chúng ta sẽ hiện ra. Cái này tùy theo sự sáng tạo của bạn. Nếu như website của mình thì chính là cái chuông góc phải trên cùng website. Bạn hoàn toàn có thể tạo nút bấm khác. Cách làm là trong nút bấm đó phải chứa class .bell-noti chính là class đã được gán event click ở bước 4.

Ví dụ website mình:

<a class="bell-noti" href="javascript:void(0)"><i class="fa fa-bell-o"></i></a>

CHUYÊN MỤC FIX BUGS

Nếu như bạn không làm thành công, hãy xem thử các mục sau:

Bạn dùng sai các selectors tức là ở HTML là 1 cái và khi viết CSS hay khởi tạo Jquery lại là 1 cái khác.
Để ý các thẻ đóng và mở ở HTML đã đủ và đúng chưa?
Bạn có dùng sai thuộc tính hay đặt giá trị (value) sai khi viết CSS không?
Website của bạn đã có thư viện Jquery chưa? Nếu chưa có thì thêm dòng sau vào nhé và tuyệt đối lưu ý là phải đặt thư viện Jquery trước code của bước 4 thì code bước 4 mới hoạt động được nhé. Thư viện: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

LỜI KẾT

Chỉ qua 5 bước vô cùng đơn giản, mình hi vọng các bạn có thể tự áp dụng và tạo ra menu độc đáo cho riêng mình nhé. Bài viết yêu cầu mọi người đã có kiến thức cơ bản về HTML, CSS từ trước nên mình không viết hay phân tích quá kĩ từng cú pháp hay thuộc tính được. Nếu có bất kì thắc mắc hay khó hiểu chỗ nào trong bài viết thì để lại bình luận ngay phía dưới nhé.