اريد تصميم dropdown

Hamza Waleed2 · 18 سبتمبر 2023

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

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

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

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

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

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

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

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

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

lce_academy.zip

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

academy_courses/templates/partials/header.html

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

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

وشكرا لكم

Kais Hasan · 18 سبتمبر 2023

كل ما عليك القيام به هو وضع dropdown ضمن ال dropdown مع معالجة ذلك في جافاسكربت، يمكنك القيام بذلك بشكل مشابه لما يلي:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Example Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Profile</a></li>
      <li class="dropdown-submenu">
        <a class="test" href="#">Language <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">English</a></li>
          <li><a href="#">Arabic</a></li>
        </ul>
      </li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

لاحظ هنا كيف وضعنا عنصرين ضمن ال li، فعلياً سيتم عرض أول عنصر، و لكن عند الضغط قمنا بكتابة كود js يقوم بمعالجة ذلك و إظهار مجموعة الخيارات الثانية.

كود ال css لتغيير مواقع ال dropdown، في حال لم نضعه ستظهر الثانية فوق الأولى لذلك قمنا بإزاحتها قليلاً.

Hamza Waleed2 · 18 سبتمبر 2023

بتاريخ 3 ساعة قال Kais Hasan:

كل ما عليك القيام به هو وضع dropdown ضمن ال dropdown مع معالجة ذلك في جافاسكربت، يمكنك القيام بذلك بشكل مشابه لما يلي:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Example Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Profile</a></li>
      <li class="dropdown-submenu">
        <a class="test" href="#">Language <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">English</a></li>
          <li><a href="#">Arabic</a></li>
        </ul>
      </li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

لاحظ هنا كيف وضعنا عنصرين ضمن ال li، فعلياً سيتم عرض أول عنصر، و لكن عند الضغط قمنا بكتابة كود js يقوم بمعالجة ذلك و إظهار مجموعة الخيارات الثانية.

كود ال css لتغيير مواقع ال dropdown، في حال لم نضعه ستظهر الثانية فوق الأولى لذلك قمنا بإزاحتها قليلاً.

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

ولو تكرمت ان تكتبها بالمكتبات التي استخدمها في المشروع لأنه عند استخدام مكتبات خارجيه يتضرر جميع الكود

اريد تصميم dropdown

السؤال

Hamza Waleed2

2 أجوبة على هذا السؤال

Recommended Posts

Kais Hasan

Hamza Waleed2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية