اضافة دروب داون (تسجيل الدخول) مع قائمة منسدلة

يمكنك القيام بذلك باستخدام الأكواد التالية:

<!-- تسجيل الدخول -->
<div class="navbar-nav ml-auto action-buttons">
  <div class="nav-item dropdown">
     <!-- زر تسجيل الدخول -->
    <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle mr-4">Login</a>
    <!-- القائمة المنسدلة -->
    <div class="dropdown-menu action-form">
      <form action="/examples/actions/confirmation.php" method="post">
        <p class="hint-text">Sign in with your social media account</p>
        <div class="form-group social-btn clearfix">
          <a href="#" class="btn btn-secondary facebook-btn float-left"><i class="fa fa-facebook"></i> Facebook</a>
          <a href="#" class="btn btn-secondary twitter-btn float-right"><i class="fa fa-twitter"></i> Twitter</a>
        </div>
        <div class="or-seperator"><b>or</b></div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <input type="submit" class="btn btn-primary btn-block" value="Login">
        <div class="text-center mt-2">
          <a href="#">Forgot Your password?</a>
        </div>
      </form>
    </div>
  </div>
  
  <!-- تسجيل مستخدم جديد -->
  <div class="nav-item dropdown">
    <!-- زر تسجيل مستخدم جديد  -->
    <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle sign-up-btn">Sign up</a>
    <!-- القائمة المنسدلة -->
    <div class="dropdown-menu action-form">
      <form action="/examples/actions/confirmation.php" method="post">
        <p class="hint-text">Fill in this form to create your account!</p>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Confirm Password" required="required">
        </div>
        <div class="form-group">
          <label class="form-check-label"><input type="checkbox" required="required"> I accept the <a href="#">Terms & Conditions</a></label>
        </div>
        <input type="submit" class="btn btn-primary btn-block" value="Sign up">
      </form>
    </div>
  </div>

يمكنك الإطلاع على نموذج حي مع الأكواد كاملة من هنا و التغيير في الأكواد كما تحب.

ستكون النتيجة كما في الصور المرفقة.

مرفق ملف الأكواد "html مع التنسيقات": test.html

بالتوفيق.

بتاريخ 16 ساعات قال Yomna Raouf:

يمكنك القيام بذلك باستخدام الأكواد التالية:

<!-- تسجيل الدخول -->
<div class="navbar-nav ml-auto action-buttons">
  <div class="nav-item dropdown">
     <!-- زر تسجيل الدخول -->
    <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle mr-4">Login</a>
    <!-- القائمة المنسدلة -->
    <div class="dropdown-menu action-form">
      <form action="/examples/actions/confirmation.php" method="post">
        <p class="hint-text">Sign in with your social media account</p>
        <div class="form-group social-btn clearfix">
          <a href="#" class="btn btn-secondary facebook-btn float-left"><i class="fa fa-facebook"></i> Facebook</a>
          <a href="#" class="btn btn-secondary twitter-btn float-right"><i class="fa fa-twitter"></i> Twitter</a>
        </div>
        <div class="or-seperator"><b>or</b></div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <input type="submit" class="btn btn-primary btn-block" value="Login">
        <div class="text-center mt-2">
          <a href="#">Forgot Your password?</a>
        </div>
      </form>
    </div>
  </div>
  
  <!-- تسجيل مستخدم جديد -->
  <div class="nav-item dropdown">
    <!-- زر تسجيل مستخدم جديد  -->
    <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle sign-up-btn">Sign up</a>
    <!-- القائمة المنسدلة -->
    <div class="dropdown-menu action-form">
      <form action="/examples/actions/confirmation.php" method="post">
        <p class="hint-text">Fill in this form to create your account!</p>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Confirm Password" required="required">
        </div>
        <div class="form-group">
          <label class="form-check-label"><input type="checkbox" required="required"> I accept the <a href="#">Terms & Conditions</a></label>
        </div>
        <input type="submit" class="btn btn-primary btn-block" value="Sign up">
      </form>
    </div>
  </div>

يمكنك الإطلاع على نموذج حي مع الأكواد كاملة من هنا و التغيير في الأكواد كما تحب.

ستكون النتيجة كما في الصور المرفقة.

 

مرفق ملف الأكواد "html مع التنسيقات": test.html

بالتوفيق.

 

اشكرك 

لكن اذا قمت بتحويل الصفحة rtl لا تظهر الناف بار بالشكل المطلوب 

لاحظ الصورة المرفقة 

لا اعرف كيف يتم ترتيب العناصر بالشكل الصحيح في اتجاه rtl 

إذا قمت بتغيرها ل rtl من المفترض تغيير اللغة إلى العربية أيضًا. و تغيير النصوص إلى اللغة العربية مثل services إلى خدمات. و تغيير ال styles و الاتجاهات. 

فمثلًا ستجد أن اسم ال brand سيأخذ padding-left بالقيمة صفر سيجب تغييرها لأن اسم ال brand أصبح في الجهة اليمني الآن و هكذا في باقي التنسيقات المتعلقة ب positioning و padding و margin. سيتوجب إعادة العمل عليها.