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

بعد إذنكم يا شباب محتاج أعمل multi level drawer زي اللي معمول هنا في الموقع هل فيه حاجة جاهزة أو plugin ولا هضطر أعمله من الاول. 

Screenshot_20200529_114400_com.android.chrome.jpg

Screenshot_20200529_114409_com.android.chrome.jpg

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

وعليكم السلام أخي @Mohammed Saber

يمكنك عمل ذلك من خلال css و htmlهكذا 

<!DOCTYPE html>

<html lang="ar" charset="utf-8">

<head>
  <link href="style.css" rel="stylesheet" />
  <title>multi level drawer</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>
  <header>
    <form action="javascript:">
      <input id="left-menu" type="checkbox">
      <input id="left-menu-reset" type="reset">
      <nav class="left-navigation">
        <main>
          <label class="menu-toggle" for="left-menu"><span>&nbsp;</span></label>
          <label class="menu-close" for="left-menu-reset"><span>&nbsp;</span></label>
          <menu>
            <menuitem>
            <span class="heading">القائمة</span>
            </menuitem>

            <menuitem>
            <label for="left-menu-item-1">عنصر 1</label>
            <input id="left-menu-item-1" type="checkbox">
            <nav>
              <main>
                <label class="menu-toggle" for="left-menu-item-1"><span>&nbsp;</span></label>
                <menu>
                  <menuitem>
                  <span class="heading">عنصر 1</span>
                  </menuitem>
                  <menuitem>
                  <label for="left-menu-item-1-1">عنصر 1.1</label>
                  <input id="left-menu-item-1-1" type="checkbox">
                  <nav>
                    <main>
                      <label class="menu-toggle" for="left-menu-item-1-1"><span>&nbsp;</span></label>
                      <menu>
                        <menuitem>
                        <span class="heading">عنصر 1.1</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.1.1</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.1.2</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.1.3</span>
                        </menuitem>
                      
                      </menu>
                    </main>
                  </nav>
                  </menuitem>
                  <menuitem>
                  <label for="left-menu-item-1-2">عنصر 1.2</label>
                  <input id="left-menu-item-1-2" type="checkbox">
                  <nav>
                    <main>
                      <label class="menu-toggle" for="left-menu-item-1-2"><span>&nbsp;</span></label>
                      <menu>
                        <menuitem>
                        <span class="heading">عنصر 1.2</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.2.1</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.2.2</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.2.3</span>
                        </menuitem>

                      </menu>
                    </main>
                  </nav>
                  </menuitem>
                  <menuitem>
                  <label for="left-menu-item-1-3">عنصر 1.3</label>
                  <input id="left-menu-item-1-3" type="checkbox">
                  <nav>
                    <main>
                      <label class="menu-toggle" for="left-menu-item-1-3"><span>&nbsp;</span></label>
                      <menu>
                        <menuitem>
                        <span class="heading">عنصر 1.3</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.3.1</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.3.2</span>
                        </menuitem>
                        <menuitem>
                        <span>عنصر 1.3.3</span>
                        </menuitem>

                      </menu>
                    </main>
                  </nav>
                  </menuitem>
                </menu>
              </main>
            </nav>
            </menuitem>
          </menu>
        </main>
      </nav>
    </form>
    <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
      <text dx="45%" dy="60%">&larr; الهيدر &rarr;</text>
    </svg>

  </header>
  <main>
    <div class="introduction">
      <center>
        <h1>قائمة متعددة </h1>
        <p>قائمة متعددة بإستخدام css فقط</p>
       
      </center>
    </div>
  </main>
</body>

</html>

وملف الستايل أرفقته لك ,لأنه كبير ,وسيعمل بشكل جميل لكن لا تنسى الإشارة إلى ملف الستايل في صفحة ال html هنا 

<link href="style.css" rel="stylesheet" />

 

style.css

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن