<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Abide Radio Buttons</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Abide Radio Buttons</h1>
- <p>This form has required radio buttons. If you try to submit without picking one, it
- should show an error. When you then pick one, the error should clear and let you submit.</p>
- <form id="form" data-abide novalidate>
- <div class="alert callout hide" data-abide-error>
- <p>This form has errors.</p>
- </div>
- <fieldset>
- <legend>Fieldset Label</legend>
- <input required type="radio" name="example1" value="yes" id="example1Yes" />
- <label for="example1Yes">Yes</label>
- <input required type="radio" name="example1" value="no" id="example1No" />
- <label for="example1No">No</label>
- </fieldset>
- <button class="button" type="submit">Submit</button>
- <button class="button" type="reset">Reset</button>
- </form>
+
<p>This form has required radio buttons. If you try to submit without picking one, it
+ should show an error. When you then pick one, the error should clear and let you submit.</p>
+ <form id="form" data-abide novalidate>
+
<div class="alert callout hide" data-abide-error>
+
<p>This form has errors.</p>
+ </div>
+ <fieldset>
+ <legend>Fieldset Label</legend>
+ <input required type="radio" name="example1" value="yes" id="example1Yes" />
+ <label for="example1Yes">Yes</label>
+ <input required type="radio" name="example1" value="no" id="example1No" />
+ <label for="example1No">No</label>
+ </fieldset>
+ <button class="button" type="submit">Submit</button>
+ <button class="button" type="reset">Reset</button>
+ </form>
- <hr>
+ <hr>
- <p>This form has <strong>one</strong> required radio button. If you try to submit without picking one, it
- should show an error. When you then pick one, the error should clear and let you submit.</p>
- <form id="form" data-abide novalidate>
- <div class="alert callout hide" data-abide-error>
- <p>This form has errors.</p>
- </div>
- <fieldset>
- <legend>Fieldset Label</legend>
- <input type="radio" name="example3" value="yes" id="example3Yes" />
- <label for="example3Yes">Yes</label>
- <input required type="radio" name="example3" value="no" id="example3No" />
- <label for="example3No">No</label>
- <input type="radio" name="example3" value="maybe" id="example3Maybe" />
- <label for="example3Maybe">Maybe</label>
- </fieldset>
- <button class="button" type="submit">Submit</button>
- <button class="button" type="reset">Reset</button>
- </form>
+
<p>This form has <strong>one</strong> required radio button. If you try to submit without picking one, it
+ should show an error. When you then pick one, the error should clear and let you submit.</p>
+ <form id="form" data-abide novalidate>
+
<div class="alert callout hide" data-abide-error>
+
<p>This form has errors.</p>
+ </div>
+ <fieldset>
+ <legend>Fieldset Label</legend>
+ <input type="radio" name="example3" value="yes" id="example3Yes" />
+ <label for="example3Yes">Yes</label>
+ <input required type="radio" name="example3" value="no" id="example3No" />
+ <label for="example3No">No</label>
+ <input type="radio" name="example3" value="maybe" id="example3Maybe" />
+ <label for="example3Maybe">Maybe</label>
+ </fieldset>
+ <button class="button" type="submit">Submit</button>
+ <button class="button" type="reset">Reset</button>
+ </form>
- <hr>
+ <hr>
- <p>This form has optional radio buttons. It should let you submit with or without picking one.</p>
- <form id="form" data-abide novalidate>
- <div class="alert callout hide" data-abide-error>
- <p>This form has errors.</p>
- </div>
- <fieldset>
- <legend>Fieldset Label</legend>
- <input type="radio" name="example2" value="yes" id="example2Yes" />
- <label for="example2Yes">Yes</label>
- <input type="radio" name="example2" value="no" id="example2No" />
- <label for="example2No">No</label>
- </fieldset>
- <button class="button" type="submit">Submit</button>
- <button class="button" type="reset">Reset</button>
- </form>
+
<p>This form has optional radio buttons. It should let you submit with or without picking one.</p>
+ <form id="form" data-abide novalidate>
+
<div class="alert callout hide" data-abide-error>
+
<p>This form has errors.</p>
+ </div>
+ <fieldset>
+ <legend>Fieldset Label</legend>
+ <input type="radio" name="example2" value="yes" id="example2Yes" />
+ <label for="example2Yes">Yes</label>
+ <input type="radio" name="example2" value="no" id="example2No" />
+ <label for="example2No">No</label>
+ </fieldset>
+ <button class="button" type="submit">Submit</button>
+ <button class="button" type="reset">Reset</button>
+ </form>
- <hr>
+ <hr>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Abide: Hidden and Ignored Fields</h1>
- <div class="callout">
- <p>This form has a hidden field and a required text field.</p>
- <p>Errors should be displayed properly.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Abide: Hidden and Ignored Fields</h1>
+ <div class="callout">
+ <p>This form has a hidden field and a required text field.</p>
+ <p>Errors should be displayed properly.</p>
- <form data-abide novalidate>
- <input required type="text" placeholder="Required - try submitting without a value">
- <span class='form-error'>This field is required</span>
- <input type="hidden" value="foo">
- <button type="submit" class="button">Submit</button>
- <button type="reset" class="button">Reset</button>
- </form>
- </div>
- <div class="callout">
- <p>This form has a required text field and an ignored field that is ignored after page load.</p>
- <p>The ignored field should be ignored.</p>
- <form data-abide novalidate>
- <div class="row column">
- <input required type="text" placeholder="Required">
- <span class='form-error'>This field is required</span>
+ <form data-abide novalidate>
+ <input required type="text" placeholder="Required - try submitting without a value">
+ <span class='form-error'>This field is required</span>
+ <input type="hidden" value="foo">
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
</div>
- <div class="row column">
- <input required id="ignoreAfter" type="text" placeholder="Ignored">
- <span class='form-error'>You should never see this error!</span>
+ <div class="callout">
+ <p>This form has a required text field and an ignored field that is ignored after page load.</p>
+ <p>The ignored field should be ignored.</p>
+ <form data-abide novalidate>
+ <div class="row column">
+ <input required type="text" placeholder="Required">
+ <span class='form-error'>This field is required</span>
+ </div>
+ <div class="row column">
+ <input required id="ignoreAfter" type="text" placeholder="Ignored">
+ <span class='form-error'>You should never see this error!</span>
+ </div>
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
</div>
- <button type="submit" class="button">Submit</button>
- <button type="reset" class="button">Reset</button>
- </form>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Abide: Text Fields</h1>
-
- <p>This form has one required text field and one optional text field.</p>
-
- <form data-abide novalidate>
- <input required type="text" placeholder="Required">
- <input type="text" placeholder="Not required">
- <button type="submit" class="button">Submit</button>
- <button type="reset" class="button">Reset</button>
- </form>
-
- <hr>
-
- <p>This form has valid and invalid inputs for other text input types. (In browsers that support color pickers, you won't see a text field, but a color selection button instead.)</p>
-
- <form data-abide novalidate>
- <fieldset>
- <legend>color</legend>
- <input type="color" required value="#ffffff">
- <input type="color" required value="wefwf89">
- </fieldset>
-
- <fieldset>
- <legend>date</legend>
- <input type="date" required value="1970-01-31">
- <input type="date" required value="dwepdw9449tbv">
- </fieldset>
-
- <fieldset>
- <legend>datetime</legend>
- <input type="datetime" required value="1970-01-31T05:30:00Z">
- <input type="datetime" required>
- </fieldset>
-
- <fieldset>
- <legend>email</legend>
- <input type="email" required value="foundation@zurb.com">
- <input type="email" required value="notanemail.lol">
- </fieldset>
-
- <fieldset>
- <legend>month</legend>
- <input type="month" required value="2016-01">
- <input type="month" required value="10293">
- </fieldset>
-
- <fieldset>
- <legend>number</legend>
- <input type="number" required value="1">
- <input type="number" required value="lol">
- </fieldset>
-
- <fieldset>
- <legend>search</legend>
- <input type="search" required>
- </fieldset>
-
- <fieldset>
- <legend>tel</legend>
- <input type="tel" required value="3175554848">
- <input type="tel" required value="lol">
- </fieldset>
-
- <fieldset>
- <legend>time</legend>
- <input type="time" required value="05:30:00">
- <input type="time" required value="x:du:dwef">
- </fieldset>
-
- <fieldset>
- <legend>url</legend>
- <input type="url" required value="http://foundation.zurb.com">
- <input type="url" required value="foundation@zurb.com">
- </fieldset>
-
- <fieldset>
- <legend>week</legend>
- <input type="week" required value="2016-W01">
- <input type="week" required value="101223">
- </fieldset>
-
- <button type="submit" class="button">Submit</button>
- <button type="reset" class="button">Reset</button>
- </form>
-
- <hr>
-
- <p>This field uses a custom pattern. The field is valid if the input is between 4 and 16 characters long.</p>
-
- <form data-abide novalidate>
- <input required type="text" pattern="customPattern">
- <button type="submit" class="button">Submit</button>
- <button type="reset" class="button">Reset</button>
- </form>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Abide: Text Fields</h1>
+
+ <p>This form has one required text field and one optional text field.</p>
+
+ <form data-abide novalidate>
+ <input required type="text" placeholder="Required">
+ <input type="text" placeholder="Not required">
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
+
+ <hr>
+
+ <p>This form has valid and invalid inputs for other text input types. (In browsers that support color pickers, you won't see a text field, but a color selection button instead.)</p>
+
+ <form data-abide novalidate>
+ <fieldset>
+ <legend>color</legend>
+ <input type="color" required value="#ffffff">
+ <input type="color" required value="wefwf89">
+ </fieldset>
+
+ <fieldset>
+ <legend>date</legend>
+ <input type="date" required value="1970-01-31">
+ <input type="date" required value="dwepdw9449tbv">
+ </fieldset>
+
+ <fieldset>
+ <legend>datetime</legend>
+ <input type="datetime" required value="1970-01-31T05:30:00Z">
+ <input type="datetime" required>
+ </fieldset>
+
+ <fieldset>
+ <legend>email</legend>
+ <input type="email" required value="foundation@zurb.com">
+ <input type="email" required value="notanemail.lol">
+ </fieldset>
+
+ <fieldset>
+ <legend>month</legend>
+ <input type="month" required value="2016-01">
+ <input type="month" required value="10293">
+ </fieldset>
+
+ <fieldset>
+ <legend>number</legend>
+ <input type="number" required value="1">
+ <input type="number" required value="lol">
+ </fieldset>
+
+ <fieldset>
+ <legend>search</legend>
+ <input type="search" required>
+ </fieldset>
+
+ <fieldset>
+ <legend>tel</legend>
+ <input type="tel" required value="3175554848">
+ <input type="tel" required value="lol">
+ </fieldset>
+
+ <fieldset>
+ <legend>time</legend>
+ <input type="time" required value="05:30:00">
+ <input type="time" required value="x:du:dwef">
+ </fieldset>
+
+ <fieldset>
+ <legend>url</legend>
+ <input type="url" required value="http://foundation.zurb.com">
+ <input type="url" required value="foundation@zurb.com">
+ </fieldset>
+
+ <fieldset>
+ <legend>week</legend>
+ <input type="week" required value="2016-W01">
+ <input type="week" required value="101223">
+ </fieldset>
+
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
+
+ <hr>
+
+ <p>This field uses a custom pattern. The field is valid if the input is between 4 and 16 characters long.</p>
+
+ <form data-abide novalidate>
+ <input required type="text" pattern="customPattern">
+ <button type="submit" class="button">Submit</button>
+ <button type="reset" class="button">Reset</button>
+ </form>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="cell">
- <h1>Accordion Menu</h1>
- <div class="example" style="max-width: 250px">
- <ul class="vertical menu accordion-menu" data-accordion-menu>
- <li><a href="#">One</a></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>
- </li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- </ul>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion Menu</h1>
+ <div class="example" style="max-width: 250px">
+ <ul class="vertical menu accordion-menu" data-accordion-menu>
+ <li><a href="#">One</a></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>
+ </li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ </ul>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Accordion Menu: Keyboard Control</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion Menu: Keyboard Control</h1>
- <ul>
- <li>The Tab and down arrow keys should navigate down the menu, including open sub-menus.</li>
- <li>Shift-tab and up arrow keys should navigate up the menu, including open sub-menus.</li>
- <li>When focused on a parent menu, the space bar and Enter key should open or close the menu.</li>
- <li>When focused on a link item, the space bar and Center key should navigate to the link.</li>
- </ul>
+ <li>The Tab and down arrow keys should navigate down the menu, including open sub-menus.</li>
+ <li>Shift-tab and up arrow keys should navigate up the menu, including open sub-menus.</li>
+ <li>When focused on a parent menu, the space bar and Enter key should open or close the menu.</li>
+ <li>When focused on a link item, the space bar and Center key should navigate to the link.</li>
+ </ul>
- <ul class="vertical menu" data-accordion-menu>
- <li>
- <a href="#">Item 1</a>
- <ul class="menu vertical nested">
- <li><a href="google.com">External link</a></li>
- <li><a href="#">Item 1B</a></li>
+ <ul class="vertical menu" data-accordion-menu>
+ <li>
+ <a href="#">Item 1</a>
+ <ul class="menu vertical nested">
+ <li><a href="google.com">External link</a></li>
+ <li><a href="#">Item 1B</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item 2</a></li>
</ul>
- </li>
- <li><a href="#">Item 2</a></li>
- </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Accordion Menu: Submenu Toggle</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion Menu: Submenu Toggle</h1>
- <ul>
- <li>Any link with a submenu should contain a .submenu-toggle button.</li>
- <li>This button should toggle the submenu.</li>
- <li>The parent link (if it has a link) should work as a link.</li>
- </ul>
+ <li>Any link with a submenu should contain a .submenu-toggle button.</li>
+ <li>This button should toggle the submenu.</li>
+ <li>The parent link (if it has a link) should work as a link.</li>
+ </ul>
- <ul class="accordion-menu vertical menu" data-accordion-menu data-submenu-toggle="true">
- <li>
- <a href="http://www.github.com">Item 1 (external)</a>
- <ul class="menu vertical">
- <li><a href="google.com">Item 1A (external)</a></li>
+ <ul class="accordion-menu vertical menu" data-accordion-menu data-submenu-toggle="true">
<li>
- <a href="#">Item 1B</a>
+ <a href="http://www.github.com">Item 1 (external)</a>
+ <ul class="menu vertical">
+ <li><a href="google.com">Item 1A (external)</a></li>
+ <li>
+ <a href="#">Item 1B</a>
+ </li>
+ </ul>
</li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu vertical">
- <li><a href="#">Item 2A</a></li>
<li>
- <a href="#">Item 2B</a>
+ <a href="#">Item 2</a>
<ul class="menu vertical">
- <li><a href="google.com">Item 2BA (external)</a></li>
- <li>
- <a href="#">Item 2BB</a>
- </li>
- </ul>
+ <li><a href="#">Item 2A</a></li>
+ <li>
+ <a href="#">Item 2B</a>
+ <ul class="menu vertical">
+ <li><a href="google.com">Item 2BA (external)</a></li>
+ <li>
+ <a href="#">Item 2BB</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
</li>
</ul>
- </li>
- </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Accordion: Focus Management</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion: Focus Management</h1>
- <p>This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.</p>
+
<p>This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.</p>
- <ul class="accordion" data-accordion role="tablist">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
- <div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
- <p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
+
<ul class="accordion" data-accordion role="tablist">
+ <li class="accordion-item is-active" data-accordion-item>
+
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
+
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
+
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
- <div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
- <p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
+ <li class="accordion-item" data-accordion-item>
+
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
+
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
+
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
- <div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
- <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
- </ul>
+ <li class="accordion-item" data-accordion-item>
+
<a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
+
<div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
+
<p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
+ </ul>
- <hr>
+ <hr>
- <p>This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles <em>without opening/closing them</em>, and pressing space will open or close a pane.</p>
+
<p>This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles <em>without opening/closing them</em>, and pressing space will open or close a pane.</p>
- <ul class="accordion" data-accordion role="tablist" data-multi-expand="true">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
- <div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
- <p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
+
<ul class="accordion" data-accordion role="tablist" data-multi-expand="true">
+ <li class="accordion-item is-active" data-accordion-item>
+
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
+
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
+
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
- <div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
- <p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
+ <li class="accordion-item" data-accordion-item>
+
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
+
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
+
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
- <div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
- <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
- </div>
- </li>
- </ul>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
+ <div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
+ <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</style>
</head>
<body>
- <div class="row column">
- <h1>Accordion: Nesting</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion: Nesting</h1>
- <p>These are nested accordions.</p>
+
<p>These are nested accordions.</p>
- <ul>
- <li>A title with <code>aria-expanded="true"</code> has a blue border.</li>
- <li>A title with <code>aria-selected="true"</code> has a red border.</li>
- <li>An open item should have <strong>both borders</strong>.</li>
- <li>Manipulating one accordion shouldn't affect the other.</li>
- </ul>
+ <li>A title with <code>aria-expanded="true"</code> has a blue border.</li>
+ <li>A title with <code>aria-selected="true"</code> has a red border.</li>
+ <li>An open item should have <strong>both borders</strong>.</li>
+ <li>Manipulating one accordion shouldn't affect the other.</li>
+ </ul>
- <ul class="accordion" data-accordion>
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- <p>Base Accordion</p>
- <ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- Nested Accordion
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- Nested Accordion
- </div>
- </li>
- </ul>
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- <p>Base Accordion</p>
- </div>
- </li>
- </ul>
+ <ul class="accordion" data-accordion>
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ <p>Base Accordion</p>
+ <ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ Nested Accordion
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ Nested Accordion
+ </div>
+ </li>
+ </ul>
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ <p>Base Accordion</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="cell small-12">
- <h2>Breadcrumbs</h2>
- <nav aria-label="You are here:" role="navigation">
- <ul class="breadcrumbs">
- <li><a href="#0">Home</a></li>
- <li><a href="#0">Features</a></li>
- <li class="disabled">Gene Splicing</li>
- <li>
- <span class="show-for-sr">Current: </span> Cloning
- </li>
- </ul>
- </nav>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell small-12">
+ <h2>Breadcrumbs</h2>
+ <nav aria-label="You are here:" role="navigation">
+ <ul class="breadcrumbs">
+ <li><a href="#0">Home</a></li>
+ <li><a href="#0">Features</a></li>
+ <li class="disabled">Gene Splicing</li>
+ <li>
+ <span class="show-for-sr">Current: </span> Cloning
+ </li>
+ </ul>
+ </nav>
+ </div>
</div>
</div>
-
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
-<h4>These hollow buttons should have arrow color that matches border.</h4>
- <button class="dropdown hollow button tiny ">Dropdown Button</button>
- <button class="dropdown hollow secondary button small ">Dropdown Button</button>
- <button class="dropdown hollow alert button">Dropdown Button</button>
- <button class="dropdown hollow success button large ">Dropdown Button</button>
- <button class="dropdown hollow warning button expanded ">Dropdown Button</button>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h4>These hollow buttons should have arrow color that matches border.</h4>
+ <button class="dropdown hollow button tiny ">Dropdown Button</button>
+ <button class="dropdown hollow secondary button small ">Dropdown Button</button>
+ <button class="dropdown hollow alert button">Dropdown Button</button>
+ <button class="dropdown hollow success button large ">Dropdown Button</button>
+ <button class="dropdown hollow warning button expanded ">Dropdown Button</button>
+ </div>
+ </div>
+ </div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
</style>
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="cell medium-12" style="margin-top: 20px;margin-bottom: 20px;">
- <p>Drilldown should auto adjust height even if in Responsive Menu</p>
- <div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
- <div class="callout" id="example-autoheight">
- <ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
- <li> <a href="#">Item</a>
- <ul class="vertical menu">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-12" style="margin-top: 20px;margin-bottom: 20px;">
+ <p>Drilldown should auto adjust height even if in Responsive Menu</p>
+ <div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
+ <div class="callout" id="example-autoheight">
+ <ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu">
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
<li><a href="#">Item</a></li>
</ul>
</li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Item</a></li>
</ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </div>
- </div>
+ </div>
+ </div>
- <div class="cell medium-4">
- <p>Drilldown should auto adjust height and animate height</p>
- <div class="callout">
- <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
+ <div class="cell medium-4">
+ <p>Drilldown should auto adjust height and animate height</p>
+ <div class="callout">
+ <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
<li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
<li><a href="#">Item</a></li>
</ul>
</li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <div class="cell medium-4">
- <p>Drilldown should auto adjust height</p>
- <div class="callout">
- <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-close-on-click="true">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
</ul>
</li>
- <li><a href="#">Item</a></li>
</ul>
- </li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
+ </div>
+ </div>
+ <div class="cell medium-4">
+ <p>Drilldown should auto adjust height</p>
+ <div class="callout">
+ <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-close-on-click="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
</ul>
</li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Item</a></li>
</ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </div>
- </div>
+ </div>
+ </div>
- <div class="cell medium-4">
- <p>Drilldown should auto adjust height and change behavior</p>
- <div class="callout">
- <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
+ <div class="cell medium-4">
+ <p>Drilldown should auto adjust height and change behavior</p>
+ <div class="callout">
+ <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
<li><a href="#">Item</a></li>
</ul>
</li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Item</a></li>
</ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
+ </div>
+ </div>
</div>
</div>
-
- </div>
-
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</style>
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="medium-6 cell">
- <p style="margin-top: 20px;margin-bottom: 20px;">Parent links should be added to the top of their sub-menu as a link.</p>
- <ul class="vertical menu drilldown" data-drilldown data-parent-link="true">
- <li>
- <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
- <ul class="vertical menu nested">
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
- <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
- <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
- <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
- <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li>
- <a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
- <ul class="vertical menu nested">
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
- <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
- <li>
- <a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
- <ul class="vertical menu nested">
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
- <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
- <li>
- <a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
- <ul class="vertical menu nested">
- <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
- <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
- <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="medium-6 cell">
+ <p style="margin-top: 20px;margin-bottom: 20px;">Parent links should be added to the top of their sub-menu as a link.</p>
+ <ul class="vertical menu drilldown" data-drilldown data-parent-link="true">
+ <li>
+ <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
+ <ul class="vertical menu nested">
+ <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+ <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
+ <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
+ <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
+ <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li>
+ <a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+ <li>
+ <a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+ <li>
+ <a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+ <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+ <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</style>
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="cell medium-6">
- <h4>I scroll to top Position of drilldown element</h4>
- <div class="callout">
- <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-6">
+ <h4>I scroll to top Position of drilldown element</h4>
+ <div class="callout">
+ <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
- </div>
- <div class="grid-x grid-padding-x">
- <div class="cell medium-6">
- <h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
- <div class="callout">
- <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-6">
+ <h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
+ <div class="callout">
+ <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
- </div>
- <div class="grid-x grid-padding-x">
- <div class="cell medium-6">
- <h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
- <div class="callout">
- <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li> <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-6">
+ <h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
+ <div class="callout">
+ <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+
<li><a href="#">Item</a></li>
+ <li> <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</style>
</head>
<body>
- <div class="grid-x grid-padding-x">
- <div class="cell medium-6">
- <p>Submenus should not be cut off at the bottom.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-6">
+ <p>Submenus should not be cut off at the bottom.</p>
- <div class="test-drilldown-wrapper">
- <ul class="vertical menu drilldown" data-drilldown>
- <li>
- <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item</a>
- <ul class="vertical menu nested">
- <li><a href="#">Item</a></li>
- <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- <li><a href="#">Item</a></li>
- </ul>
- </li>
- </ul>
+ <div class="test-drilldown-wrapper">
+ <ul class="vertical menu drilldown" data-drilldown>
+ <li>
+ <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item</a>
+ <ul class="vertical menu nested">
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ <li><a href="#">Item</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body>
- <h1>Dropdown: RTL</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: RTL</h1>
- <p>Bottom aligned:</p>
- <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
- <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
- <p>This is a dropdown.</p>
- </div>
+ <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
+
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
+
<p>This is a dropdown.</p>
+ </div>
- <button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
- <div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
- <p>This is a dropdown.</p>
- </div>
+ <button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
+
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
+
<p>This is a dropdown.</p>
+ </div>
- <p>Top aligned:</p>
- <button class="button" type="button" data-toggle="example-dropdown-2">Toggle Dropdown</button>
- <div class="dropdown-pane top" id="example-dropdown-2" data-dropdown data-auto-focus="true">
- <p>This is a dropdown.</p>
- </div>
+ <button class="button" type="button" data-toggle="example-dropdown-2">Toggle Dropdown</button>
+
<div class="dropdown-pane top" id="example-dropdown-2" data-dropdown data-auto-focus="true">
+
<p>This is a dropdown.</p>
+ </div>
- <button class="button" type="button" data-toggle="example-dropdown-3">Hoverable Dropdown</button>
- <div class="dropdown-pane top" id="example-dropdown-3" data-dropdown data-hover="true" data-hover-pane="true">
- <p>This is a dropdown.</p>
+ <button class="button" type="button" data-toggle="example-dropdown-3">Hoverable Dropdown</button>
+ <div class="dropdown-pane top" id="example-dropdown-3" data-dropdown data-hover="true" data-hover-pane="true">
+ <p>This is a dropdown.</p>
+ </div>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: closeOnClick option</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: closeOnClick option</h1>
- <p>This dropdown will only close if you click the button again.</p>
+
<p>This dropdown will only close if you click the button again.</p>
- <button class="dropdown button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
- <div id="dropdown1" class="dropdown-pane" data-dropdown>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
- </div>
+ <button class="dropdown button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
+
<div id="dropdown1" class="dropdown-pane" data-dropdown>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
+ </div>
- <hr>
+ <hr>
- <p>This dropdown will close if you click anywhere outside of it.</p>
+
<p>This dropdown will close if you click anywhere outside of it.</p>
- <button class="dropdown button" type="button" data-toggle="dropdown2">Toggle Dropdown</button>
- <div id="dropdown2" class="dropdown-pane" data-dropdown data-close-on-click="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
+ <button class="dropdown button" type="button" data-toggle="dropdown2">Toggle Dropdown</button>
+ <div id="dropdown2" class="dropdown-pane" data-dropdown data-close-on-click="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: Explicit Positioning Content - no offsets</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: Explicit Positioning Content - no offsets</h1>
- <p>These dropdowns test various positioning and alignments. Valid
- positions are left/right/top/bottom. Valid alignments are
- left/right/top/bottom/center. Left align means left sides should line up.
- Right align means right sides should line up. Center align means centers should line up.
- </p>
+
<p>These dropdowns test various positioning and alignments. Valid
+ positions are left/right/top/bottom. Valid alignments are
+ left/right/top/bottom/center. Left align means left sides should line up.
+ Right align means right sides should line up. Center align means centers should line up.
+ </p>
- <h4>Top and Bottom positioned</h4>
- <div class="row small-up-1 medium-up-3">
- <div class="column">
- <p>Bottom Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
- </div>
- </div>
+ <h4>Top and Bottom positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
+
<p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
+
<p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
+
<p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
+
<p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
+
<p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
+ <div class="cell medium-4">
+ <p>Top Right</p>
+ <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <h4>Left and Right Positioned</h4>
- <div class="row small-up-1 medium-up-2">
- <div class="column">
- <p>Right Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
- </div>
- </div>
- <div class="column">
- <p>Left Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
- </div>
- </div>
+ <h4>Left and Right Positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <p>Right Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Right Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
- </div>
- </div>
- <div class="column">
- <p>Left Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <p>Left Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
+ </div>
+ </div>
- <div class="column">
- <p>Right Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
- </div>
- </div>
- <div class="column">
- <p>Left Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
+ <div class="cell medium-4">
+ <p>Right Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Left Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Right Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Left Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: Inside Top Bar</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: Inside Top Bar</h1>
- <p>Text fields inside of a top bar should not be super long.</p>
+
<p>Text fields inside of a top bar should not be super long.</p>
- <div class="top-bar">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li>
- <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
- <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
- Example form in a dropdown.
- <form>
- <div class="row">
- <div class="medium-6 columns">
- <label>Name
- <input type="text" placeholder="Kirk, James T.">
- </label>
- </div>
- <div class="medium-6 columns">
- <label>Rank
- <input type="text" placeholder="Captain">
- </label>
- </div>
+ <div class="top-bar">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text">Site Title</li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu">
+ <li>
+ <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
+ <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
+ Example form in a dropdown.
+ <form>
+ <div class="row">
+ <div class="medium-6 columns">
+ <label>Name
+ <input type="text" placeholder="Kirk, James T.">
+ </label>
+ </div>
+ <div class="medium-6 columns">
+ <label>Rank
+ <input type="text" placeholder="Captain">
+ </label>
+ </div>
+ </div>
+ </form>
</div>
- </form>
- </div>
- </li>
- </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: Long Content</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: Long Content</h1>
- <p>This dropdown should not go full-width, even if its contents are higher than the width of the window.</p>
+
<p>This dropdown should not go full-width, even if its contents are higher than the width of the window.</p>
- <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
- <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
- <p>This is a dropdown.</p>
+ <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
+ <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ <p>This is a dropdown.</p>
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: Explicit Positioning Content - with offsets</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: Explicit Positioning Content - with offsets</h1>
- <p>These dropdowns test various positioning and alignments WITH OFFSETS.
- Valid positions are left/right/top/bottom. Valid alignments are
- left/right/top/bottom/center. Left align means left sides should line up.
- Right align means right sides should line up. Center align means centers should line up.
- Positive Offsets should always be applied in a direction to create
- space between the anchor and the dropdown.
- </p>
+
<p>These dropdowns test various positioning and alignments WITH OFFSETS.
+ Valid positions are left/right/top/bottom. Valid alignments are
+ left/right/top/bottom/center. Left align means left sides should line up.
+ Right align means right sides should line up. Center align means centers should line up.
+ Positive Offsets should always be applied in a direction to create
+ space between the anchor and the dropdown.
+ </p>
- <h4>Top and Bottom positioned</h4>
- <div class="row small-up-1 medium-up-3">
- <div class="column">
- <p>Bottom Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
- <p>This offset should push right and down.</p>
- </div>
- </div>
+ <h4>Top and Bottom positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
+
<p>This offset should push right and down.</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
- <p>This offset should push down and to the global right (right)</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
+
<p>This offset should push down and to the global right (right)</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
- <p>This offset should push left and down.</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
+
<p>This offset should push left and down.</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
- <p>This offset should push right and up.</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
+
<p>This offset should push right and up.</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
- <p>This offset should push up and to the global right (right)</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
+
<p>This offset should push up and to the global right (right)</p>
+ </div>
+ </div>
- <div class="column">
- <p>Top Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
- <p>This offset should push left and up.</p>
+ <div class="cell medium-4">
+ <p>Top Right</p>
+ <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
+ <p>This offset should push left and up.</p>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <h4>Left and Right Positioned</h4>
- <div class="row small-up-1 medium-up-2">
- <div class="column">
- <p>Right Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
- <p>This offset should push right and down.</p>
- </div>
- </div>
- <div class="column">
- <p>Left Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
- <p>This offset should push left and down.</p>
- </div>
- </div>
+ <h4>Left and Right Positioned</h4>
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-4">
+ <p>Right Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
+ <p>This offset should push right and down.</p>
+ </div>
+ </div>
- <div class="column">
- <p>Right Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
- <p>This offset should push right and down</p>
- </div>
- </div>
- <div class="column">
- <p>Left Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
- <p>This offset should push left and down</p>
- </div>
- </div>
+ <div class="cell medium-4">
+ <p>Left Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
+ <p>This offset should push left and down.</p>
+ </div>
+ </div>
- <div class="column">
- <p>Right Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
- <p>This offset should push right and up.</p>
- </div>
- </div>
- <div class="column">
- <p>Left Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
- <p>This offset should push left and up.</p>
+ <div class="cell medium-4">
+ <p>Right Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
+ <p>This offset should push right and down</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Left Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
+ <p>This offset should push left and down</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Right Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
+ <p>This offset should push right and up.</p>
+ </div>
+ </div>
+
+ <div class="cell medium-4">
+ <p>Left Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
+ <p>This offset should push left and up.</p>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h4>Right and Left Overflow Allowed</h4>
- <div class="row small-up-1 medium-up-2" style="background-color:#ddd;">
- <div class="column">
- <p>Top Right Default Behavior Overflow Allowed</p>
- <button class="button" type="button" data-toggle="example2-dropdown-top-right-allowed">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right-allowed" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
- </div>
- </div>
- <div class="column">
- <p>Top Left Default Behavior Overflow Allowed</p>
- <button class="button float-right" type="button" data-toggle="example2-dropdown-top-left-allowed">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left-allowed" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
- </div>
- </div>
- <div class="column">
- <p>Bottom Right Default Behavior Overflow Allowed</p>
- <button class="button" type="button" data-toggle="example2-dropdown-bottom-right-allowed">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right-allowed" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
- </div>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h4>Right and Left Overflow Allowed</h4>
+ <div class="grid-x grid-padding-x" style="background-color:#ddd;">
+ <div class="cell medium-6">
+ <p>Top Right Default Behavior Overflow Allowed</p>
+ <button class="button" type="button" data-toggle="example2-dropdown-top-right-allowed">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right-allowed" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
+ </div>
+ </div>
+ <div class="cell medium-6">
+ <p>Top Left Default Behavior Overflow Allowed</p>
+ <button class="button float-right" type="button" data-toggle="example2-dropdown-top-left-allowed">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left-allowed" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
+ </div>
+ </div>
+ <div class="cell medium-6">
+ <p>Bottom Right Default Behavior Overflow Allowed</p>
+ <button class="button" type="button" data-toggle="example2-dropdown-bottom-right-allowed">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right-allowed" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Left Default Behavior Overflow Allowed</p>
- <button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left-allowed">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left-allowed" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
+ <div class="cell medium-6">
+ <p>Bottom Left Default Behavior Overflow Allowed</p>
+ <button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left-allowed">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left-allowed" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h4>Right and Left (no overflow)</h4>
- <div class="row small-up-1 medium-up-2" style="background-color:#ddd;">
- <div class="column">
- <p>Top Right Default Behavior (no overflow)</p>
- <button class="button" type="button" data-toggle="example2-dropdown-top-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
- </div>
- </div>
- <div class="column">
- <p>Top Left Default Behavior (no overflow)</p>
- <button class="button float-right" type="button" data-toggle="example2-dropdown-top-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
- </div>
- </div>
- <div class="column">
- <p>Bottom Right Default Behavior (no overflow)</p>
- <button class="button" type="button" data-toggle="example2-dropdown-bottom-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
- </div>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h4>Right and Left (no overflow)</h4>
+ <div class="grid-x grid-padding-x" style="background-color:#ddd;">
+ <div class="cell medium-6">
+ <p>Top Right Default Behavior (no overflow)</p>
+ <button class="button" type="button" data-toggle="example2-dropdown-top-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
+ </div>
+ </div>
+ <div class="cell medium-6">
+ <p>Top Left Default Behavior (no overflow)</p>
+ <button class="button float-right" type="button" data-toggle="example2-dropdown-top-left">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
+ </div>
+ </div>
+ <div class="cell medium-6">
+ <p>Bottom Right Default Behavior (no overflow)</p>
+ <button class="button" type="button" data-toggle="example2-dropdown-bottom-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Left Default Behavior (no overflow)</p>
- <button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left" data-dropdown data-auto-focus="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
+ <div class="cell medium-6">
+ <p>Bottom Left Default Behavior (no overflow)</p>
+ <button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left" data-dropdown data-auto-focus="true">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Dropdown: Overflow Handling</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown: Overflow Handling</h1>
- <p>These dropdowns test various overflow situations.</p>
+
<p>These dropdowns test various overflow situations.</p>
- <h4>Right and Left Overflow</h4>
- <div class="row small-up-1 medium-up-2" style="background-color:#ddd; padding: 20px 0;">
- <div class="column">
- <p>Bottom Right Default Behavior (no overflow)</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the bottom aligned with the left, all inside the container</p>
- </div>
- </div>
- <div class="column">
- <p>Bottom Left Default Behavior (no overflow)</p>
- <button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the bottom aligned with the right, all inside the container</p>
- </div>
- </div>
+ <h4>Right and Left Overflow</h4>
+
<div class="row small-up-1 medium-up-2" style="background-color:#ddd; padding: 20px 0;">
+
<p>Bottom Right Default Behavior (no overflow)</p>
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the bottom aligned with the left, all inside the container</p>
+ </div>
+ </div>
+
<p>Bottom Left Default Behavior (no overflow)</p>
+ <button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the bottom aligned with the right, all inside the container</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Right Overflow Allowed</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-right-overflow">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right-overflow" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the bottom aligned with the right, breaking out of the container</p>
- </div>
- </div>
+
<p>Bottom Right Overflow Allowed</p>
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-right-overflow">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right-overflow" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the bottom aligned with the right, breaking out of the container</p>
+ </div>
+ </div>
- <div class="column">
- <p>Bottom Left Overflow Allowed</p>
- <button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left-overflow">Toggle Dropdown</button>
- <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left-overflow" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the bottom aligned with the left, breaking out of the container</p>
+ <div class="column">
+ <p>Bottom Left Overflow Allowed</p>
+ <button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left-overflow">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left-overflow" data-dropdown data-auto-focus="true">
+ <p>This dropdown should be on the bottom aligned with the left, breaking out of the container</p>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <h4>Bottom and Top Overflow</h4>
- <div class="row small-up-2" style="background-color:#ddd;">
- <div class="column">
- <p>Right Bottom Default Behavior (no overflow)</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the right aligned with the top of the button after realigning</p>
- </div>
- </div>
- <div class="column">
- <p>Left Bottom Default Behavior (no overflow)</p>
- <button class="button float-right" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the left aligned with the top of the button after realigning</p>
- </div>
- </div>
+ <h4>Bottom and Top Overflow</h4>
+
<div class="row small-up-2" style="background-color:#ddd;">
+
<p>Right Bottom Default Behavior (no overflow)</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the right aligned with the top of the button after realigning</p>
+ </div>
+ </div>
+
<p>Left Bottom Default Behavior (no overflow)</p>
+ <button class="button float-right" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the left aligned with the top of the button after realigning</p>
+ </div>
+ </div>
- <div class="column">
- <p>Right Top Default Behavior (no overflow)</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the right aligned with the bottom of the button after realigning</p>
- </div>
- </div>
+
<p>Right Top Default Behavior (no overflow)</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
+
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
+
<p>This dropdown should be on the right aligned with the bottom of the button after realigning</p>
+ </div>
+ </div>
- <div class="column">
- <p>Left Top Default Behavior (no overflow)</p>
- <button class="button float-right" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
- <p>This dropdown should be on the left aligned with the bottom of the button after realigning</p>
+ <div class="column">
+ <p>Left Top Default Behavior (no overflow)</p>
+ <button class="button float-right" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
+ <p>This dropdown should be on the left aligned with the bottom of the button after realigning</p>
+ </div>
+ </div>
</div>
</div>
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
