كود صندوق بحث بحركة مميزة

[Admin]

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

يستخدم هذا الكود في المنتديات لتحسين واجهة البحث وجعلها أكثر جاذبية وتفاعلية، مما يساهم في تعزيز تجربة الزوار والمتفاعلين مع المنتدى. تم تطويره خصيصًا ليكون متوافقًا مع نظام "أحلى منتدى" دون الحاجة إلى استخدام JavaScript المعقد، مما يجعله خفيفًا وسريع الأداء. يُعد هذا الكود أداة مثالية للمنتديات التي ترغب في تقديم تصميم احترافي وسهل الاستخدام، مع الحفاظ على توافق كامل مع النظام الأساسي. بفضل بساطته وفعاليته، يُعتبر هذا الكود إضافة قيمة لأي منتدى يسعى لتحسين مظهره وظائفه بشكل عام. Copy Ask Explain​

معاينة عمل الكود​

​

تركيب الكود​

توجه نحو لوحة الادارة - مظهر المنتدى - Css واضف الكود التالي

  /* كود صندوق بحث بحركة مميزة من تصميم منتدى انكور التطويري
  https://forum.iinkor.com */
  .search-container {
    text-align: center;
    margin: 10px 0;
  }
  .search-form {
    display: inline-block;
    position: relative;
  }
  .search-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.4s ease;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
  }
  .search-box:hover {
    width: 250px;
  }
  .search-submit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    height: 40px;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    transition: background-color 0.3s ease;
  }
  .search-submit:hover {
    background-color: #e0e0e0;
  }
  .search-icon {
    width: 18px;
    height: 18px;
    fill: #666;
  }
  .search-input {
    width: calc(100% - 40px);
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 10px;
    font-size: 14px;
    direction: rtl;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .search-box:hover .search-input {
    opacity: 1;
  }

والآن توجه نحو اي مكان تريد ان يظهر في مربع البحث وضعه فيه وأنصح بالعادة بوضعه في النافبار

<div class="search-container">
  <form class="search-form" action="/search" method="get">
    <div class="search-box">
      <button type="submit" class="search-submit">
        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </svg>
      </button>
      <input type="text" name="search_keywords" class="search-input" placeholder="اكتب كلمة البحث هنا..." />
    </div>
  </form>
</div>

​