Multi level drawer

Mohammed Saber6 · 29 مايو 2020

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

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

Mohamd Imran · 29 مايو 2020

وعليكم السلام أخي @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

Multi level drawer

السؤال

Mohammed Saber6

رابط هذا التعليق

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

1 جواب على هذا السؤال

Recommended Posts

Mohamd Imran

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية