Cách tạo hộp thả xuống Bio bằng CSS

Sau khi tôi phát hành Thiết kế lại Theme Lab gần đây nhất, Tôi đã có một số ý kiến ​​về hộp thả xuống bio bio mà tôi có trong thanh điều hướng của mình. Tôi đã mã hóa nó chỉ bằng một vài dòng CSS cùng với một hình ảnh nền.


Trong bài đăng mẹo CSS này, tôi sẽ nói về cách bạn có thể có hiệu ứng di chuột tương tự trên các trang web của riêng bạn.

Ví dụ

Trong ví dụ này, tôi sẽ sử dụng một widget văn bản trong Hai mươi mười một chủ đề, mặc định mới kể từ WordPress 3.2.

Về cơ bản, một khi bạn di chuột qua div có chứa widget, một div div ẩn ẩn sẽ xuất hiện, đó sẽ là hộp thả xuống sinh học của chúng tôi.

Lưu ý trong hình bên trái, hộp sinh học màu xám sẽ không xuất hiện trừ khi bạn di chuyển div có chứa tiêu đề của Bio Bio Hover..

Bộ chọn

Việc có một bộ chọn CSS duy nhất để tạo kiểu cho div mà bạn muốn đặt hộp thả xuống sinh học của mình là không quan trọng. Về cơ bản, điều này là do nếu bạn không có đánh dấu đi kèm trong div đó, dù sao đi nữa, sẽ không có gì xuất hiện trong trường hợp một trạng thái di chuột.

Mặc dù trong trường hợp của Twenty Eleven, chúng ta có thể thoát khỏi việc chỉ cần tạo kiểu cho lớp bên ngoài, nhưng rất có thể bạn chỉ muốn một hộp thả xuống sinh học trên một trong những div của bạn, vì vậy chúng tôi sẽ nhận được cụ thể hơn.

May mắn thay với WordPress, nó tạo ra rất nhiều bộ chọn CSS độc đáo mà bạn có thể sử dụng. Trong ví dụ này, nó phun ra # test-3 mà chúng tôi sẽ sử dụng từ bây giờ.

Ghi chú: Điều này có thể thay đổi tùy thuộc vào cài đặt WordPress của bạn. Sử dụng một cái gì đó như Công cụ dành cho nhà phát triển Chrome để dễ dàng tìm thấy bộ chọn.

Đánh dấu HTML

Trong ví dụ này, đánh dấu HTML có thể được đặt trực tiếp vào tiện ích văn bản WordPress. Đây là những gì bạn đã đưa vào:

Leland!

Xin chào. Tôi là Leland Fiegel và tôi là người sáng tạo và sáng lập Theme Lab. Tôi thích viết mã, đặc biệt là HTML, CSS và cho WordPress.

Trừ khi bạn muốn đánh cắp danh tính của tôi, bạn có thể muốn thay thế ảnh bằng hình ảnh của chính mình. Bạn cũng có thể tùy ý loại bỏ nó.

Vì chúng tôi đã sử dụng tiện ích WordPress, nên việc đánh dấu ngoại lệ đã được tạo cho chúng tôi. Đây là những gì nó là tổng số.

Di chuột sinh học

Leland!

Xin chào. Tôi là Leland Fiegel và tôi là người sáng tạo và sáng lập Theme Lab. Tôi thích viết mã, đặc biệt là HTML, CSS và cho WordPress.

Nếu bạn làm điều này trên một trang web HTML thô, bạn sẽ cần một số loại trình bao bọc (như cái này là một bên) cho trình đơn thả xuống sinh học với một cái gì đó khác trong đó, nếu không thì không có gì để di chuột xuống để thả xuống.

Ví dụ thực tế: Div thả xuống bio của tôi nằm trong thẻ li trong menu điều hướng của tôi.

Hai dòng đầu tiên của CSS

Hai dòng đầu tiên thực sự thiết lập phần còn lại của nó, vì vậy tôi đặt nó trong phần riêng của nó.

# text-3 {vị trí: tương đối; }
.thả xuống sinh học {display: none; }

Giải trình

  • Dòng đầu tiên: Chúng tôi đặt trình bao bọc của trình đơn thả xuống sinh học để có định vị tương đối. Điều này giúp dễ dàng định vị hộp thả xuống sinh học gần hơn với trình bao bọc gốc.
  • Dòng thứ hai: Điều này về cơ bản làm cho hộp thả xuống sinh học vô hình theo mặc định. Nó chỉ được hiển thị khi bạn di chuột qua một cái gì đó, hãy nhớ?

Ghi chú: Nếu bạn không phải là một fan hâm mộ của màn hình: không có; hoặc nghĩ rằng nó làm tổn thương SEO của bạn hoặc một cái gì đó, bạn cũng có thể sử dụng một cái gì đó dọc theo dòng vị trí: tuyệt đối; trái: -100000em; về cơ bản sẽ di chuyển nó ra xa khỏi trang, dù sao cũng sẽ không có ai nhìn thấy nó.

Phần còn lại của CSS

Mã CSS sau đây xử lý giao diện của hộp thả xuống sinh học.

# text-3: di chuột .bio-dropdown {
hiển thị: khối; chỉ số z: 99;
vị trí: tuyệt đối; đầu trang: 25px;
nền: #ccc; đệm: 10px 10px 0 10px;
cỡ chữ: 11px; chiều cao dòng: 18px; màu: # 666;
}

Giải trình

Đây là nơi cuối cùng chúng ta sử dụng bộ chọn # text-3 cùng với: pseudoclass di chuột để làm cho hộp thả xuống sinh học chỉ hiển thị khi bạn di chuột qua tiện ích văn bản.

  • Dòng đầu tiên: Màn hình: khối; làm cho hộp thả xuống sinh học có thể nhìn thấy. Chỉ số z: 99; đảm bảo rằng hộp sẽ được hiển thị trên mọi thứ khác, không bị cản trở.
  • Dòng thứ hai: Điều này đặt hộp bên dưới khoảng 25 pixel.
  • Dòng thứ ba: Đây chỉ là một số phong cách mỹ phẩm, đặt nền thành màu xám nhạt với lớp đệm phù hợp.
  • Dòng thứ tư: Đây là tất cả các kiểu chữ tự giải thích.

Ghi chú: Về dòng đầu tiên, nếu bạn sử dụng vị trí: tuyệt đối; trái: -100000em; kỹ thuật thay vì hiển thị: không có; như tôi đã giải thích ở trên, sử dụng display: block ở đây sẽ cần thiết (vì các div đã được coi là phần tử mức khối nào). Thay vào đó, bạn phải sử dụng trái: 0; để di chuyển div trở lại trang.

Và đối với hình ảnh, chỉ cần một hình nổi đơn giản và lề phải.

.thả xuống sinh học .photo {float: left; lề phải: 10px; }

Tích hợp WordPress

Tôi có thể nghĩ ra một cách tốt để tích hợp điều này vào một menu WordPress động (wp_nav_menu) mà không cần lọc những thứ tào lao ra khỏi thứ gì đó. Cách dễ nhất có thể là mã cứng điều hướng của bạn và vượt qua nó (mà tôi làm trên tất cả các trang web của tôi).

Nếu bạn có bất kỳ kỹ thuật nào về cách chèn đánh dấu vào một mục menu WordPress, điều này là bắt buộc cho việc này, tôi sẽ rất thích nghe về nó trong các bình luận. Tôi chắc chắn rằng nó có thể có nhưng nó vượt ra ngoài phạm vi của bài viết mẹo CSS này.

Phần kết luận

Vâng, tôi nhận ra rằng có lẽ bạn sẽ muốn đặt một danh sách sinh học vào thanh bên của mình, bạn đã đặt nó ở một nơi có không gian hạn chế mà không có chỗ cho nó được hiển thị đầy đủ (như một thanh điều hướng chật chội).

May mắn thay, bạn có thể sử dụng teqhnique này ở bất cứ đâu. Tôi chỉ muốn xem qua một kỹ thuật cơ bản về cách hiển thị toàn bộ div khi di chuột.

Nó không quá phức tạp và bạn không cần bất kỳ công cụ Javascript ưa thích nào để làm điều đó, mặc dù nếu bạn muốn một số hiệu ứng mờ dần về công nghệ cao, bạn có thể phải sử dụng một số Javascript.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map