اريد تصميم dropdown

لإنشاء dropdpwn داخل شرط في قوالب Django ، يمكنك استخدام علامات  <select> و <option> مع علامات قوالب Django. إليك مثال:

{% if user.is_authenticated %}
    <select name="dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
{% else %}
    <!-- Display something else if the user is not authenticated -->
{% endif %}

في هذا المثال ، بعد التحقق من أن المستخدم قام بتسجيل الدخول ، سيتم عرض قائمة منسدلة تحتوي على ثلاثة خيارات (الخيار 1 ، الخيار 2 ، والخيار 3) . تستطيع جعلها خيارين فقط بحذف احد اسطر option إذا لم يتم تسجيل الدخول للمستخدم ، يمكنك إضافة تعليق مثل إضافة رمز أو محتوى لعرض شيء آخر بدلاً من ذلك .

بتاريخ 2 دقائق مضت قال عمار معلا:

لإنشاء dropdpwn داخل شرط في قوالب Django ، يمكنك استخدام علامات  <select> و <option> مع علامات قوالب Django. إليك مثال:

{% if user.is_authenticated %}
    <select name="dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
{% else %}
    <!-- Display something else if the user is not authenticated -->
{% endif %}

في هذا المثال ، بعد التحقق من أن المستخدم قام بتسجيل الدخول ، سيتم عرض قائمة منسدلة تحتوي على ثلاثة خيارات (الخيار 1 ، الخيار 2 ، والخيار 3) . تستطيع جعلها خيارين فقط بحذف احد اسطر option إذا لم يتم تسجيل الدخول للمستخدم ، يمكنك إضافة تعليق مثل إضافة رمز أو محتوى لعرض شيء آخر بدلاً من ذلك .

شكرا لك ولكن هذا الdropdown بسيط جدا واستطيع عمله بسهولة ولكن اقصد ما قمت بشرحه ووضع صورته بالاعلى

ويمكن عمله بbootstrap لان مشروعي كله معتمد على bootstrap

فارجو منك مساعدتي فيما طلبت

وشكرا لك

بتاريخ 7 ساعة قال Hamza Waleed2:

شكرا لك ولكن هذا الdropdown بسيط جدا واستطيع عمله بسهولة ولكن اقصد ما قمت بشرحه ووضع صورته بالاعلى

ويمكن عمله بbootstrap لان مشروعي كله معتمد على bootstrap

فارجو منك مساعدتي فيما طلبت

وشكرا لك

هذا بشكل بسيط ما يُمكن لبوتستراب تقديمه لك:

<div class="container mt-5">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <ul class="navbar-nav ms-auto">
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Name
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li><a class="dropdown-item" href="#">Language</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

و هو مقارب لما تريد بالضبط غير أنه ذو مستوى واحد فقط يُمكنك تجربة الكود أعلاه على codepen من خلال الرابط: https://codepen.io/SamirAbboud/full/QWzOLYN

يُمكنك إضافة مُستوى ثاني في العُنصر الذي تُريد بالشكل التالي:

<li>
  <a class="dropdown-item" href="#">Language &raquo;</a>
  <ul class="dropdown-menu dropdown-submenu dropdown-submenu-left">
    <li>
      <a class="dropdown-item" href="#">Item 1</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Item 2</a>
    </li>
  </ul>
</li>

ثم تستخدم CSS لإضافة بعض التنسيقات:

.dropdown-menu li {
  position: relative;
}
.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}

يُمكنك التحكم في تموضع القائمة .dropdown-submenu عبر الخاصيات top، left و right، و إليك النتيجة:

يُمكنك تجربة المثال على codepen: من خلال الرابط: https://codepen.io/SamirAbboud/full/MWZOWYo

بتاريخ 22 ساعة قال Hamza Waleed2:

شكرا لك ولكن هذا الdropdown بسيط جدا واستطيع عمله بسهولة ولكن اقصد ما قمت بشرحه ووضع صورته بالاعلى

ويمكن عمله بbootstrap لان مشروعي كله معتمد على bootstrap

فارجو منك مساعدتي فيما طلبت

وشكرا لك

اعتذر عن فهم السؤال بطريقة سهله ... يمكن استخدام الاتي لتحقيق المطلوب

{% if user.is_authenticated %}
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" ariahaspopup="true" aria-expanded="false">
      {{ user.username }}
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="{% url 'profile' %}">profile</a>
      <div class="dropdown-submenu">
        <a class="dropdown-item dropdown-toggle" href="#">language</a>
        <ul class="dropdown-menu">
          <a class="dropdown-item" href="#">Item 1</a>
          <a class="dropdown-item" href="#">Item 2</a>
        </ul>
      </div>
      <a class="dropdown-item" href="{% url 'logout' %}">logout</a>
    </div>
  </div>

        {% else %}
            <div class="col-lg-6 d-flex align-items-center justify-content-end">
                <a class="btn btn-dark py-2 px-4 d-none d-lg-block" href="#">{% trans 'Join Now' %}</a>
                <a class="btn btn-outline-primary py-2 px-4 ml-2 d-none d-lg-block" href="{% url 'login' %}">{% trans 'Login' %}</a>
            </div>
        {% endif %}

تم استخدام الصنف "dropdown-submenu" لإنشاء العناصر الفرعية للقائمة المنسدلة, يتم ضبط هذه العناصر كعناصر فرعية متداخلة داخل عنصر فرعي آخر.
تأكد من تضمين ملفات Bootstrap و  javascript Bootstrap اللازمة وتوفيرها في المسار الصحيح.
وهذه الصورة توضح الذي طلبته