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

Multi level drawer

Mohammed Saber6

السؤال

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

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

Screenshot_20200529_114400_com.android.chrome.jpg

Screenshot_20200529_114409_com.android.chrome.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...