# Sticky Menü Professionell

{% embed url="<https://www.youtube.com/watch?t=1s&v=JWWrTac1Quc>" %}

## Installation <a href="#installation" id="installation"></a>

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.&#x20;

{% embed url="<http://store.shopware.com/cbax133198783737/sticky-menue-professionell-shopware-5.html>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

## Die Einstellungen des Plugins <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

Nach der erfolgreichen Installation des Plugins können Sie in der Konfigurationsmaske die Einstellungen vornehmen und weitere Parameter ergänzen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F5cZRkD8bW70h4S4Dk8wV%2FSW5-StickyMen%C3%BC-01.jpg?alt=media&#x26;token=cfe0e8f4-5730-4f7c-8e32-78c55273ffbc" alt="" width="350"><figcaption></figcaption></figure>

| Feldname                        | Bedeutung                                                                                                                                                          |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Aktiv                           | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren                                                                                                    |
| Sticky Menü anzeigen als        | Soll die Navigationsleiste oder die Suchleiste an den Browser angeheftet werden                                                                                    |
| Auch auf Tablet anzeigen        | Soll das Sticky Menü auch auf einem Tablet angezeigt werden                                                                                                        |
| Auch auf Smartphone anzeigen    | Soll das Sticky Menü auch auf einem Smartphone angezeigt werden                                                                                                    |
| Dauer Einblendung Sticky Search | Wie schnell soll die Suche eingeblendet werden. Dauer in ms                                                                                                        |
| Scroll-to-Top Aktiv             | Scroll-to-Top Funktion aktivieren                                                                                                                                  |
| Scroll-to-Top Button            | Welchen Style soll der Button haben. Zur Auswahl stehen: Normaler Button, Primärer Button, Sekundärer Button dadurch passt sich der Button nahtlos dem Template an |
| Dauer Scroll-to-Top             | Mit welcher Geschwindigkeit soll nach oben gescrollt werden. Dauer in ms                                                                                           |

## Die Primär- und Sekundärfarbe <a href="#theme_einstellungen" id="theme_einstellungen"></a>

Die Primär- bzw. Sekundärfarbe, für den Scroll-to-Top Button, wird aus dem Theme Manager verwendet. Gehen Sie hierzu auf "Einstellung > Theme Manager". Wählen das verwendete Template aus und gehen auf den Button "Theme konfigurieren". Wählen Sie dort den Reiter "Farb-Konfigurationen". In den Feldern "@brand-primary" & "@brand-secondary" finden Sie die jeweiligen Farben.

{% hint style="warning" %}
**Hinweis:** Bedenken Sie, dass eine Veränderung in diesen Einstellungen, globale Auswirkungen auf Ihren Shop haben.
{% endhint %}

## Darstellung im Frontend <a href="#darstellung_frontend" id="darstellung_frontend"></a>

### Navigationsleiste als Sticky <a href="#darstellung_frontend_navigationsleiste" id="darstellung_frontend_navigationsleiste"></a>

Die Anzeige der Navigationsleiste als Sticky Menü. Mit dieser Einstellung wird die Hauptnavigation eingeblendet. Das Einblenden des Layers mit der Unternavigation sowie Bildern und Texten funktioniert hier ebenfalls.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FAsrgny4KMQWl3KCiE11X%2FSW5-StickyMen%C3%BC-02.jpg?alt=media&#x26;token=63fc6905-f6ef-4378-90bf-893eab0c62ed" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FRq5Mabnlb8RsBfhwtCRv%2FSW5-StickyMen%C3%BC-03.jpg?alt=media&#x26;token=a1ec305f-16ea-4bb3-aba1-0840bf8cb5ff" alt="" width="563"><figcaption></figcaption></figure></div>

### Suchleiste als Sticky <a href="#darstellung_frontend_suchleiste" id="darstellung_frontend_suchleiste"></a>

Die Anzeige der Suchleiste als Sticky Menü. Mit dieser Einstellung fahren folgende Punkte immer mit: Suchleiste, Merkzettel, Kundenkonto und der Warenkorb.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FHhO59OKQitOoXTEFAx5K%2FSW5-StickyMen%C3%BC-04.jpg?alt=media&#x26;token=eeaeb278-9077-4530-af92-50299f563b0f" alt="" width="350"><figcaption></figcaption></figure>

### Suchleiste und Navigationsleiste als Sticky <a href="#darstellung_frontend_suchleiste_navigationsleiste" id="darstellung_frontend_suchleiste_navigationsleiste"></a>

Diese Einstellung vereint beide Varianten der Anzeigemöglichkeiten. Die Anzeige der Suchleiste mit einblendbarer Navigationsleiste als Sticky Menü.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FV5ZiErSbEbr6QuiYV30P%2FSW5-StickyMen%C3%BC-05.jpg?alt=media&#x26;token=d8287ecc-3212-494d-bb63-1c84f1201712" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FsqDQUSPvgvaqhnPUdlb0%2FSW5-StickyMen%C3%BC-06.jpg?alt=media&#x26;token=3bb1207f-1a21-4f97-9eea-b62c707aadf3" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FW5VedPW1HasQjzdhN2I0%2FSW5-StickyMen%C3%BC-07.jpg?alt=media&#x26;token=f473d248-bb78-4448-9ecd-bdaf390ae75f" alt="" width="563"><figcaption></figcaption></figure></div>

### Scroll-to-Top Button <a href="#darstellung_frontend_scrolltotop" id="darstellung_frontend_scrolltotop"></a>

Die Anzeige des Scroll-to-Top Button - Darstellung von links nach rechts: Normaler Button, Primärer Button, Sekundären Button

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FW1rbAhtR1Xke404QNLak%2FSW5-StickyMen%C3%BC-08.jpg?alt=media&#x26;token=0d0702ee-d32a-47d0-a963-03271b66ccfd" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FM9lnxerfz7fcjJDJq0lp%2FSW5-StickyMen%C3%BC-09.jpg?alt=media&#x26;token=506ee0ca-d09c-4789-98a8-3416b56ac58c" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FBxTnlowVqq587X2TyJiF%2FSW5-StickyMen%C3%BC-10.jpg?alt=media&#x26;token=5846ccc9-c370-4d99-8b7f-094c0411e495" alt=""><figcaption></figcaption></figure></div>

## Responsive - Tablet <a href="#responsive_frontend" id="responsive_frontend"></a>

Die Anzeige des Sticky Menü Professionell. Dargestellt auf dem Tablet. Im Bereich Smartphone wird der Shopware-Standard genutzt.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FB4sz9jRu9Rztf4dZ6fcx%2FSW5-StickyMen%C3%BC-11.jpg?alt=media&#x26;token=fb94d61e-e213-44bd-9ed7-21661db3c844" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F5qe7fofrAziS4UsGdVBw%2FSW5-StickyMen%C3%BC-12.jpg?alt=media&#x26;token=14c3a038-344e-46ac-bd46-3b96f24addc6" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FoofJEy4F44UOOpahxaQ9%2FSW5-StickyMen%C3%BC-13.jpg?alt=media&#x26;token=8f07fec6-0816-47cb-beff-b708fa0160ac" alt=""><figcaption></figcaption></figure></div>