HIỆU ỨNG ĐỘNG MẪU MỞ RỘNG FORM TÌM KIẾM VỚI CSS3

Form tìm kiếm luôn luôn là phần quan trọng nhất cho mọi trang web, chính vì thế mà việc thiết kế cho form này luôn luôn là ưu tiên hàng đầu. Hôm nay mình sẽ chia sẻ cho các bạn thêm một form tìm kiếm với hiệu ứng mở rộng cực cool, phù hợp với tất cả các giao diện hiện nay.

HTML

Demo

Cấu trúc html cho form tìm kiếm này đơn giản như sau :

CSS

Trong phần này, đầu tiên chúng ta sẽ định dạng cho khung chứa form tìm kiếm.

 

Với đoạn css bên trên , thì thanh tìm kiếm sẽ được đặt tại vị trí trung tâm của trang web. Đây là đoạn css mà các bạn có thể tùy chỉnh vị trí cho phù hợp với website của mình. Các bạn tiếp tục định dạng cho phần còn lại của form với đoạn css bên dưới.

jQuery

Để form tìm kiếm có thể mở ra và thu lại được thì cần có sự hỗ trợ của đoạn script bên dưới.

Chúc các bạn thành công !

Please follow and like us:

Leave Comment

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *