]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Add test case on nested forms within menu!
authorharry <harmanmanchanda182@gmail.com>
Tue, 30 May 2017 19:07:29 +0000 (00:37 +0530)
committerharry <harmanmanchanda182@gmail.com>
Tue, 30 May 2017 19:07:29 +0000 (00:37 +0530)
test/visual/menu/advanced-nested-menu-flex.html
test/visual/menu/advanced-nested-menu.html

index 5864b0d4bd659810cce12fac5c1f106699f08164..0d4bc4c8a351fe48e0a04e3fe9daa210d488087a 100644 (file)
   <body>
     <div class="row column">
       <h1>Advanced Nested Menu's</h1>
-      <h3>Drilldown menu within Accordion Menu</h3>
-      <div class="example" style="max-width: 250px">
+      <h3>Nested Form within Accordion Menu</h3>
+      <div class="example" style="max-width: 450px">
         <ul class="menu vertical accordion-menu" data-accordion-menu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li>
-            <a href="#">Two</a>
-            <ul class="menu nested vertical drilldown" data-drilldown>
-              <li><a href="#">One</a></li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
               <li>
-                <a href="#">Two</a>
-                <ul class="menu nested vertical">
-                  <li><a href="#">Two A</a></li>
-                  <li><a href="#">Two B</a></li>
-                  <li><a href="#">Two C</a></li>
-                  <li><a href="#">Two D</a></li>
-                </ul>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
               </li>
-              <li><a href="#">Three</a></li>
-              <li><a href="#">Four</a></li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><button class="button">Submit</button></li>
             </ul>
           </li>
           <li><a href="#">Three</a></li>
         </ul>
       </div>
 
-      <h3>Vertical Dropdown menu within Accordion Menu</h3>
-      <div class="example" style="max-width: 250px">
-        <ul class="menu vertical accordion-menu" data-accordion-menu>
+      <h3>Nested Form within Dropdown Menu</h3>
+      <div class="example" style="max-width: 450px">
+        <ul class="menu vertical dropdown" data-dropdown-menu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li>
-            <a href="#">Two</a>
-            <ul class="vertical nested menu dropdown" data-dropdown-menu>
-              <li><a href="#">One</a></li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
+              <li>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
+              </li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><button class="button">Submit</button></li>
+            </ul>
+          </li>
+          <li><a href="#">Three</a></li>
+          <li><a href="#">Four</a></li>
+        </ul>
+      </div>
+
+      <h3>Nested Form within Drilldown Menu</h3>
+      <div class="example" style="max-width: 450px">
+        <ul class="menu vertical drilldown" data-drilldown>
+          <li><a href="#">One</a></li>
+          <li><a href="#">Two</a></li>
+          <li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
+              <li>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
+              </li>
               <li>
-                <a href="#">Two</a>
-                <ul class="menu vertical nested">
-                  <li><a href="#">Two A</a></li>
-                  <li><a href="#">Two B</a></li>
-                  <li><a href="#">Two C</a></li>
-                  <li><a href="#">Two D</a></li>
-                </ul>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
               </li>
-              <li><a href="#">Three</a></li>
-              <li><a href="#">Four</a></li>
+              <li><button class="button">Submit</button></li>
             </ul>
           </li>
           <li><a href="#">Three</a></li>
index 97074f6940e7a39a9a751944b04007601cc8386d..f2634bee8c47539744b26bea75f53e251876430a 100644 (file)
   <body>
     <div class="row column">
       <h1>Advanced Nested Menu's</h1>
-      <h3>Drilldown menu within Accordion Menu</h3>
-      <div class="example" style="max-width: 250px">
+      <h3>Nested Form within Accordion Menu</h3>
+      <div class="example" style="max-width: 450px">
         <ul class="menu vertical accordion-menu" data-accordion-menu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li>
-            <a href="#">Two</a>
-            <ul class="menu nested vertical drilldown" data-drilldown>
-              <li><a href="#">One</a></li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
               <li>
-                <a href="#">Two</a>
-                <ul class="menu nested vertical">
-                  <li><a href="#">Two A</a></li>
-                  <li><a href="#">Two B</a></li>
-                  <li><a href="#">Two C</a></li>
-                  <li><a href="#">Two D</a></li>
-                </ul>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
               </li>
-              <li><a href="#">Three</a></li>
-              <li><a href="#">Four</a></li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><button class="button">Submit</button></li>
             </ul>
           </li>
           <li><a href="#">Three</a></li>
         </ul>
       </div>
 
-      <h3>Vertical Dropdown menu within Accordion Menu</h3>
-      <div class="example" style="max-width: 250px">
-        <ul class="menu vertical accordion-menu" data-accordion-menu>
+      <h3>Nested Form within Dropdown Menu</h3>
+      <div class="example" style="max-width: 450px">
+        <ul class="menu vertical dropdown" data-dropdown-menu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li>
-            <a href="#">Two</a>
-            <ul class="vertical nested menu dropdown" data-dropdown-menu>
-              <li><a href="#">One</a></li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
+              <li>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
+              </li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><button class="button">Submit</button></li>
+            </ul>
+          </li>
+          <li><a href="#">Three</a></li>
+          <li><a href="#">Four</a></li>
+        </ul>
+      </div>
+
+      <h3>Nested Form within Drilldown Menu</h3>
+      <div class="example" style="max-width: 450px">
+        <ul class="menu vertical drilldown" data-drilldown>
+          <li><a href="#">One</a></li>
+          <li><a href="#">Two</a></li>
+          <li>
+            <a href="#">Form</a>
+            <ul class="menu nested vertical">
+              <li>
+                <label> Your Name
+                  <input type="text" placeholder="Enter your Cool Name">
+                </label>
+              </li>
               <li>
-                <a href="#">Two</a>
-                <ul class="menu vertical nested">
-                  <li><a href="#">Two A</a></li>
-                  <li><a href="#">Two B</a></li>
-                  <li><a href="#">Two C</a></li>
-                  <li><a href="#">Two D</a></li>
-                </ul>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
               </li>
-              <li><a href="#">Three</a></li>
-              <li><a href="#">Four</a></li>
+              <li><button class="button">Submit</button></li>
             </ul>
           </li>
           <li><a href="#">Three</a></li>