วิธีการสร้าง Bio Dropbox Box ด้วย CSS

หลังจากที่ฉันเปิดตัว Theme Lab ออกแบบใหม่ล่าสุด, ฉันมีความคิดเห็นจำนวนมากในช่อง“ ดรอปดาวน์ไบโอ” ที่ฉันมีในแถบนำทางของฉัน ฉันเขียนมันด้วย CSS เพียงไม่กี่บรรทัดพร้อมกับภาพพื้นหลัง.


ในการโพสต์เคล็ดลับ CSS นี้ฉันจะอธิบายวิธีที่คุณสามารถมีผลการโฮเวอร์คล้ายกับไซต์ของคุณเอง.

ตัวอย่าง

ในตัวอย่างนี้ฉันจะใช้วิดเจ็ตข้อความใน ยี่สิบเอ็ด ธีมค่าเริ่มต้นใหม่ของ WordPress 3.2.

โดยทั่วไปเมื่อคุณโฮเวอร์เหนือ div ที่มีวิดเจ็ต div“ ซ่อน” จะปรากฏขึ้นซึ่งจะเป็นกล่องดรอปดาวน์ไบโอของเรา.

หมายเหตุในภาพทางซ้ายกล่องสีเทาจะไม่ปรากฏขึ้นเว้นแต่คุณจะวางตัว div ที่มีหัวเรื่อง“ Bio Hover”.

ตัวเลือก

ไม่ใช่สิ่งสำคัญที่จะต้องมีตัวเลือก CSS ที่ไม่ซ้ำใครเพื่อจัดวาง div ที่คุณต้องการวางกล่องดร็อปดาวน์ไบโอโดยทั่วไปนี่เป็นเพราะถ้าคุณไม่มีมาร์กอัปที่มาพร้อมกันใน div นั้นจะไม่มีอะไรปรากฏขึ้นในกรณีที่ สถานะโฮเวอร์.

แม้ว่าในกรณีของ Twenty Eleven เราสามารถออกไปได้ด้วยการใส่สไตล์ “กัน” โอกาสที่คุณจะต้องการเพียงแค่กล่องดร็อปดาวน์ชีวภาพบนหนึ่งใน divs ของคุณอยู่แล้วดังนั้นเราจะมีความเฉพาะเจาะจงมากขึ้น.

โชคดีที่ WordPress นั้นแยกตัวเลือก CSS ที่เป็นเอกลักษณ์มากมายที่คุณสามารถใช้ได้ ในตัวอย่างนี้มันแยก # test-3 ที่เราจะใช้นับจากนี้เป็นต้นไป.

บันทึก: สิ่งนี้อาจแตกต่างกันไปขึ้นอยู่กับการติดตั้ง WordPress ของคุณ ใช้บางอย่างเช่นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อค้นหาตัวเลือกได้อย่างง่ายดาย.

HTML Markup

ในตัวอย่างนี้มาร์กอัพ HTML สามารถวางโดยตรงในวิดเจ็ตข้อความ WordPress นี่คือสิ่งที่คุณใส่:

Leland!

สวัสดี. ฉัน Leland Fiegel และฉันเป็นผู้สร้างและเป็นผู้ก่อตั้ง Theme Lab ฉันชอบเขียนโค้ดโดยเฉพาะ HTML, CSS และสำหรับ WordPress.

หากคุณไม่ต้องการขโมยข้อมูลประจำตัวของฉันคุณอาจต้องการแทนที่รูปภาพด้วยรูปภาพของคุณเอง นอกจากนี้คุณยังสามารถลบทิ้งได้.

เนื่องจากเรากำลังใช้วิดเจ็ต WordPress จึงมีการสร้างมาร์กอัปสำหรับเราแล้ว นี่คือสิ่งที่มันเป็นทั้งหมด.

Bio Hover

Leland!

สวัสดี. ฉัน Leland Fiegel และฉันเป็นผู้สร้างและเป็นผู้ก่อตั้ง Theme Lab ฉันชอบเขียนโค้ดโดยเฉพาะ HTML, CSS และสำหรับ WordPress.

หากคุณกำลังทำสิ่งนี้บนไซต์ HTML แบบดิบคุณจะต้องใช้กระดาษห่อ (เช่นนี้อยู่ด้านข้าง) สำหรับการดร็อปดาวน์ทางชีวภาพกับสิ่งอื่นในนั้นมิฉะนั้นไม่มีอะไรที่จะต้องเลื่อนลง.

ตัวอย่างชีวิตจริง: div ดร็อปดาวน์ทางชีวภาพของฉันอยู่ในแท็ก li ในเมนูนำทางของฉัน.

CSS สองบรรทัดแรก

สองบรรทัดแรกตั้งค่าที่เหลือจริง ๆ ดังนั้นฉันจึงใส่มันลงไปในส่วนของมัน.

# text-3 {ตำแหน่ง: ญาติ; }
.ไบโอดร็อปดาวน์ {display: none; }

คำอธิบาย

  • เส้นแรก: เราตั้งค่า wrapper ของ dropdown ชีวภาพเพื่อให้ได้ตำแหน่งที่สัมพันธ์กัน ทำให้ง่ายต่อการจัดตำแหน่งกล่องดร็อปดาวน์ชีวภาพใกล้กับเสื้อคลุมเดิม.
  • บรรทัดที่สอง: สิ่งนี้ทำให้กล่องดร็อปดาวน์ชีวภาพไม่ปรากฏเป็นค่าเริ่มต้น มันควรจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือบางสิ่งบางอย่างจำไว้?

บันทึก: หากคุณไม่ได้เป็นแฟนของการแสดงผล: ไม่มี; หรือคิดว่ามันสร้างความเจ็บปวดให้กับ SEO ของคุณหรือบางสิ่งบางอย่างคุณสามารถใช้บางสิ่งบางอย่างตามตำแหน่ง: ซ้าย: -100000em; ซึ่งโดยทั่วไปจะย้ายมันออกไปไกลจากหน้าจอไม่มีใครเคยเห็นมันเลย.

ส่วนที่เหลือของ CSS

โค้ด CSS ต่อไปนี้จัดการรูปลักษณ์ของกล่องดร็อปดาวน์ทางชีวภาพ.

# text-3: hover .bio-dropdown {
แสดงผล: บล็อก; ดัชนี z: 99;
ตำแหน่ง: สัมบูรณ์; ด้านบน: 25px;
พื้นหลัง: #ccc; การขยาย: 10px 10px 0 10px;
ขนาดตัวอักษร: 11px; ความสูงของเส้น: 18px; สี: # 666;
}

คำอธิบาย

ในที่สุดเราก็ใช้ # text-3 selector พร้อมกับ: hover pseudoclass เพื่อให้กล่องดร็อปดาวน์ชีวภาพปรากฏขึ้นเฉพาะเมื่อคุณวางเมาส์เหนือวิดเจ็ตข้อความ.

  • เส้นแรก: จอแสดงผล: บล็อก; ทำให้กล่องดร็อปดาวน์ทางชีวภาพปรากฏ ดัชนี z: 99; ตรวจสอบให้แน่ใจว่ากล่องนั้นจะปรากฏเหนือสิ่งอื่นใดโดยไม่มีสิ่งกีดขวาง.
  • บรรทัดที่สอง: จะวางตำแหน่งกล่องด้านล่างกันประมาณ 25 พิกเซล.
  • บรรทัดที่สาม: เหล่านี้เป็นเพียงรูปแบบเครื่องสำอางตั้งพื้นหลังเป็นสีเทาอ่อนพร้อมช่องว่างภายในที่เหมาะสม.
  • บรรทัดที่สี่: นี่คือทั้งหมดของตัวอักษรที่อธิบายได้ด้วยตนเอง.

บันทึก: เกี่ยวกับบรรทัดแรกหากคุณใช้ตำแหน่ง: สัมบูรณ์; ซ้าย: -100000em; เทคนิคแทนการแสดง: ไม่มี; เช่นเดียวกับที่ฉันอธิบายด้านบนการใช้ display: block here จะไม่จำเป็น (เนื่องจาก div จะถือว่าเป็นองค์ประกอบระดับบล็อกอยู่แล้ว) คุณต้องใช้เหลือ: 0; เพื่อย้าย div กลับไปยังหน้า.

และสำหรับภาพเพียงแค่ลอยและขอบเรียบง่าย.

.ภาพถ่ายชีวภาพแบบเลื่อนลง {float: left; ระยะขอบขวา: 10px; }

บูรณาการ WordPress

ฉันคิดว่าวิธีที่ดีในการรวมเข้ากับเมนู WordPress แบบไดนามิก (wp_nav_menu) โดยไม่ต้องกรองอึออกจากบางสิ่ง วิธีที่ง่ายที่สุดอาจจะเป็น เขียนโค้ดการนำทางของคุณอย่างหนัก (ซึ่งฉันทำในเว็บไซต์ทั้งหมดของฉัน).

หากคุณมีเทคนิคใด ๆ เกี่ยวกับวิธีแทรกมาร์กอัปในรายการเมนู WordPress ซึ่งจำเป็นสำหรับสิ่งนี้ฉันชอบที่จะได้ยินเกี่ยวกับมันในความคิดเห็น ฉันแน่ใจว่าเป็นไปได้ แต่อยู่นอกเหนือขอบเขตของโพสต์เคล็ดลับ CSS นี้.

ข้อสรุป

ใช่ฉันรู้ว่าคุณคงไม่ต้องการวางดร็อปชีวภาพลงในแถบข้างคุณวางไว้ในสถานที่ที่มีพื้นที่ จำกัด และไม่มีที่ว่างพอที่จะแสดงอย่างสมบูรณ์ (เช่นแถบนำทางที่คับแคบ).

โชคดีที่คุณสามารถใช้ teqhnique นี้ได้ทุกที่ ฉันแค่อยากจะดูเทคนิคพื้นฐานเกี่ยวกับวิธีการแสดง div ทั้งหมดในโฮเวอร์.

มันไม่ซับซ้อนเกินไปและคุณไม่ต้องการสิ่งจาวาสคริปต์ที่น่าสนใจ แต่ถ้าคุณต้องการเอฟเฟกต์สีซีดจางคุณอาจต้องใช้จาวาสคริปต์บางอย่าง.

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