subId = $sub[0].id || GetYoDigits(6, 'acc-menu'),
isActive = $sub.hasClass('is-active');
+ if(_this.options.parentLink) {
+ let $anchor = $elem.children('a');
+ $anchor.clone().prependTo($sub).wrap('<li class="is-submenu-parent-item is-submenu-item is-accordian-submenu-item"></li>');
+ }
if(_this.options.submenuToggle) {
$elem.addClass('has-submenu-toggle');
}
AccordionMenu.defaults = {
+ /**
+ * Adds the parent link to the submenu.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ parentLink: false,
/**
* Amount of time to animate the opening of a submenu in ms.
* @option
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ <title>Accordion Menu Parent Link</title>
+ <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+
+ <style>
+ h1 {
+ border-bottom: 1px solid #ddd;
+ margin-bottom: 2rem;
+ width: 100%;
+ }
+
+ h3 {
+ width: 100%;
+ }
+
+ .example {
+ padding: 2rem;
+ border: 1px solid #ddd;
+ width: 100%;
+ }
+
+ .example + h1 {
+ margin-top: 5rem;
+ }
+
+ .example + h3 {
+ margin-top: 3rem;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Accordion Menu</h1>
+ <p>With parent link, parent should be reproduced in child, so expanding 'Two (Parent)' should
+ show Two (Parent) inside</p>
+ <div class="example" style="max-width: 250px">
+ <ul class="vertical menu accordion-menu" data-accordion-menu data-parent-link="true">
+ <li><a href="#">One</a></li>
+ <li>
+ <a href="#">Two (Parent)</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>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
