DIA Frontend

mmenu 

<m-burger menu="mmenu" fx="collapse">
    Menu
</m-burger>

<nav id="mmenu">

    <ul class="mmenu">
        <li class="active">
            <a href="#" target="_blank" title="Lorem">
                <span>Lorem</span>
            </a>

            <ul class="mmenu">
                <li>
                    <a href="#" title="Child 1">
                        <span>Child 1</span>
                    </a>

                    <ul class="mmenu">
                        <li>
                            <a href="#" title="Subchild 2">
                                <span>Subchild 2</span>
                            </a>
                        </li>
                    </ul>

                </li>
            </ul>

        </li>
        <li>
            <a href="#" title="">
                <span></span>
            </a>
        </li>
        <li>
            <a href="#" title="impsum">
                <span>impsum</span>
            </a>
        </li>
        <li>
            <a href="#" title="dolor">
                <span>dolor</span>
            </a>
        </li>
    </ul>

</nav>
 
{% import '@macro-menu' as macro_menu %}

{% block main %}
    {% if mburger %}
        <m-burger menu="mmenu" fx="collapse">
            Menu
        </m-burger>
    {% endif %}

    <nav id="mmenu">
        {{ macro_menu.menu(menu, false, false, 'mmenu') }}
    </nav>
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": null,
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "mburger": true,
  "menu": [
    {
      "title": "Lorem",
      "link": "#",
      "target": "_blank",
      "active": true,
      "current": true,
      "children": [
        {
          "title": "Child 1",
          "children": [
            {
              "title": "Subchild 2"
            }
          ]
        }
      ]
    },
    {
      "spacer": true
    },
    {
      "title": "impsum",
      "link": "#"
    },
    {
      "title": "dolor",
      "link": "#"
    }
  ]
}
  • Content: 
    @import "~mburger-css/dist/mburger.css";

.m-burger {
  width: 80px;
  height: 80px;
  --mb-bar-height: 2px;
}
  • URL: /components/raw/frame-menu-mmenu/_mburger.scss
  • Filesystem Path: ../template/components/03-typo3/frame/05-menu/15-mmenu/_mburger.scss
  • Size: 111 Bytes
  • Content: 
    @import "~mmenu-js/src/mmenu";

.mm-menu {
  --mm-listitem-size: 50px;
}

// Hide mmenu before it is init
#mmenu:not(.mm-menu) {
  display: none;
}
  • URL: /components/raw/frame-menu-mmenu/_mmenu.scss
  • Filesystem Path: ../template/components/03-typo3/frame/05-menu/15-mmenu/_mmenu.scss
  • Size: 148 Bytes
  • Content: 
    import "mmenu-js";
import "mburger-css";

document.addEventListener("DOMContentLoaded", () => {
  let mmenu = document.querySelector("#mmenu");

  if (mmenu) {
    // Fire the plugin
    const menu = new Mmenu(mmenu, {
      "counters": true,
      "extensions": [
        "border-full",
        "pagedim-black",
        "position-front",
        "position-right",
        "theme-dark"
      ],
      // "iconbar": {
      //   "use": true,
      //   "top": [
      //     "<a href='#/'><i class='fa fa-home'></i></a>",
      //     "<a href='#/'><i class='fa fa-user'></i></a>"
      //   ],
      //   "bottom": [
      //     "<a href='#/'><i class='fa fa-twitter'></i></a>",
      //     "<a href='#/'><i class='fa fa-facebook'></i></a>",
      //     "<a href='#/'><i class='fa fa-linkedin'></i></a>"
      //   ]
      // },
      // "iconPanels": true,
      "navbars": [
        // {
        //   "position": "top",
        //   "content": ["searchfield"],
        // },
        {
          "position": "top",
          "content": ["prev", "title"],
        },
        {
          "position": "bottom",
          "content": [
            "<a href='#/'><span class='svg-social-facebook-26x26'></span></a>",
            "<a href='#/'><span class='svg-social-linkedin-26x26'></span></a>",
            "<a href='#/'><span class='svg-social-xing-26x26'></span></a>",
          ],
        },
      ],
    }, {
      // configuration
      classNames: {
        selected: "current"
      }
    });
  }
});
  • URL: /components/raw/frame-menu-mmenu/script.js
  • Filesystem Path: ../template/components/03-typo3/frame/05-menu/15-mmenu/script.js
  • Size: 1.5 KB

No notes defined.