زر عائم بأيقونات تواصل ومتابعة

زر عائم بأيقونات تواصل ومتابعة

المعاينات والمرفقات

 إنشاء عنصر واجهة منبثق لوسائل التواصل الاجتماعي بأسلوب أنيق وعملي

في تصميم الويب الحديث، يُعد توفير وصول سهل إلى روابط وسائل التواصل الاجتماعي وخيارات الاتصال أمرًا ضروريًا لتحسين تفاعل المستخدمين. يمكن لعنصر واجهة (widget) مصمم جيدًا لقائمة وسائل التواصل أن يعزز تجربة المستخدم من خلال جعل الروابط المهمة متاحة بسهولة. في هذه المقالة، سنستكشف عنصر واجهة منبثق مضغوطًا ومثبتًا في مكانه لقائمة وسائل التواصل، مبني باستخدام HTML و CSS فقط.

زر عائم بأيقونات تواصل ومتابعة

ميزات العنصر

يتضمن هذا العنصر الميزات الرئيسية التالية:

  • تثبيت في مكانه: يبقى في مكانه أثناء التمرير لسهولة الوصول.
  •  قائمة قابلة للطي: تنبسط وتنطوي بسلاسة مع تأثيرات حركية.
  • أيقونات قابلة للتخصيص: تستخدم أيقونات Font Awesome لمرونة أكبر.
  • تأثيرات عند التمرير: تغيير الألوان عند التمرير لزيادة التفاعل.
  • تصميم متجاوب: يتكيف مع أحجام الشاشات المختلفة.


الكود والتركيب

قم بلصق هذا الكود في أى آداة HTML/JavaScript في مدونتك 


<style>
#socialmenu-pop{--icosize:48px;position:fixed;right:20px;bottom:100px;width:var(--icosize);display:flex;flex-direction:column-reverse;gap:10px;}
#iconbtns{position:absolute;visibility:hidden;opacity:0;}
#smicons{display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden; margin-bottom:-10px; transition:all .4s;}
#iconbtns:checked ~ #smicons{display:flex;visibility:visible;opacity:1; margin-bottom:0;}
#cbuttons{display:block;width:var(--icosize);height:var(--icosize);line-height:var(--icosize);text-align:center;background-color:#446EAC;cursor:pointer;color:#fff;border-radius:50%;font-size:20px;}
#smicons a{display:block;width:var(--icosize);height:var(--icosize);line-height:var(--icosize);font-size:20px;border-radius:50%;text-align:center;color:#fff;transition:background-color .4s;}
#smicons a:hover{background-color:#111!important;}
#smicons a:nth-child(1) {background-color:#333}
#smicons a:nth-child(2) {background-color: #00D25C}
#smicons a:nth-child(3) {background-color:#1B8EF2}
#smicons a:nth-child(4) {background-color:#C60645}
#smicons a:nth-child(5) {background-color:#FF5400}
</style>

<div id="socialmenu-pop">
<input id="iconbtns" type="checkbox">
<label id="cbuttons" for="iconbtns"><i class="fa-solid fa-icons"></i></label>

<div id="smicons">

<a href="#" <i class="fa-solid fa-envelope"></i></a>
<a href="#" <i class="fa-brands fa-whatsapp"></i></a>
<a href="#" <i class="fa-solid fa-circle-info"></i></a>
<a href="#" <i class="fa-solid fa-sitemap"></i></a>
<a href="#" <i class="fa-solid fa-phone"></i></a>

</div>
</div>

 الإستخدام


<a href="#" <i class="fa-solid fa-envelope"></i></a>

 هذا الكود يمثل سطر واحد لأيقونة ان كررته تحصل على أيقونة جديدة

رمز # يستبدل بالرابط المراد فتحه

يمكنك الإعتماد على هذا الشرح لروابط اتصال الهاتف او البريد

 

الكود  [[<i class="fa-solid fa-envelope"></i>]] هو رمز الأيقونة وتعتمد الإضافة على خط الأيقونات Fontawesome 


#smicons a:nth-child(1) {background-color:#333}

هذا الكود يمثل لون الأيقونة تحمل هذه الأيقونة الرقم 1 معناه ان هذا اللون خاص بأول أيقونة قم بتكراره مع تغيير الرقم واحد برقم الأيقونة المناسبه وكذلك عدل الأيقونات التي في الكود كما تحب 

 

 خاتمة

في النهاية تعد هذه الإضافة وسيلة جيدة لتسهيل الوصول لمجموعة روابط دون الإعتماد على أى اكواد برمجية معقده او ثقيله 

تعديل

هذا أحدث موضوع

للإستفسار أو شراء المنتج عبر

بايبال أو فودافون كاش

يرجى الطلب عبر النموذج التالي

تعليقات

0

شاركنا برأيك حول الإضافة ,
أو لو لديك اقتراح أو استفسار عنها أو تواجه مشكلة في استخدامها اترك تعليق وسيتم الرد عليك في أقرب وقت.

الاشتراك في: تعليقات الرسالة (Atom)

الصفحات