Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Tạo thông báo dạng Popup giống với Facebook
Tạo thông báo dạng Popup giống với Facebook
Nguyễn Trung Hiếu
Share Code Web Company 2014

Tạo thông báo dạng Popup giống với Facebook

Bài viết này sẽ hướng dẫn cho bạn làm thế nào để tạo ra một thông báo dạng Popup giống với Facebook sử dụng Jquery, HTML và CSS, và chính nhờ các thành phần của CSS sẽ giúp cải thiện thiết kế web tốt hơn. Đây là tính năng cần thiết nhất cho các dự án web mạng xã hội nếu như các bạn muốn tăng tính tương tác với người dùng

facebook notification popup with css

Thiết kế Menu HTML

Đầu tiên chúng ta thiết kế một menu đơn giản như đoạn code dưới đây:

Sau đó add CSS này vào:

Với 2 đoạn code trên, chúng ta sẽ được như sau:
facebook links

Thiết kế Notification

Chúng ta sẽ thiết kế HTML như hình vẽ khung bên dưới để các bạn dễ hình dung:
popup like facebook

Và thêm đoạn css sau:

Và thêm đoạn CSS cho nút hiển thị số thông báo:

Jquery làm nốt việc còn lại

Cuối cùng chúng ta sẽ sử dụng jquery để nó làm nốt việc còn lại là ẩn hiện các thành phần khi chúng ta click vào xem:

Download Code

Vậy là xong rồi đấy, hy vọng với khung HTML đơn giản bên trên, sẽ giúp ích cho các bạn trong những dự án thiết kế website thêm đẹp hơn nhé. Chúc các bạn thành công!


Loạt bài viết về Facebook style

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}