Flyout Menü erstellen

Hallo liebes Forum,

auf unserer Website "sk-wickede.de" existiert ein Modul "Dot Nav Menu", welches auf der rechten Bildschirmseite fest sitzt. Dieses Modul ist der Modulposition "absolute" des Templates jp-perfect zugeordnet.

Nun möchte ich ein neues Modul veröffentlichen, welches genau so konfiguriert ist, wie dieses Dot Nav Menu, allerdings soll dieses am linken Bildschirmrand schweben.

Hieru habe ich bereits eine neue Modulposition "flyout" erschaffen (weil dieses Menü ein Flyout-Menü, also ein ausklappbares Modul werden soll). Ich schaffe es allerdings nicht die neue Modulposition so zu gestalten, dass es festsitzt und über der Seite schwebt.

Ich hoffe ich konnte mein Problem verständlich machen und habe keine Angaben vergessen.

Ich freue mich über alle Ideen und Ratschläge!

Viele Grüße

SKW

Hallo.

Es ist ein leeres "Eigenes Modul". Ich habe es nun veröffentlicht.

Ich habe nun position: fixed hinzugefügt und das hat das erste Problem bereits gelöst. Es "fliegt mit" und liegt im Vordergrund über (fast) allen anderen Elementen.

Das Modul soll nun vom linken Bildschirmrand ausgeklappt werden können, wenn ich es (oder ein Symbol/Bild) anklicke. Dazu habe ich das Modul mit margin-left nach links außerhalb des sichtbaren Bereiches verschoben, sodass es nur noch zu einem kleinen Teil sichtbar ist. Mit einem Klick auf das Modul oder einem Symbol soll es nun auf margin-left: 0; gesetzt und damit wieder sichtbar wird.

Folgenden Code habe ich nutzen wollen.

#flyout {
    position: fixed;
    width: 20%;
    top: 30%;
    height: auto;
    background: #0094cd;
    display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 16px;
    color: #fff;
    left: -17%;
}

#flyout.active {
    left: 0;
}

#flyout .toggle-btn {
    position: flyout;
    top: 30px;
    left: 30px;
}

.toggle-btn span {
    width: 45px;
    height: 10px;
    background: #000;
    display: block;
    margin-top: 4px;
}

In der HTML:

<div id="flyout" style="text-align: left;">
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<p>Top 1</p>
<p>Top 2</p>
<p>Top 3</p>
<p>Top 4</p>
<p>Top 5</p>
<p>&nbsp;</p>
</div>
<div style="text-align: left;">&nbsp;</div>

Eigentlich sollten drei Striche entstehen, die das ausklappen des Moduls ermöglichen sollen, wenn man darauf klickt. Dieses werden allerdings gar nicht erst angezeigt. Schöner fände ich sowieso ein Schriftzug oder ein Bild, das die"toggle-btn"-Klasse besitzt. Wie stelle ich das an?

Danke weiterhin für eure Hilfe!

Problem solved. Der Editor hat meinen Code stellenweise entfernt. Mit dem Plugin Sourcerer konnte ich meinen Javascript Code einbauen.

Kann geschlossen werden!