Sitemap

<!-- ### Begin: Element menu_sitemap ### -->
<div id="c389" class="frame frame-default frame-type-menu_sitemap frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Sitemap
                </h2>
            </header>

            <ul>
                <li>
                    <a href="/" title="Home">
                        <span>Home</span>
                    </a>

                    <ul>
                        <li>
                            <a href="/" title="Home">
                                <span>Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="/customizings" title="Customizings">
                                <span>Customizings</span>
                            </a>
                        </li>
                        <li>
                            <a href="/features" title="Features">
                                <span>Features</span>
                            </a>
                        </li>
                        <li>
                            <a href="/pages" title="Pages">
                                <span>Pages</span>
                            </a>

                            <ul>
                                <li>
                                    <a href="/pages/default" title="Default">
                                        <span>Default</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/2-columns" title="2 Columns">
                                        <span>2 Columns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/2-columns-2575" title="2 Columns 25/75">
                                        <span>2 Columns 25/75</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/2-columns-5050" title="2 Columns 50/50">
                                        <span>2 Columns 50/50</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/2-columns-offset-right" title="2 Columns, Offset Right">
                                        <span>2 Columns, Offset Right</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/3-columns" title="3 Columns">
                                        <span>3 Columns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/simple" title="Simple">
                                        <span>Simple</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/subnavigation-left" title="Subnavigation, Left">
                                        <span>Subnavigation, Left</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/subnavigation-left-and-2-columns" title="Subnavigation, Left and 2 Columns">
                                        <span>Subnavigation, Left and 2 Columns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/subnavigation-right" title="Subnavigation, Right">
                                        <span>Subnavigation, Right</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/subnavigation-right-and-2-columns" title="Subnavigation, Right and 2 Columns">
                                        <span>Subnavigation, Right and 2 Columns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/feature" title="Feature">
                                        <span>Feature</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/pages/startpage" title="Startpage">
                                        <span>Startpage</span>
                                    </a>
                                </li>
                            </ul>

                        </li>
                        <li>
                            <a href="/content-examples" title="Content Examples">
                                <span>Content Examples</span>
                            </a>

                            <ul>
                                <li>
                                    <a href="/content-examples/text/rich-text" title="Text">
                                        <span>Text</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/text/rich-text" title="Rich Text">
                                                <span>Rich Text</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/headers" title="Headers">
                                                <span>Headers</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/bullet-list" title="Bullet List">
                                                <span>Bullet List</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/text-with-teaser" title="Text with Teaser">
                                                <span>Text with Teaser</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/text-and-icon" title="Text and Icon">
                                                <span>Text and Icon</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/text-in-columns" title="Text in Columns">
                                                <span>Text in Columns</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/list-group" title="List Group">
                                                <span>List Group</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/panel" title="Panel">
                                                <span>Panel</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/table" title="Table">
                                                <span>Table</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/text/quote" title="Quote">
                                                <span>Quote</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/media/audio" title="Media">
                                        <span>Media</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/media/audio" title="Audio">
                                                <span>Audio</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/card-group" title="Card Group">
                                                <span>Card Group</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/icon-group" title="Icon Group">
                                                <span>Icon Group</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/gallery" title="Gallery">
                                                <span>Gallery</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/text-and-images" title="Text and Images">
                                                <span>Text and Images</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/text-and-media" title="Text and Media">
                                                <span>Text and Media</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/file-downloads" title="File downloads">
                                                <span>File downloads</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/images" title="Images">
                                                <span>Images</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/media" title="Media">
                                                <span>Media</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/media/external-media" title="External Media">
                                                <span>External Media</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/interactive/accordion" title="Interactive">
                                        <span>Interactive</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/interactive/accordion" title="Accordion">
                                                <span>Accordion</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/interactive/carousel" title="Carousel">
                                                <span>Carousel</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/interactive/tab" title="Tab">
                                                <span>Tab</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/interactive/timeline" title="Timeline">
                                                <span>Timeline</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/form-elements/forms" title="Form elements">
                                        <span>Form elements</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/form-elements/forms" title="Forms">
                                                <span>Forms</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/form-elements/login" title="Login">
                                                <span>Login</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/form-elements/search" title="Search">
                                                <span>Search</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/menus/abstract" title="Menu's">
                                        <span>Menu's</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/menus/abstract" title="Abstract">
                                                <span>Abstract</span>
                                            </a>

                                            <ul>
                                                <li>
                                                    <a href="/content-examples/menus/cards" title="Cards">
                                                        <span>Cards</span>
                                                    </a>

                                                    <ul>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 1">
                                                                <span>Page 1</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 2">
                                                                <span>Page 2</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 3">
                                                                <span>Page 3</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 4">
                                                                <span>Page 4</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 5">
                                                                <span>Page 5</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/cards" title="Page 6">
                                                                <span>Page 6</span>
                                                            </a>
                                                        </li>
                                                    </ul>

                                                </li>
                                            </ul>

                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/categorized" title="Categorized">
                                                <span>Categorized</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/pages" title="Pages">
                                                <span>Pages</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/recently-updated" title="Recently Updated">
                                                <span>Recently Updated</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/related-pages" title="Related Pages">
                                                <span>Related Pages</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/sections" title="Sections">
                                                <span>Sections</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/menus/sitemap" title="Sitemap">
                                                <span>Sitemap</span>
                                            </a>

                                            <ul>
                                                <li>
                                                    <a href="/content-examples/menus/thumbnails" title="Thumbnails">
                                                        <span>Thumbnails</span>
                                                    </a>

                                                    <ul>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 1">
                                                                <span>Page 1</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 2">
                                                                <span>Page 2</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 3">
                                                                <span>Page 3</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 4">
                                                                <span>Page 4</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 5">
                                                                <span>Page 5</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="/content-examples/menus/thumbnails" title="Page 6">
                                                                <span>Page 6</span>
                                                            </a>
                                                        </li>
                                                    </ul>

                                                </li>
                                            </ul>

                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/special-elements/insert-records" title="Special elements">
                                        <span>Special elements</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/special-elements/insert-records" title="Insert records">
                                                <span>Insert records</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/special-elements/html" title="HTML">
                                                <span>HTML</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/special-elements/divider" title="Divider">
                                                <span>Divider</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li>
                                    <a href="/content-examples/and-more/frames" title="And more...">
                                        <span>And more...</span>
                                    </a>

                                    <ul>
                                        <li>
                                            <a href="/content-examples/and-more/frames" title="Frames">
                                                <span>Frames</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/and-more/images-with-links" title="Images with links">
                                                <span>Images with links</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/content-examples/and-more/languages-and-characters" title="Languages and characters">
                                                <span>Languages and characters</span>
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                            </ul>

                        </li>
                    </ul>

                </li>
            </ul>

        </div>
    </div>
</div>
<!-- ### End: Element menu_sitemap ### -->
{% extends '@wrapper-frame' %}
{% import '@macro-menu' as macro_menu %}

{% set CType = 'menu_sitemap' %}

{% block main %}
    {% include '@atom-header' %}

    {{ macro_menu.menu(menu, false) }}
{% endblock %}
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": "Sitemap",
  "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,
  "menu": [
    {
      "link": "/",
      "title": "Home",
      "target": null,
      "children": [
        {
          "link": "/",
          "title": "Home",
          "target": null
        },
        {
          "link": "/customizings",
          "title": "Customizings",
          "target": null
        },
        {
          "link": "/features",
          "title": "Features",
          "target": null
        },
        {
          "link": "/pages",
          "title": "Pages",
          "target": null,
          "children": [
            {
              "link": "/pages/default",
              "title": "Default",
              "target": null
            },
            {
              "link": "/pages/2-columns",
              "title": "2 Columns",
              "target": null
            },
            {
              "link": "/pages/2-columns-2575",
              "title": "2 Columns 25/75",
              "target": null
            },
            {
              "link": "/pages/2-columns-5050",
              "title": "2 Columns 50/50",
              "target": null
            },
            {
              "link": "/pages/2-columns-offset-right",
              "title": "2 Columns, Offset Right",
              "target": null
            },
            {
              "link": "/pages/3-columns",
              "title": "3 Columns",
              "target": null
            },
            {
              "link": "/pages/simple",
              "title": "Simple",
              "target": null
            },
            {
              "link": "/pages/subnavigation-left",
              "title": "Subnavigation, Left",
              "target": null
            },
            {
              "link": "/pages/subnavigation-left-and-2-columns",
              "title": "Subnavigation, Left and 2 Columns",
              "target": null
            },
            {
              "link": "/pages/subnavigation-right",
              "title": "Subnavigation, Right",
              "target": null
            },
            {
              "link": "/pages/subnavigation-right-and-2-columns",
              "title": "Subnavigation, Right and 2 Columns",
              "target": null
            },
            {
              "link": "/pages/feature",
              "title": "Feature",
              "target": null
            },
            {
              "link": "/pages/startpage",
              "title": "Startpage",
              "target": null
            }
          ]
        },
        {
          "link": "/content-examples",
          "title": "Content Examples",
          "target": null,
          "children": [
            {
              "link": "/content-examples/text/rich-text",
              "title": "Text",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/text/rich-text",
                  "title": "Rich Text",
                  "target": null
                },
                {
                  "link": "/content-examples/text/headers",
                  "title": "Headers",
                  "target": null
                },
                {
                  "link": "/content-examples/text/bullet-list",
                  "title": "Bullet List",
                  "target": null
                },
                {
                  "link": "/content-examples/text/text-with-teaser",
                  "title": "Text with Teaser",
                  "target": null
                },
                {
                  "link": "/content-examples/text/text-and-icon",
                  "title": "Text and Icon",
                  "target": null
                },
                {
                  "link": "/content-examples/text/text-in-columns",
                  "title": "Text in Columns",
                  "target": null
                },
                {
                  "link": "/content-examples/text/list-group",
                  "title": "List Group",
                  "target": null
                },
                {
                  "link": "/content-examples/text/panel",
                  "title": "Panel",
                  "target": null
                },
                {
                  "link": "/content-examples/text/table",
                  "title": "Table",
                  "target": null
                },
                {
                  "link": "/content-examples/text/quote",
                  "title": "Quote",
                  "target": null
                }
              ]
            },
            {
              "link": "/content-examples/media/audio",
              "title": "Media",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/media/audio",
                  "title": "Audio",
                  "target": null
                },
                {
                  "link": "/content-examples/media/card-group",
                  "title": "Card Group",
                  "target": null
                },
                {
                  "link": "/content-examples/media/icon-group",
                  "title": "Icon Group",
                  "target": null
                },
                {
                  "link": "/content-examples/media/gallery",
                  "title": "Gallery",
                  "target": null
                },
                {
                  "link": "/content-examples/media/text-and-images",
                  "title": "Text and Images",
                  "target": null
                },
                {
                  "link": "/content-examples/media/text-and-media",
                  "title": "Text and Media",
                  "target": null
                },
                {
                  "link": "/content-examples/media/file-downloads",
                  "title": "File downloads",
                  "target": null
                },
                {
                  "link": "/content-examples/media/images",
                  "title": "Images",
                  "target": null
                },
                {
                  "link": "/content-examples/media/media",
                  "title": "Media",
                  "target": null
                },
                {
                  "link": "/content-examples/media/external-media",
                  "title": "External Media",
                  "target": null
                }
              ]
            },
            {
              "link": "/content-examples/interactive/accordion",
              "title": "Interactive",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/interactive/accordion",
                  "title": "Accordion",
                  "target": null
                },
                {
                  "link": "/content-examples/interactive/carousel",
                  "title": "Carousel",
                  "target": null
                },
                {
                  "link": "/content-examples/interactive/tab",
                  "title": "Tab",
                  "target": null
                },
                {
                  "link": "/content-examples/interactive/timeline",
                  "title": "Timeline",
                  "target": null
                }
              ]
            },
            {
              "link": "/content-examples/form-elements/forms",
              "title": "Form elements",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/form-elements/forms",
                  "title": "Forms",
                  "target": null
                },
                {
                  "link": "/content-examples/form-elements/login",
                  "title": "Login",
                  "target": null
                },
                {
                  "link": "/content-examples/form-elements/search",
                  "title": "Search",
                  "target": null
                }
              ]
            },
            {
              "link": "/content-examples/menus/abstract",
              "title": "Menu's",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/menus/abstract",
                  "title": "Abstract",
                  "target": null,
                  "children": [
                    {
                      "link": "/content-examples/menus/cards",
                      "title": "Cards",
                      "target": null,
                      "children": [
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 1",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 2",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 3",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 4",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 5",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/cards",
                          "title": "Page 6",
                          "target": null
                        }
                      ]
                    }
                  ]
                },
                {
                  "link": "/content-examples/menus/categorized",
                  "title": "Categorized",
                  "target": null
                },
                {
                  "link": "/content-examples/menus/pages",
                  "title": "Pages",
                  "target": null
                },
                {
                  "link": "/content-examples/menus/recently-updated",
                  "title": "Recently Updated",
                  "target": null
                },
                {
                  "link": "/content-examples/menus/related-pages",
                  "title": "Related Pages",
                  "target": null
                },
                {
                  "link": "/content-examples/menus/sections",
                  "title": "Sections",
                  "target": null
                },
                {
                  "link": "/content-examples/menus/sitemap",
                  "title": "Sitemap",
                  "target": null,
                  "children": [
                    {
                      "link": "/content-examples/menus/thumbnails",
                      "title": "Thumbnails",
                      "target": null,
                      "children": [
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 1",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 2",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 3",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 4",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 5",
                          "target": null
                        },
                        {
                          "link": "/content-examples/menus/thumbnails",
                          "title": "Page 6",
                          "target": null
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "link": "/content-examples/special-elements/insert-records",
              "title": "Special elements",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/special-elements/insert-records",
                  "title": "Insert records",
                  "target": null
                },
                {
                  "link": "/content-examples/special-elements/html",
                  "title": "HTML",
                  "target": null
                },
                {
                  "link": "/content-examples/special-elements/divider",
                  "title": "Divider",
                  "target": null
                }
              ]
            },
            {
              "link": "/content-examples/and-more/frames",
              "title": "And more...",
              "target": null,
              "children": [
                {
                  "link": "/content-examples/and-more/frames",
                  "title": "Frames",
                  "target": null
                },
                {
                  "link": "/content-examples/and-more/images-with-links",
                  "title": "Images with links",
                  "target": null
                },
                {
                  "link": "/content-examples/and-more/languages-and-characters",
                  "title": "Languages and characters",
                  "target": null
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
  • Content:
    .frame-type-menu_sitemap {
      // reset
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    
      a {
        color: $link-color;
        display: block;
        padding: $input-padding-y 0;
    
        @include hover-focus {
          text-decoration: none;
          color: darken($link-color, 15%);
        }
      }
    
      .frame-inner > ul > li {
        > a {
          display: none;
        }
    
        > ul {
          > li {
            > a {
              border-bottom: $border-width solid $border-color;
              font-size: $h3-font-size;
              font-weight: $font-weight-light;
              margin-bottom: 20px;
            }
    
            > ul {
              margin: 10px 0 30px;
    
              @include media-breakpoint-up(md) {
                column-count: 2;
              }
    
              @include media-breakpoint-up(lg) {
                column-count: 4;
              }
    
              > li {
                display: inline-block;
                margin-bottom: 25px;
                position: relative;
                vertical-align: top;
                width: 100%;
    
                > a {
                  font-size: $h5-font-size;
                  font-weight: $font-weight-bold;
                  padding: 0 0 10px;
                }
              }
            }
          }
        }
      }
    }
    
  • URL: /components/raw/frame-menu-sitemap/_style.scss
  • Filesystem Path: ../template/components/03-typo3/frame/05-menu/08-sitemap/_style.scss
  • Size: 1.2 KB

No notes defined.