CSSJquery

Tạo menu xuất hiện từ trái (phải) qua trong website

Demo: Click vào

Tạo menu xuất hiện từ trái (phải) qua phổ biến khi làm web

Ngày nay, việc đa dạng menu ngày càng phổ biến, tức là 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. Nếu bạn đã ghé thăm nhiều blog/website thì chắc cũng đã nhìn thấy rồi. 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 cách đơn giản để làm 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>. Trong WordPress thì cho hết CSS vào file có đuôi .css rồi nhét hết vào functions.php nhé.

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 event 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

Okay. Như vậy là xong rồi đó. 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é.

Created by: PCDevShare.Com

29
Bình luận

avatar
9 Comment threads
20 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Số người bình luận
Cuong NguyenĐức Huy BlogLê Bá long ITQuốc Bảo BlogNguyễn Lương Duy Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Hưng Star - IT | 3 comments
Khách
Hưng Star - IT | 3 comments

a liên kết web em với nhé
Hưng Star – IT
WEBSITE CHIA SẼ THỦ THUẬT MIỄN PHÍ
http://www.hungngao.ml

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

#popup là thằng cha..
Hhaha, hữu ích quá a ơi

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Chắc do e là khách vip đó ,hihi

NIỆM STYLE | 3 comments
Khách
NIỆM STYLE | 3 comments

Mới đc 2 bài hả :v

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

cmt nó tự lưu tên em đồ luôn :p tiện ghê á anh

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

thích thế >< cho em vé lk với :p http://www.quocbaoblog.xyz

Star Quốc | 4 comments
Khách
Star Quốc | 4 comments

Qua ủng hộ web mới của ông này còn liên kết không ông cho tui xin với

Nguyễn Lương Duy | 6 comments
Khách
Nguyễn Lương Duy | 6 comments

Liên kết em với :3
Url: https://nguyenluongduy.blogspot.com
Tên: Nguyễn Duy Blog
Title: Blog tâm sự cá nhân.

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

anh share cái hiệu ứng của span khi rê chuột vào giống anh i :p em tò mò quá

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

phía bên phần bạn bè á anh nó hiệu title khi rê chuột vào á

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

ok anh

Đức Huy Blog | 3 comments
Khách
Đức Huy Blog | 3 comments

hello a

Đức Huy Blog | 3 comments
Khách
Đức Huy Blog | 3 comments

e xin 1 liên kết đc ko a Cường

Đức Huy Blog | 3 comments
Khách
Đức Huy Blog | 3 comments

Tên blog: Đức Huy Blogger
Mô tả: Blog chia sẻ thủ thuật – Ảnh bìa facebook
URL: http://duchuyblogger.blogspot.com
dạ đây nha a.

Lê Bá long IT | 1 comments
Khách
Lê Bá long IT | 1 comments

còn chỗ trống liên kết ko v anh