Bài tập

Hướng dẫn tạo menu Slide Down Box với jQuery và CSS3

avatar
Huy Erick
00:00 12/04/2024

Trong bài viết này, chúng ta sẽ khám phá cách tạo ra một menu slide box độc đáo bằng sử dụng jQuery và CSS3. Ý tưởng là mỗi khi di chuột vào một mục menu,...

Trong bài viết này, chúng ta sẽ khám phá cách tạo ra một menu slide box độc đáo bằng sử dụng jQuery và CSS3. Ý tưởng là mỗi khi di chuột vào một mục menu, nó sẽ mở rộng và hiển thị một danh sách menu con cùng với một hình ảnh nhỏ với hiệu ứng mượt mà. Ngoài ra, các menu con cũng sẽ trượt từ trái qua phải hoặc ngược lại, tuỳ thuộc vào vị trí mà người dùng di chuột qua.

Bước 1: Xây dựng mã HTML

Xem thêm:

Trước tiên, chúng ta cần xây dựng cấu trúc HTML của menu. Chúng ta sử dụng một danh sách không theo thứ tự (

    ) để chứa các mục liên kết chính và một phần tử
    để chứa các menu con.

    Bước 2: Khai báo CSS

    Tiếp theo, chúng ta sẽ khai báo CSS cho các phần tử trong menu. Đầu tiên, cho phần tử

      : 
      ul {   list-style-type: none;   margin: 0;   padding: 0; }

      Tiếp theo, cho các mục liên kết chính:

      ul li a {   text-decoration: none;   outline: none; }

      Chúng ta sẽ sử dụng thuộc tính position: absolute để định vị các phần tử con bên trong menu. Điều này giúp các phần tử con di chuyển một cách tương đối, không bị ảnh hưởng bởi các phần tử khác trong trang.

      Tiếp theo, khai báo CSS cho các hình ảnh:

      ul li a img {   width: 50px;   height: 50px;   border: none;   box-shadow: 0px 0px 4px #000; }

      Bước 3: Thêm mã JavaScript

      Cuối cùng, chúng ta sẽ thêm mã JavaScript để tạo hiệu ứng menu slide box. Khi di chuột vào một menu, hình ảnh sẽ phóng to và các menu con sẽ hiển thị. Nếu một menu là menu cuối cùng, nó sẽ trượt sang bên trái, ngược lại các menu khác sẽ trượt sang bên phải.

      // Mã JavaScript

      Và đây là kết quả, một menu slide box tuyệt vời! Hy vọng bạn thích hiệu ứng này và đã học được điều gì đó hữu ích.

BÀI LIÊN QUAN
1