Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Animiertes Flyout seitlich
#1
Hallo,
dieses animierte Flyout seitlich wurde mit HTML, CSS und jQuery realisiert.
Im unteren Teil ist ein Tutorial angehangen.
Ganz unten gibt es auch den gesamten Code zum downloaden, somit könnt Ihr dann den Code kopieren und braucht nicht alles abzutippen.

Der seitliche Button kann durch eine Grafik ersetzt werden, was ich für einen Gebrauch in einer offiziellen Seite empfehlen würde.

Zum Flyout und Tutorial

Zugangsdaten:
User: Test
PW: frei123
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Danke Andy,

super Ding. Prima.
Werde ich nutzen. Muss ich mir genau anschauen, etwas umbauen, denn da kann man ja auch noch
eine kleine Navi unterbringen....dat rote grelle Close Dingens sollte man auch ändern könner, dezentes Kreuz
Ist das möglich?
Bin mal gespannt, ob sich das auch mit meiner Navik-Navi verträgt


Gruß Claus
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Ja natürlich kannst du das dezenter machen.
Ganz simpel die Farbe in der CSS anpassen fertig :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
... sieht gut aus - prima thumbs up

Da ist aber immer noch dieser Fehler, den ich schon versucht hatte Dir zu erklären. Das Flyout schließt nur "weich", wenn man es ganz oben öffnet und schließt, sobald man etwas scrollt geht der Effekt verloren und es klappt ganz spontan zu.

... und am Handy funktioniert das gesamte Skript gar nicht Sad
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Andy...du weist doch das ich extrem pingelig bin.
Das rote Closefeld mag ich persönlich nun gar  nicht...
besser wäre ein dezentes Kreuz zum Schliessen...aber eben nicht rechts oben...und daneben. Innerhalb wäre viel,viel schöner. Das umzubauen...dafür fehlt mir aber das Grundwissen.
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
@Klaus
diese CSS-Klasse austauschen. Dann sitzt der Button oben rechts innerhalb des Flyout

Code:
/** vom Schliessenbutton **/
.sbuttonOn {
    display: block;
    width: 5em;
    height: 2em;
    position: absolute;
    left: 19.3em;
    border: 1px solid #000;  /** Rahmenbreite Rahmenfarbe  **/
    background: #cccbca; /** Hintergrundfarbe  **/
    top: 0.5em;
}

Diese Css-Klasse neu hinzufügen
Code:
/** Text im Schliessenbutton **/
p.sb {
    color: green;
    margin-bottom: 1em;
    line-height: 1;
}

in der css-Klasse .sb dann den Eintrag color:Yellow löschen
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
@Tommy

Das mit dem Scrollen werde ich noch anpassen.

Hier gibt es verschiedene Lösungen. Werde mal überlegen welche ich favorisiere.
Smiling
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
@Andy,

schau mal hier: https://www.zahnaerzte-stuhr.de/#

Mit Klick auf das rechte, obere Hamburger Menü...wenn das so hinzubekommen ist, tja dann,
bin (zumindestens) ich wunschlos glücklich.
Die Anzeige sollte auch rechts sein... :bier

Handyanzeige? Noch nicht geschaut. Könnte aber damit leben, wenn das nicht funzt!

Claus mit "C"
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Andy,

bevor Du da weiter viel Arbeit investierst - das Teil funktioniert überhaupt nicht am Handy. Man kann es nicht wirklich öffnen - und falls man es schafft, nie wieder schließen ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Welches Teil meinst du Tommy?

Mein Flyout habe ich für Mobile ausgebelendet.

Nachtrag:
Sollte so sein ist aber bei der nachträglichen Anpassung untergegangen. !
Werde ich heute abend auf jeden Fall korrigieren.

Wer es für das Handy nutzen möchte muss dann die CSS für Displaygrößen kleiner 763px noch entsprechend einfügen und anpassen.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
ja - un der Button muss vollkommen anders sein am Handy, der ist riesig hoch, man kann nichts lesen und ist vielleicht 1mm breit :D Mit meinen Fingern kann ich den nicht tippen ...

... so sieht der seitliche Button (links) aus:


.jpg  Screenshot_20200116-092257_Samsung Internet.jpg (Größe: 648,41 KB / Downloads: 8)


... schafft man es das zu öffnen, verdeckt das Flyout mehr als den gesamten Bildschirm und man kann es nicht mehr schließen. Das sieht dann so aus:


.jpg  Screenshot_20200116-092312_Samsung Internet.jpg (Größe: 328,35 KB / Downloads: 7)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Ja - weil überhaupt nicht für Handy angepaßt. :D
War ja auch so nicht vorgesehen.
Aber interessantes Rätsel "Wie bekomme ich das  Flyout am Handy  wieder zu" :headbash:  :baeh:
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
@Claus


Zitat:schau mal hier: https://www.zahnaerzte-stuhr.de/#

Mit Klick auf das rechte, obere Hamburger Menü...wenn das so hinzubekommen ist, tja dann,
bin (zumindestens) ich wunschlos glücklich.
Die Anzeige sollte auch rechts sein... :bier

Handyanzeige? Noch nicht geschaut. Könnte aber damit leben, wenn das nicht funzt!

Claus mit "C"
Ja ist es aber da habe ich im Moment keine Zeit für. Bin seit 6 Wochen zuhause einzel Kämpfer da meine Doris sich die rechte Hand gebrochen hat und nicht wirklich viel machen kann. Mad
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
@Andy

alles gut...no Stress.Ich verfolge wie es sich entwickelt.
Kümmer du dich mal um deine Frau...gute Besserung
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Hallo,
so habe meine kleinen Fehler behoben und noch etwas Verbesserung rein gebracht.

- Scrollen bei geöffnetem Flyout nicht mehr möglich
- Flyout kann nicht mehr geöffnet werden ab 676px sollte somit auf keinem Handy mehr funktionier
- Button größe auf kleineren Displays angepaßt


ich kann zur Zeit nicht auf mein Tablet mit Touchfunktion zurückgreifen zum Testen. Wäre nett wenn ihr das mal testet ob das Scrollen per Touch auch deaktiviert ist bei geöffnetem Flyout

Viel Spaß mit dem Flyout
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Großes Flyout gesucht stobi_de 17 276 11.01.2020, 17:29
Letzter Beitrag: Werner123
  Animiertes Öffnen des Menüs? stobi_de 10 226 07.11.2019, 18:29
Letzter Beitrag: AndyNeu



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!