วิธีการสร้างเมนู Action แบบ Medium-Like Floating

ความนิยมของ เมนูการกระทำลอยตัว ได้รับการเพิ่มขึ้นโดยเฉพาะอย่างยิ่งตั้งแต่ Medium.com นำคุณลักษณะนี้มาสู่ความนิยม โดยย่อเมนูการกระทำลอยตัว ปรากฏขึ้น เมื่อคุณ เลือกข้อความ บนหน้าเว็บ เมนูจะปรากฏขึ้นใกล้กับส่วนที่เลือก, แสดงการกระทำที่แตกต่าง ที่ช่วยให้คุณสามารถจัดรูปแบบไฮไลต์หรือแบ่งปันข้อความที่เลือกได้อย่างรวดเร็ว.

ในบทช่วยสอนนี้ฉันจะแสดงวิธีการแสดง เมนูการกระทำสำหรับตัวอย่างข้อความที่เลือก บนหน้าเว็บ เมนูการกระทำของเราจะช่วยให้ผู้ใช้ ทวีตข้อความที่เลือก ถึงผู้ติดตามของพวกเขา.

1. สร้าง HTML

HTML เริ่มต้นนั้นง่าย, เราต้องการเท่านั้น ข้อความบางส่วน ผู้ใช้สามารถเลือก สำหรับตัวอย่างฉันจะใช้ “ฮาร์ตและนักล่า” นิทานก่อนนอน เป็นข้อความตัวอย่าง.

 
 
ฮาร์ตและนักล่า
 
ฮาร์ตครั้งหนึ่งเคยเป็น ... 
... 
 

2. สร้างเทมเพลตเมนูการกระทำ

ฉัน เพิ่มรหัส HTML เป็นของเมนูการกระทำ ภายใน