Service / Hilfe wird rechts oben nicht angezeigt

Shopware 6 (German)
10

So komm ist zwar ne Weile her, aber das Thema ist ja nach wie vor aktuell für den ein oder anderen. Ich hab es gestern mal umgesetzt.

Das ist die Liste mit den Links:

<div class="g2g-service-dropdown-container">
    <!-- Der "Service"-Link, der das Dropdown-Menü öffnet -->
    <a href="#" class="g2g-service-dropdown-toggle" id="g2gServiceDropdownToggle">
        {{ "header.indexLinkService"|trans|sw_sanitize }}
    </a>

    <!-- Das Dropdown-Menü -->
    <ul class="g2g-service-dropdown-menu" id="g2gServiceDropdownMenu">
        {% for serviceMenuItem in page.header.serviceMenu %}
            <li class="g2g-service-dropdown-item">
                <a class="g2g-service-dropdown-link"
                   href="{{ category_url(serviceMenuItem) }}"
                   {% if category_linknewtab(serviceMenuItem) %}target="_blank"{% endif %}
                   title="{{ serviceMenuItem.translated.name }}">
                    {{ serviceMenuItem.translated.name }}
                </a>
            </li>
        {% endfor %}
    </ul>
</div>

Um die Box zu öffnen brauchst du ne kleine Portion CSS:

/* Container für das Dropdown-Menü */
.g2g-service-dropdown-container {
    position: relative; /* Erforderlich für das Positionieren des Dropdown-Menüs */
}

/* Der Link, der das Dropdown-Menü öffnet */
.g2g-service-dropdown-toggle {
    display: inline-block;
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
}

/* Aufklapp-Icon hinter dem Link */
.g2g-service-dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Das Dropdown-Menü, anfänglich versteckt */
.g2g-service-dropdown-menu {
    display: none; /* Versteckt das Dropdown-Menü standardmäßig */
    position: absolute; /* Positioniert das Dropdown-Menü relativ zum Container */
    top: 100%; /* Positioniert das Dropdown-Menü direkt unter dem Toggle-Link */
    left: 0;
    background-color: white; /* Hintergrundfarbe des Dropdown-Menüs */
    border: 1px solid #ddd; /* Rahmen des Dropdown-Menüs */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für das Dropdown-Menü */
    z-index: 1000; /* Stellt sicher, dass das Dropdown über anderen Inhalten liegt */
    list-style: none; /* Entfernt die Aufzählungszeichen der Liste */
    padding: 0; /* Entfernt das Padding */
    margin: 0; /* Entfernt das Margin */
    margin-top: 10px;
}

/* Dropdown-Menü-Elemente */
.g2g-service-dropdown-item {
    padding: 10px; /* Padding für die einzelnen Listenelemente */
}

.g2g-service-dropdown-item:hover {
    background: red;
}

/* Links im Dropdown-Menü */
.g2g-service-dropdown-link {
    text-decoration: none; /* Entfernt die Unterstreichung der Links */
    display: block; /* Macht den Link blockartig, um die ganze Breite des Listenelements einzunehmen */
}

/* Dropdown-Menü anzeigen */
.g2g-service-dropdown-menu.show {
    display: block; /* Zeigt das Dropdown-Menü an, wenn die Klasse "show" hinzugefügt wird */
}

und eine Löffelspitze JS:

   <script>
            document.addEventListener('DOMContentLoaded', function() {
                var toggleButton = document.getElementById('g2gServiceDropdownToggle');
                var dropdownMenu = document.getElementById('g2gServiceDropdownMenu');

                toggleButton.addEventListener('click', function(event) {
                    event.preventDefault(); // Verhindert die Standard-Link-Aktion
                    dropdownMenu.classList.toggle('show');
                });

                // Schließt das Dropdown-Menü, wenn der Benutzer außerhalb klickt
                document.addEventListener('click', function(event) {
                    if (!toggleButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
                        dropdownMenu.classList.remove('show');
                    }
                });
            });
        </script>

So ähnlich habe ich es gerade in unserem Theme eingebaut. Das sollte dir und allen Mitlesern als Ansatz weiterhelfen.

Good luck, have fun.