اذهب إلى المحتوى

السؤال

نشر

السلام عليكم ورحمة الله وبركاته 

لدي مشروع django اريد تصميم Drop down لأني حاولت كثيرا ولم استطع فأتمنى من احد ان يساعدني

هذا شكل تخيلي ل الdropdown:

CamScanner--..thumb.jpg.66755f0d132dded3595e890e8971cfd8.jpg

 

وهذا شرح بسيط:

زر مقسوم نصفين نص عباره عن زر والنصف الاخر الذي به سهم يقوم بانزال القائمة

هناك عنصران ثم خط فاصل ثم عنصر 

والعنصر الثاني به عنصران اخران

هذا شرح بسيط لما اريده 

وهذه ملفات المشروع:

lce_academy.zip

المكان الذي اريد ان اضع به الdropdown:

academy_courses/templates/partials/header.html

تحديدا في السطر رقم 11 ما بين if و else

اتمنى من احد ان يساعدني لأني بقالي فتره كبيره بحاول ومش عارف اعمله

وشكرا لكم

Recommended Posts

  • 0
نشر

لإنشاء 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 إذا لم يتم تسجيل الدخول للمستخدم ، يمكنك إضافة تعليق مثل إضافة رمز أو محتوى لعرض شيء آخر بدلاً من ذلك .

  • 0
نشر
بتاريخ 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

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

وشكرا لك

  • 0
نشر
بتاريخ 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، و إليك النتيجة:

multilevel-dropdown.thumb.png.ea9d111791fb1f85101efd5ea51f3d75.png

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

  • 0
نشر (معدل)
بتاريخ 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 اللازمة وتوفيرها في المسار الصحيح.
وهذه الصورة توضح الذي طلبته

image.thumb.png.2642595dd9fb2a102a2bb07f1d203d7f.png

تم التعديل في بواسطة عمار معلا
تكرار محتوى

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...