Hamza Waleed2 نشر 18 سبتمبر 2023 أرسل تقرير مشاركة نشر 18 سبتمبر 2023 السلام عليكم ورحمة الله وبركاته لدي مشروع django اريد تصميم Drop down لأني حاولت كثيرا ولم استطع فأتمنى من احد ان يساعدني هذا شكل تخيلي ل الdropdown: وهذا شرح بسيط: زر مقسوم نصفين نص عباره عن زر والنصف الاخر الذي به سهم يقوم بانزال القائمة هناك عنصران ثم خط فاصل ثم عنصر والعنصر الثاني به عنصران اخران هذا شرح بسيط لما اريده وهذه ملفات المشروع: lce_academy.zip المكان الذي اريد ان اضع به الdropdown: academy_courses/templates/partials/header.html تحديدا في السطر رقم 11 ما بين if و else اتمنى من احد ان يساعدني لأني بقالي فتره كبيره بحاول ومش عارف اعمله وشكرا لكم 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمار معلا نشر 18 سبتمبر 2023 أرسل تقرير مشاركة نشر 18 سبتمبر 2023 لإنشاء 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 إذا لم يتم تسجيل الدخول للمستخدم ، يمكنك إضافة تعليق مثل إضافة رمز أو محتوى لعرض شيء آخر بدلاً من ذلك . اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hamza Waleed2 نشر 18 سبتمبر 2023 الكاتب أرسل تقرير مشاركة نشر 18 سبتمبر 2023 بتاريخ 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 فارجو منك مساعدتي فيما طلبت وشكرا لك اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سمير عبود نشر 18 سبتمبر 2023 أرسل تقرير مشاركة نشر 18 سبتمبر 2023 بتاريخ 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 »</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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمار معلا نشر 19 سبتمبر 2023 أرسل تقرير مشاركة نشر 19 سبتمبر 2023 (معدل) بتاريخ 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 اللازمة وتوفيرها في المسار الصحيح. وهذه الصورة توضح الذي طلبته تم التعديل في 19 سبتمبر 2023 بواسطة عمار معلا تكرار محتوى 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Hamza Waleed2
السلام عليكم ورحمة الله وبركاته
لدي مشروع django اريد تصميم Drop down لأني حاولت كثيرا ولم استطع فأتمنى من احد ان يساعدني
هذا شكل تخيلي ل الdropdown:
وهذا شرح بسيط:
زر مقسوم نصفين نص عباره عن زر والنصف الاخر الذي به سهم يقوم بانزال القائمة
هناك عنصران ثم خط فاصل ثم عنصر
والعنصر الثاني به عنصران اخران
هذا شرح بسيط لما اريده
وهذه ملفات المشروع:
lce_academy.zip
المكان الذي اريد ان اضع به الdropdown:
academy_courses/templates/partials/header.html
تحديدا في السطر رقم 11 ما بين if و else
اتمنى من احد ان يساعدني لأني بقالي فتره كبيره بحاول ومش عارف اعمله
وشكرا لكم
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.