<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>
<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>